Docs · Display

How to set the success message shown when all cart goals are reached

The message line shows the next tier’s text, then a success message listing what the shopper unlocked once every tier is reached. You set it per design.

· Markdown versionEN · FR · ES · DE

How the message line works

The bar has one message line, above or below it. While a tier is still ahead, it shows that tier's own text, for example “Only $12 left for free shipping” (you write that text in the tier card, see add a tier). Once every tier on the bar is reached, the line switches to the success message.

The success message belongs to a design. Open Design, pick the design, then the Success message tab. Each design can have its own message.

Write the message

In the Default success message card, type your text in Default message, for example “🎉 Congratulations! You've unlocked {goals}.”

  • {goals} is replaced by the names of the tiers the shopper unlocked, for example “free shipping, a free tote bag and 10% off”.
  • Default link word is the word placed before the last name (“and” by default). Change it if your message is not in English.
  • When several discount tiers are reached, only the latest one of each kind (percentage or amount) is listed, since it replaces the lower ones.
  • The editor accepts bold, italics, colours and line breaks.

Two preview buttons help you check the result: Show first goal message shows the bar as it looks with an empty cart, and Show Congratulations message shows it with every tier reached.

Show or hide the message

There are two separate switches:

  • Show success message, at the top of the tab, shows or hides the whole message line: the tier texts and the final message.
  • Show success message inside the Default success message card hides only the final message. The tier texts keep showing while tiers are ahead.

Position and style

  • Position: Before the bar or After the bar.
  • Text align: Start, Center or End.
  • Font size, Line height, Header text color, Top margin and Bottom margin.
  • Always show decimals: when ticked, the amount left in the tier texts keeps its decimals even when it is round (“$5.00 left” rather than “$5 left”).

Hide the bar once every tier is reached

Under All goals reached, tick Hide the progress bar when all goals are reached to show only the success message at that point. The bar comes back if the cart drops below a tier. If the success message is empty, the bar stays visible so the shopper never sees an empty block.

Translate the message

The Success message translation card links to Shopify's Translate & Adapt app, where the message is translated for each store language. See translations for the other texts of the bar.

At checkout

The checkout block has its own switch, Show final success message, with its own alignment, on the Checkout page. See checkout.

Something missing? Write to [email protected], or try it first in the demo.

Read next

Ready to try it on your store?

Install Yaco Progress Bar, set your first tier, and the bar shows up in your cart in minutes. No developer, no pop-up.

Try for free14-day free trial · free plan forever