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

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
Gift interface	The gift button, gift chooser and gift list; see 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).

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).

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.