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 and bars 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
Threshold	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, and whether amounts are rounded; see success message
Gift interface	The gift button, gift chooser and gift list, and whether this design shows gifts as a list or a button; 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.

In Proportional, Manual proportions lets you set each tier's share of the bar. Every tier starts at 1, so the tiers share the bar equally until you change a value. A tier set to 0 takes no width: it sits at the start of the bar and the other tiers share all the space, including when the bars are chained. If every tier is set to 0, the tiers share the bar equally.

Proportional and One by one need at least 2 active tiers on the same bar (chained bars count as one bar). With one tier per bar, both options are greyed out and a design already set to one of them shows as Symmetrical.

Limit displayed goals is off by default: the bar shows every tier. Tick it to show at most 4 tiers at once (Goals displayed (max)), always keeping at least 2 unreached tiers in view (Unreached goals displayed (min)). The window slides forward as tiers are unlocked. It does not apply in One by one mode. With Chain progress bars, the limit covers the whole chained bar: a bar with none of its tiers in view is hidden until the window reaches it. This applies to chained amount and weight bars, whose tiers are interleaved by threshold. Consecutive quantity bars are drawn as one bar but each keeps its own limit, since they can count different products. Two such bars with a limit of 4 can therefore show up to 8 tiers.

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

Keep a gradient fixed across the whole bar

By default, a gradient set in Bar default color moves with the fill: whatever the cart, the end of the fill always shows the last colour. Tick Fixed gradient across the whole bar to paint the gradient once over the full bar instead. The fill then reveals it as the cart grows, and with Chain progress bars a single gradient runs from the first bar to the last. Reached markers with no reached colour of their own take the colour of the bar beneath them, even once every tier is reached: the All reached marker default color setting is hidden and ignored in this mode. An animated gradient stays still in this mode.

Generate from markers builds that gradient for you: one colour per tier, taken from its reached marker (or the background of its image when images are used as markers), placed where the marker sits in the preview. You need at least two different colours. The result opens in the gradient editor, where you can still adjust each colour and position. Click again after adding or moving a tier.

Stack several bars in one block

When two bars or more have tiers, for example a spend bar for free shipping and a quantity bar for “Buy 3, get 20% off”, Bars layout in Bar style sets how they share the block:

• Side by side (default): the bars sit on one line, with one message line for all of them.
• Stacked: each bar gets its own line, one under the other, with its own message: the text of its next tier, then its own success message once all its tiers are reached (see success message).

Space between bars sets the gap between the stacked lines (16 px by default). With Chain progress bars ticked, consecutive bars of the same type (amount, quantity…) share one line and read as a single bar. A bar of another type between them keeps them apart, even when a block doesn’t show it. The gift button and the gift list stay under the last line. The layout belongs to the design: a cart drawer can stack its bars while the product page keeps them side by side.

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.
• Threshold: Show goal threshold, then font size, bold, colours per state, padding and margins. The threshold text itself can be rewritten for each tier: see add a tier.
• 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. For a free gift tier, Image then Offered product's image is the default when you turn the image on: the tier shows the image of the offered variant (or the product's main image) and follows it when it changes in Shopify. With several gifts, choose the product, or the variant when a product is offered in several; without an image, the next offered product's image is used, then the gift icon.
• Amount: Show progression value and Show total value, with colour, size and spacing.

4:26

Round amounts to whole numbers

In the Success message tab, next to Always show decimals, tick Round amounts to whole numbers to drop the cents from every amount the bar shows with this design. It applies to every currency, whether the amount is converted for a market or not:

• thresholds and the amount left are rounded up;
• the cart total and the discount amounts are rounded down, so the bar never promises more than the shopper will get;
• the amount left is counted from the threshold shown, so the total and the amount left always add up to that threshold. Until the tier is reached, the amount left never reads 0: it is at least 1.

With tiers at $100.50 and $200.50 and a cart of $24.95, the bar shows “$77 left”, thresholds of “$101” and “$201”, and a total of “$24”.

Rounding only changes what is written: a tier still unlocks at its exact threshold. The $100.50 tier unlocks at $100.50 even though it reads “$101”. Once the bar’s last tier is reached, the total never reads less than its threshold: a $100.50 cart reads “$101”, not “$100”.

AI assistants and screen readers always read the exact amounts: the summary of your offers and the text read out for the bar keep the cents (“$100.50”, “$75.55 left”).

Weights, quantities and order counts are not rounded. While rounding is on, Always show decimals is greyed out. At checkout, the setting of the default design applies. This option replaces Round up converted values to avoid showing decimal numbers, formerly in the tier’s Advanced options: if you had ticked it on an active tier, it is now ticked on your designs.

Choose where a click on a tier leads

In each tier's settings, the On click card sets what happens when a shopper clicks the tier in the bar or a gift in the inline gift list:

• No redirection: the click does nothing.
• Gift product page: the default for a free gift tier.
• Another product: pick any product of your store.
• Page or URL: a page of your store such as /pages/shipping or /collections/summer, opened in the shopper's language, or a full https:// address.

Any tier type can lead to a product or a page, not only free gift tiers. The setting belongs to the selected design: switch design at the top of the page to set it for another one.

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; your success message, gift texts and their translations stay as they are.
• 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. Each design in the list shows its main colors and the placements where it appears in that store, so two designs both named “Default” are easy to tell apart.

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, or opens the cart page in the theme editor: in the Yaco progress bar app block, pick it by name in Design.

Each design can also show tiers with several gifts its own way: as a list in one bar and with the Choose a gift button in another. The Gift display card, in Gift interface, sets it (see gift chooser).