Change how the cart reward bar looks

Open the Reward bar card and scroll to Styles. Colors, sizes, milestone icons and the unlock animation live there. The message's position and look sit under Content. Tier icons live inside each tier.

New settings start at the look your cart already had, so a saved cart doesn't change until you pick something.

Change the look

1. In Shopify admin, open Apps → Section Store → Cart Drawer.
2. Click Edit on your cart.
3. Under Body, open the Reward bar card.
4. Under Styles, change what you want. The preview updates as you go.
5. Click Save.

Colors

• Background and Text color: the block itself.
• Bar background and Bar fill: the track and its progress.
• Locked tier and Unlocked tier: each milestone's title.
• Unlocked icon: the icon inside a reached milestone. A locked icon follows Bar fill.
• Milestone background and Milestone border: the circle behind each icon.

Sizes and spacing

• Bar height and Milestone size.
• Tier text size.
• Top padding and Bottom padding.
• Milestone spacing: Spaced by threshold places milestones by their amount. Evenly spaced gives equal gaps. Centered gives each tier an equal column with its milestone in the middle, so the bar runs on past the last one.
• Milestones: On the bar (the default), Above or Below the bar.
• Show tier thresholds under milestones prints each tier's amount.

Milestone icons

• Icon style: Filled (the default), Outline for thin-line icons, or Dot for a plain dot with no icon.
• Reached tier: Keep icon (the default) or Show check once the tier unlocks.
• Locked tiers: what a tier shows before it unlocks. Keep icon (the default), Show lock or Show check.

A tier with its own uploaded icon for the reached state keeps both its pictures, whatever Reached tier and Locked tiers say.

The message

These sit under Content, next to Text align:

• Message: Above the bar (the default) or Below the bar.
• Text size for the message.
• Message in capitals prints it in capital letters.
• Amounts in bold is on by default. Untick it to show amounts in plain text.

Unlock animation

Celebrate animation plays when a new tier unlocks: None, One side cannon, Screen fireworks, School pride or Ring pulse.

Tier icons

1. In Shopify admin, open Apps → Section Store → Cart Drawer.
2. Click Edit on your cart.
3. Under Body, open Reward bar.
4. Open a tier.
5. Click its icon. Change tier icon opens.
6. Pick a default icon or upload your own.
7. With a custom icon, tick Use a different icon when tier is reached to swap it once the tier unlocks.
8. Click Done.
9. Click Save.

To leave the bar plain at a tier, tick Hide icon and title on the tier. Its icon and title go. The reward still works.

If it doesn't work

• Milestones overlap: set Milestone spacing to Evenly spaced or Centered.
• The check or lock doesn't show on a tier: that tier has its own uploaded reached icon. Untick Use a different icon when tier is reached on it.
• The fill color has no effect: check that you changed Bar fill, not Bar background.

Related

• Set up a reward bar in the cart drawer
• Change the reward bar messages
• Change the cart drawer colors and style

Also searched as: outline icons, reward bar check mark, lock icon on tiers, message below the bar, reward bar layout, reward bar color, progress bar color, bar fill color, reward bar design, reward bar style, reward bar height, milestone icons, tier icons, custom tier icon, hide tier icon, milestones overlap, confetti, confetti animation, fireworks animation, celebrate animation