How to let shoppers choose their free gift in a pop-up or with a button

When the gift chooser appears

The gift chooser is a pop-up (modal) listing the gifts a shopper has unlocked. It is used when a gift tier offers more than one product or variant. How it appears is set in the tier card, under Auto add gift to cart (see free gift), unless the bar's design replaces it (see below):

Option	What the shopper sees
Auto show Gift modal	The chooser opens by itself when the tier is reached. A gift with a single variant is simply added to the cart.
Show "Choose a gift" button	A button under the bar opens the chooser. Only for tiers with several gifts. If the other gift products are deactivated later, the button stays and offers the remaining gift; if the shopper removes it from the cart, the button comes back.
Show gift list in the progress bar	No pop-up: the gifts are listed inside the bar and added in one click.
Disable modal & button	Yaco Progress Bar adds nothing. Use it when another app adds the gift.

When several gift tiers are reached at once, a single pop-up opens with one section per tier.

Show a tier differently in each bar

A design can replace the tier's mode in the bars that use it. Open Design › Gift interface, then the Gift display card:

Choice	What the bars using this design show
Follow each goal's setting (default)	The mode set in each tier card.
Gift list in the bar	Once the tier is reached, its gifts are listed under the bar. No Choose a gift button in this bar.
"Choose a gift" button	Once the tier is reached, the Choose a gift button appears in the bar. A click opens the pop-up, with the colours and texts of that bar's design.

Example: the cart drawer uses design A, set to Gift list in the bar, and the bar on the cart page uses design B, set to "Choose a gift" button. The same tier shows its gifts as a list in the drawer and as a button on the cart page. It is still one tier, one discount and one gift: picking it from either bar adds the same gift.

In the tier card, under the mode, the app lists the designs that replace it and the mode each one sets.

Pop-up that opens on its own. For a tier set to Auto show Gift modal, the pop-up no longer opens on its own when every bar on the page that shows this tier uses a design set to the list or to the button. If at least one of those bars follows the tier's setting, it opens as before. When no bar is displayed yet (for example a cart drawer that loads after the add to cart), the bars placed in your theme decide.

Limits:

• Only tiers with several gifts are affected. A tier with a single gift always adds it automatically; if the shopper removes it, the bar shows an Add my gift back button (see below).
• When such a tier is reached at the same time as a tier with a single gift, the single gift is added on its own and the pop-up does not open: the shopper picks the other gift from the list or the button in the bar. The same applies to a tier set to the list or the button in its own card.
• Compatibility mode (Disable modal & button) is never replaced: it stays set by the tier.
• The paid option (Offer the products before the goal is reached, as a paid option) stays reserved for tiers set to the gift list in their own card, and those tiers keep their list in every bar: a design set to the button does not replace it. A tier set to the button and shown as a list by a design does not offer the paid option.

What happens when the shopper closes it

No thanks, the Escape key or a click outside the pop-up close it for the current browsing session. It does not open again on its own until a new tier is reached. The Choose a gift button, if shown, stays available to reopen it.

Closing is not a refusal; removing the gift from the cart is. To make the choice mandatory, tick Hide 'No thanks' button.

When the shopper removes a single gift

A tier with a single gift, added automatically, has no pop-up. When the shopper removes that gift from the cart, the app does not add it back on its own, and an Add my gift back button appears under the progress bar, in every bar that shows this tier. One click puts the gift back in the cart, without opening a pop-up.

The button disappears once the gift is back. It does not show when the cart is back under the threshold, when the gift is sold out, or when a discount code that does not combine with the gift removes it. If a tier with several gifts also has a gift to choose in the same bar, the button offers Add my gift back first; once the gift is back, it becomes Choose a gift again for that choice.

The button takes the style of the "Choose a gift" button of the bar's design, and its label is set per design (see below). To stop shoppers from removing the gift at all, tick Force to keep the gift in cart in the tier card.

Where to change its look and texts

1. Design › Gift interface (in the app):

• "Choose a gift" button: Show Gift button, Allow changing the gift after selection (the button stays visible and reopens the chooser), CSS classes to reuse your theme's button style, font size, colours, border and padding.
• Gift modal: Title font size (desktop), Title font size (mobile), Bold title, Group variants by product (one card per product with a variant menu instead of one card per variant) and Hide 'No thanks' button.
• Gift modal colors, set per design: pop-up background, gift card background and border (normal and selected), text, background and vertical padding of the “Add to cart” button, and Show subtitle. A colour left empty uses the one set in your theme's app embed, then the default. With several designs, the card title shows the design you are editing: change the one your bar actually uses.
• The default texts of the pop-up, set per design in the Default gift modal texts card: the title, the subtitle, the list titles, the “Free” and “Sold out” labels, the “gift no longer available” message, the “Choose your gift(s)”, “Add to cart” and “No thanks” buttons, the label of the “Choose a gift” button, and the “Give back the gift” button (“Add my gift back” when left empty, translated into every language of your store). The Gift interface tab also shows when a tier offers a single gift added automatically, without Force to keep the gift in cart.
• Gift list style, and custom CSS for the pop-up and the list.

2. The tier card: Gift button text sets the button label for that tier, and the Gift modal texts card overrides the title, subtitle and list titles for that tier. Use {price} in the subtitle for the tier threshold and {quantity} in the list title for the number of gifts to pick. A text set on the tier comes before the design's text, when the pop-up shows only that tier. When it groups several tiers, the design's texts are used. An empty field falls back to the design's text too. Unticking Show subtitle hides the subtitle for that tier only; a tier cannot show a subtitle its design hides.

3. Theme editor: in the Shopify admin, open Online Store › Customize, then App embeds › Yaco Progress Bar. Its Gift modal section is being phased out: its colours, subtitle setting and texts are only used when the design has none of its own, and will be removed later. If you had changed them, they were copied to your designs, where you now edit them.

Preview the pop-up in the app

The Gift modal colors card, in Design › Gift interface and in the Gift interface tab of Goals & Discounts, has a Preview the modal button. It opens the pop-up in the app, with the design you are editing and every tier that offers a choice of gifts, reached or not. In the bar preview, the Choose a gift button opens it too, with the tiers reached by the simulated cart.

Nothing is added to a cart: pick gifts and close the pop-up as a shopper would, nothing is kept. Two differences with your store:

• a colour left empty shows the default colour, not the one from your theme's app embed;
• the pop-up uses the design you are editing, whatever placement your theme gives each tier.

If the app says that no tier offers a choice of gifts, add several products or variants to a gift tier.

Sold-out gifts

The chooser checks stock again each time gifts are offered, at most once a minute:

• a gift that sells out is marked Sold out and can no longer be picked;
• a gift already selected that sells out is removed from the selection, with the "Gift no longer available" message;
• the number of gifts on offer follows real stock: a tier promising 2 gifts offers only 1 if only one unit is left, and the title adjusts.

No limit applies when a variant does not track inventory or can be sold out of stock. To check stock, the app asks for Shopify's permission to read product inventory, and only reads the quantities of your gift products.

Translating the chooser

Tier texts and the design's gift texts are translated from their own fields, with the translate icon at the end of each field (see translations). Translations made earlier in Shopify's Translate & Adapt app were copied to your designs. Pick a language in the preview's Language selector to check them.

If a gift never reaches the cart, see gift not added.