Beauty Affairs HK

Mini-cart and gifts

Change the cart drawer that opens when a shopper adds a product, and the gift and reward thresholds behind its progress bar.

You change the drawer and the thresholds in the theme editor. The gifts themselves are Shopify products and metaobject entries.

Change what appears in the cart drawer

Go to Online Store > Themes > Customize, then pick the Mini cart section in the left sidebar. The drawer is built from blocks. Each block's Render location setting puts it in the header, body or footer of the drawer.

BlockWhat it showsNotable settings
HeaderDrawer title and close buttonTitle, Show item count, Close button label
Purchase gifts progressThe spend-more progress barHeading, All gifts unlocked message
Gifts accordionCollapsible list of gifts already addedAccordion heading, API URL
Line itemsThe products in the cartHidden products, Show price, Quantity labels, Empty message
Clear cart CTAEmpty-the-cart button and its confirmationButton label, Confirm title, Cancel label
You may also likeRecommended products carouselCollection, Max products, Add to cart label
FooterCheckout button and shipping protectionCheckout button label, Shipping protection product
Free giftA gift tied to a metaobject definitionMetaobject Type Name
SummaryCart totalsRender location only
Discount codeDiscount entry fieldInput label, Placeholder, Submit label

Two settings above the blocks apply to the whole drawer. Open when item is added controls whether the drawer opens on add to cart. Max drawer width (px) sets the width on desktop only. On mobile the drawer is always full width.

The Gifts accordion heading accepts {gift_count}, which the drawer replaces with the number of gifts in the cart.

Change gift thresholds

Thresholds are theme settings, not mini-cart section settings.

Open Customize, click the gear icon at the bottom of the left sidebar, then Rewards Tiers. There are four tiers. Each one has:

  • Price Threshold, the cart subtotal at which the tier unlocks
  • Title and Title in cart, which can differ
  • Tier Image
  • Desktop Subtitle and Mobile Subtitle, which accept {threshold} for the raw number and {threshold_money} for a formatted price
  • Encouragement message and Cart encouragement message, shown while the shopper is still below the threshold

The same settings group holds the wording for the Unlock Your Free Bonus homepage section.

The Cart group under the gear icon has a second set of thresholds. They control the free shipping, free sample and free gift messages, and each has its own enable checkbox, amount and collection. These are separate from Rewards Tiers and show different wording. Check which message the shopper sees before you edit either set.

Change the automatic gift product

Under the gear icon, Products holds the gift the theme adds to the cart once a shopper spends enough.

SettingWhat it controls
Enable Product GiftThe whole feature, off by default
Product GiftThe product or products to add
Product Gift CollectionThe collection shoppers choose a gift from
Product Gift Minimum Price ThresholdCart subtotal required, in dollars
Product Gift Add QuantityHow many units get added
Product Gift Explainer Label, CTA Label, Badge LabelWording on the product page
Product Gift Modal Title, Description, Skip CTA LabelWording in the gift chooser

Business rules

The progress bar and the gift logic use the cart subtotal after discounts. A discount code can take a shopper back below a threshold and remove a gift they had already unlocked.

When a line's quantity drops below 3, the theme removes its promotion label. This rule is in code, not in a setting, so changing it needs a developer.

The Free gift block lists gifts from a metaobject definition, minicart_free_gifts by default. Add or edit entries under Content > Metaobjects. If the Metaobject Type Name setting names a definition that does not exist, the block shows nothing and no error appears.

Products listed under Line items > Hidden products stay in the cart and still go to checkout. The setting only hides them from the drawer.

Verify the change

  1. Open the storefront in a private window so you start with an empty cart.
  2. Add a product priced below your lowest threshold. Confirm the drawer opens and the progress bar shows the encouragement message.
  3. Add enough to cross the threshold. Confirm the tier unlocks and the gift appears.
  4. Apply a discount code that takes the subtotal back under the threshold, and check what happens to the gift.
  5. Repeat on a phone. The drawer is full width there, and the mobile subtitle text is different.

If the drawer does not show your change, the browser has usually cached an old file and the setting is still saved. Do a hard refresh before you investigate further, then see Cart and line item errors.

Developer map

ConcernSource
Drawer markup and blockssections/mini-cart.liquid, snippets/mini-cart.*.liquid
Drawer behavioursrc/entrypoints/mini-cart/elements/
Cart requests and queueingsrc/entrypoints/mini-cart/internals/cart-service.ts
Event namessrc/entrypoints/mini-cart/internals/core.ts
Promotion label rulesrc/entrypoints/mini-cart/internals/line-item-rules/promotion-label-quantity-rule.ts
Automatic gift productsrc/components/purchase-gift-manager/index.ts
Reward tier values passed to JavaScriptlayout/theme.liquid, around line 788
How it fits togetherArchitecture: mini-cart

On this page