Promo Drawer™

Guide

How to show several promotions at once on Shopify

A sale, a first-order code and free shipping over $75, all at once. When you run more than one offer, the hard part is showing them without stacking popups or hiding all but one in a rotating banner. Here’s how to make the offers work together, and how to show them side by side.

Before you show several offers

  • Lead with one. Put your strongest offer first; the rest are there for the shoppers they fit.
  • Make sure they work together. Shopify discounts don’t combine unless you allow it. If two can’t be used on the same order, say so next to them.
  • One message per offer. Each offer gets its own words and its own button, so nobody has to work out which code goes with which deal.
  • Give each offer a real end. When one ends, its message should go with it while the others carry on.

Make the discounts work together in Shopify

Shopify sorts discounts into three classes: product discounts, order discounts and shipping discounts. In each discount’s Combinations section, select the classes it can combine with. When discounts can’t combine, Shopify applies the one that’s best for the customer’s cart.

A customer can use up to five product or order discount codes and one shipping discount code on the same order. See Discount combinations.

A common set that combines cleanly: an automatic order discount for the sale, a shipping discount for free shipping over an amount, and a first-order code, each set in Combinations to combine with the others.

Four ways to show several offers

1. Several announcements in your announcement bar

In themes with an announcement bar, open Online Store → Edit theme, and in the Announcement bar section click Add Announcement for each offer, up to 12. Turn on Auto-rotate announcements and set Change slides every, or let shoppers move through them with the arrows. Each can link somewhere. See Add an announcement bar.

It’s free and on every page. But it shows one line at a time, so a shopper may only ever read the first, and a line of text can’t apply a code.

2. Banners or a slideshow on your home page

Theme sections can give each offer its own banner. They show where you place them, usually the home page, and push your products further down the page.

3. Popups

A popup shows one offer and covers the page until it’s closed. Several offers means several popups, or one popup crammed with all of them.

4. Cards in a drawer shoppers open

Each offer gets its own card, side by side in one slide-out drawer: the sale, a code shoppers apply in one tap, free shipping progress, a countdown, a product or a collection. A button waits at the edge of every page, and nothing covers the page until a shopper taps it. This is how Promo Drawer works.

The trade: shoppers see the offers when they open the drawer. A one-line announcement in your theme pairs well with it, pointing to the lead offer.

A collection page with a Promo Drawer side drawer open, titled Collection offers, with three cards: a 10% off first-order code with an Apply button, a bestselling candle with Choose options, and free shipping on orders over $75.
Three offers side by side in one drawer, on a sample store’s collection page.
Announcement barBannersPopupsA drawer
Offers in view togetherOne at a timeWhere you place themOne per popupSide by side
Covers the pageNoNo; pushes it downYesNo, until opened
Apply a code in a tapNoNoDepends on the appYes, with a code card
Different offers by pageNoPer sectionDepends on the appYes, on Basic and Pro

Show several offers with Promo Drawer

Install Promo Drawer from the Shopify App Store and turn on its app embed in your theme editor; Getting started walks through both. Then:

  1. Choose the offers and their order. A drawer holds 3 cards on Free, 5 on Basic and 8 on Pro, in the order you choose. Put the lead offer first; drag to reorder.
  2. Give each offer its own card. An announcement or image for the sale, a discount code card, a free shipping card, a countdown, a product or a collection. Every card is the same size, so any mix reads as one set. See Card types.
  3. Check your discounts combine in Shopify, as above. If two codes can’t be used together, say so on their cards.
  4. Let shoppers see how many there are. The default Header layout shows a card count and arrows, and the next card always peeks in, so shoppers can tell there’s more to see.
  5. Give different pages their own offers. Make a second drawer for, say, collection pages, and choose its page types or URLs. Only one drawer shows per page: the highest in your Drawers list that fits. See Targeting and scheduling.
  6. Give each offer its end. A drawer can start and end on dates you set, and a countdown card can count to that end. To end one offer while the others carry on, turn its card off. See How to schedule a sale on Shopify.

Or ask Shopify’s Sidekick: “Make me a drawer with 20% off everything, my code WELCOME10 for first orders, and free shipping over $75.” It builds the drawer for you to review and save. See Sidekick.

The Free plan has one drawer with 3 cards (announcement, image and follow) on your home page. Basic has up to 3 drawers with 5 cards each, adding codes, countdowns, free shipping, products and collections, plus targeting and scheduling. Pro has up to 20 drawers with 8 cards each and every card type. Both paid plans have a 30-day free trial.

Sets of offers that work well together

  • The everyday set. A first-order code, free shipping progress and a bestseller.
  • A seasonal sale. The sale, its countdown and the collection it applies to. See the Black Friday checklist.
  • By page. Codes and free shipping on collection pages; a bundle or a related product on product pages.
  • With the details. A shipping cutoff or a returns line beside the offers, for the questions shoppers ask before they buy. See How to add a free shipping bar and How to auto-apply a discount code.

Questions merchants ask

How many offers can one drawer hold?

Up to 3 cards on Free, 5 on Basic and 8 on Pro. On Basic and Pro you can also have more than one drawer, each for different pages.

Will shoppers see the offers after the first?

The next card always peeks in at the edge, and the default layout shows how many cards there are, with arrows. Shoppers swipe or tap through.

Can two discount codes be used together?

Only if you allow it in each discount’s Combinations section in Shopify. Otherwise Shopify applies the one that’s best for the customer’s cart.

Does the drawer cover my store?

Nothing covers the page until a shopper taps the button. Once open, the Header and Minimal layouts dim the page behind them, and the Floating layout leaves your store usable underneath. See Design.

Every offer, side by side, behind one button.

Free to start. No code to install. A 30-day free trial on Basic and Pro.