# How to customise the look of the cart progress bar without code

> The Design page styles the bar without code: layout of the tiers, colours, markers, prices, images, spacing, mobile margins and custom CSS, saved as reusable designs.

Updated 2026-09-25 · https://www.yaco.studio/docs/design

## Where the design settings live

Everything visual is on the **Design** page of Yaco Progress Bar. It is split into tabs, one per part of the bar:

| Tab | What it controls |
|---|---|
| **Bar style** | How tiers are laid out, bar colours, height, border, shadow, radius |
| **Images** | Tier icons and their colours, reached or not |
| **Goal name** | Whether tier names show, their size and colours |
| **Price** | The threshold shown under each tier |
| **Marker** | The dots or images that mark each tier on the bar |
| **Amount** | The progress value and the total |
| **Wrapper** | Margins, padding, border, background, maximum width, custom CSS |
| **Success message** | The message line; see [success message](https://www.yaco.studio/docs/success-message) |
| **Gift interface** | The gift button, gift chooser and gift list; see [gift chooser](https://www.yaco.studio/docs/gift-chooser) |
| **Presets** | Ready-made designs to start from |

A live preview follows your changes; nothing reaches your store before **Save** (see [save and publish](https://www.yaco.studio/docs/save-and-publish)).

## Choose how the tiers are laid out

In **Bar style**, **Goals display** sets how the tiers share the bar:

- **Symmetrical**: each tier gets the same width.
- **Full width**: the tiers stretch across the whole width.
- **Proportional**: each tier's width follows its threshold.
- **One by one**: only one tier shows at a time.

**Limit displayed goals** is on by default. It shows at most 4 tiers at once (**Goals displayed (max)**) and always keeps at least 2 unreached tiers in view (**Unreached goals displayed (min)**). The window slides forward as tiers are unlocked. Untick it to show every tier. It does not apply in **One by one** mode.

The same tab holds **Price alignment** and the bar colours; height, border, shadow and radius are under **Advanced options**.

## Style markers, prices, images and amounts

- **Marker**: switch markers on with **Show marker**, or use each tier's image instead with **Use Goal's image as marker**. Colours can differ for unreached, reached and all-reached states.
- **Price**: **Show goal price**, then font size, bold, colours per state, padding and margins.
- **Images**: **Show goal's image** turns images on for every tier. Set each tier's own image in its tier card; this tab only sets size, colours, radius and shadow.
- **Amount**: **Show progression value** and **Show total value**, with colour, size and spacing.

## Adjust spacing for desktop and mobile

In **Wrapper**, switch between **Default** and **Mobile** at the top to set margins and padding for each screen size. **Max width** applies to desktop only. These values apply everywhere the design is used; a placement's own settings in the theme integration can override them (see [theme placement](https://www.yaco.studio/docs/theme-placement)).

## Go further with custom CSS

At the bottom of **Wrapper**, **Progress bar custom CSS** accepts your own CSS and **CSS class names** adds classes to the bar wrapper. The CSS is checked when you save and scoped to the bar, so your rules do not leak into the rest of the theme.

## Start from a preset or another store

- **Presets**: pick a ready-made design and click **Apply**. It replaces the style of the design you are editing.
- **Import from another store**: running several stores? The icon next to **Add design**, or the **Reuse a design from another store** card in **Presets**, copies one of their designs as a new design, without changing existing ones. A store is listed when you use the same verified Shopify email on both and have opened Yaco Progress Bar there at least once.

In both cases, click **Save** to keep the result.

## Use several designs

**Add design** and **Duplicate design** create extra designs, for example one for the cart drawer and one for the product page. One design is the default; **Use this design** assigns another one to specific placements.