# Change how the cart reward bar looks

> Set the bar's colors, layout, milestone icons, the message position and the animation when a reward unlocks.

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](https://section-store.orka.help/a/set-up-a-reward-bar-in-the-cart-drawer)
- [Change the reward bar messages](https://section-store.orka.help/a/change-the-reward-bar-messages)
- [Change the cart drawer colors and style](https://section-store.orka.help/a/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