Free Gift Picker Pop-up (Let the Shopper Choose 1)

The "gift picker" lets shoppers choose their free gift instead of getting one automatically. When the cart qualifies for an Auto Add to Cart offer, a pop-up shows the gifts you picked, and the shopper adds the one they want. For example:

• "Spend $100, choose 1 free gift: a tote, a candle or a travel serum"
• "Buy the hoodie, get a free tee in the size of your choice"

Only the gift the shopper chooses is free.

The gift picker is part of the Storefront Widgets add-on, which you can turn on from the Billing page in the app.

Use Cases

• Letting shoppers pick one free gift from a short list of products
• Letting shoppers pick the size or color of a free gift

How it works

1. The shopper's cart meets the conditions of your Auto Add to Cart offer (for example, a minimum subtotal or a product in the cart).
2. Instead of adding the gift, our app shows a pop-up with one card per product: the image, the name, "Free" next to the regular price, and an "Add" button.
3. If you selected several variants of the same product (for example S, M and L of a tee), that product's card has a dropdown so the shopper can pick one.
4. The shopper clicks "Add", and the chosen variant is added to the cart for free. Or they click "No thanks".

The pop-up shows once. After the shopper adds a gift or clicks "No thanks" (or the X), it doesn't come back on that cart. If the shopper removes the chosen gift from the cart, it isn't added back.

If the cart stops qualifying (for example, the shopper removes the product that triggered the offer), the free gift is removed from the cart, the same as other Auto Add to Cart offers.

Checklist

1. Create an Auto Add to Cart offer, or open an existing one, and go to its "Add to cart" step.
2. Under "When the cart qualifies", choose "Let the shopper choose 1".
3. Select the products the shopper can choose from. To offer a choice of size or color, select those variants of the product.
4. Save the offer.
5. Make sure the "Add to Cart Embed" and the "Discounts Embed" are turned on in your theme (Theme Editor, then App embeds).
6. Preview your store and add items until the cart qualifies. The pop-up should appear.

Every gift must be published to the Online Store and in stock (or set to continue selling when out of stock). Gifts that can't be added are left out of the pop-up. If none can be added, the pop-up doesn't show.

Customization options

In the "Add to cart" step:

• When the cart qualifies: "Add all of these" adds every selected variant (the original behavior). "Let the shopper choose 1" shows the pop-up.

In the Theme Editor, under App embeds, then "Add to Cart Embed", then "Gift picker pop-up":

• Button color: the background of the "Add" buttons.
• Button text color: the text of the "Add" buttons.
• Corner radius: from 0 to 24px, for the pop-up, the cards and the buttons.
• Title, Subtitle, Add button, No thanks link, Free label, Error message: the pop-up's text. Leave a field blank to use the default text. These apply to every "choose 1" offer.

Everything else uses your theme's font and colors.

Custom CSS

For changes the settings don't cover, add CSS to your theme. In most themes it goes in Theme settings, then "Custom CSS". If your theme doesn't have that setting, add it to your theme's main stylesheet with "Edit code".

Start each selector with body. The pop-up uses these classes:

• .regios-gift-picker: the whole pop-up.
• .regios-gift-picker__overlay: the dark background behind the pop-up.
• .regios-gift-picker__dialog: the white box.
• .regios-gift-picker__title and .regios-gift-picker__subtitle: the heading and the line under it.
• .regios-gift-picker__close: the X button.
• .regios-gift-picker__cards: the grid of products, and .regios-gift-picker__card: each product.
• .regios-gift-picker__image, .regios-gift-picker__name: the product image and name.
• .regios-gift-picker__variant: the variant name, or .regios-gift-picker__select: the dropdown when there are several variants.
• .regios-gift-picker__free and .regios-gift-picker__compare-at: "Free" and the crossed-out price.
• .regios-gift-picker__add: the "Add" buttons.
• .regios-gift-picker__dismiss: the "No thanks" link.
• .regios-gift-picker__error: the message shown if a gift couldn't be added.

For example, this gives the pop-up a cream background, a bigger bold title, and rounded, all-caps "Add" buttons:

body .regios-gift-picker__dialog { background: #fdf8f0; }
body .regios-gift-picker__title { font-size: 26px; font-weight: 700; }
body .regios-gift-picker__add { border-radius: 999px; text-transform: uppercase; }

And this hides the crossed-out price so only "Free" shows:

body .regios-gift-picker__compare-at { display: none; }

Turn the pop-up off

• For one offer: open the offer's "Add to cart" step and choose "Add all of these". The gifts are then added automatically again, without a pop-up.
• For all offers: turn off the "Add to Cart Embed" in the Theme Editor (App embeds). This stops all Auto Add to Cart offers, not just the pop-up.
• Hide it on mobile: add this to your theme's custom CSS (see above). Shoppers on mobile then can't choose a gift, so they won't get one.

@media (max-width: 749px) { body .regios-gift-picker { display: none; } }

Show the pop-up again after "No thanks"

The pop-up remembers "No thanks" for the rest of that cart, so it doesn't keep interrupting the shopper. It shows again:

• On a new cart (for example, after the shopper places an order), when the cart qualifies again.
• On the next page the shopper opens, if you turn on "Re-add items after manual removal" in the Add to Cart Embed. With this setting, the pop-up comes back after "No thanks" or after the shopper removes their gift, so they can choose again.

To test the pop-up again on your own store, open your store in a new private browser window.

Languages

The pop-up's text is built in for English, Danish, Dutch, French, German, Italian, Japanese, Portuguese (Brazil and Portugal), Spanish and Swedish. It shows in the shopper's storefront language automatically.

To use your own wording, type it in the Add to Cart Embed's text settings (see "Customization options" above). If your store sells in several languages, translate your text with Shopify's Translate & Adapt app (App embeds, then "Add To Cart Embed"). Any text you don't translate shows as you typed it.

The name of the discount shown in the cart and at checkout is the title you type in the offer, and it shows the same in every language.

Compatibility

• The pop-up shows on your Online Store only. It doesn't show in checkout, so a shopper who goes straight to checkout without seeing it won't get a gift. A discount code typed in at checkout doesn't show the pop-up either.
• It requires an Online Store 2.0 theme with the Add to Cart Embed turned on.
• It doesn't work in the POS, draft orders or headless stores, the same as other Auto Add to Cart offers.

Your Feedback Matters

Your review helps keep this small business running. Please leave one on the Shopify App Store.

Updated on: 03/11/2026