Overview
Once a Smart Progress Bar is created (either using Built-in Campaigns or from scratch), it must be added to your storefront using the LimeSpot Designer.
The Designer allows you to:
Select the exact page where the Progress Bar should appear
Live-preview it on your site
Customize the look and feel
Publish it when ready
Smart Progress Bars can be added to any page on your store, including:
Home page
Product pages
Collection pages
Cart page
Sliding / drawer cart
Custom landing pages
Step 1: Open the Designer
To access the Designer:
Go to LimeSpot App
Navigate to:
Personalization → Product Recommendations → DesignerThe Designer will open with a live preview of your storefront.
Step 2: Select the Target Page
At the top-left of the Designer, use the Page Selector dropdown to choose the page where you want to display the Smart Progress Bar.
Examples:
Home
Product page
Collection page
Cart
Custom pages
Step 3: Enable the Smart Progress Bar in the Designer
In the left sidebar, click the “Smart Progress Bar” button.
The Smart Progress Bar will immediately appear in the live preview.
You can now visually confirm its position on the selected page.
Step 4: Edit Look & Feel (Optional)
Inside the Designer, you can customize the appearance using:
Typography
Offer message font, size, and weight
Tier label font and alignment
Colors
Progress line
Tier indicators
Gradients
Borders
These styling tools work the same way as for other LimeSpot components and allow full brand matching without code.
Step 5: General Settings
Open the General section to control how the Progress Bar behaves and when it appears:
Icon Size
Use the slider to adjust the size of tier icons (Small → Medium → Large) so they match the visual density of your page.Hide Tier Label
Enable this if you prefer a cleaner, minimal bar without text labels under each tier.Hide When Cart Is Empty
Turn this on to show the Progress Bar only when there’s at least one item in the cart—ideal for Cart and Slide Cart placements where you don’t want an empty bar visible.
Step 6: Placement Controls
Under the Placement section, you can:
Choose how the Progress Bar is inserted (before/after key page elements)
Select the reference element it attaches to
Control layout behavior (inline, fixed, sticky when supported)
This ensures the Progress Bar appears in the optimal high-converting location on each page.
Step 7: Live Preview & Publish
Use the live preview to test:
Desktop
Tablet
Mobile
Once everything looks right, click Save.
Click Publish to push the Smart Progress Bar live on your store.
Important Notes
Creating a Smart Progress Bar does not automatically display it on your store. It must be added through the Designer.
You can add the same Progress Bar to multiple pages, or assign different Progress Bars to different pages.
You can safely preview and edit without affecting your live store until you click Publish.
Best Practices
Place Progress Bars above Cart totals or near Checkout CTAs for the highest impact.
Match colors to your theme for a seamless experience.
Always test on mobile before publishing.
Need Help With Designer Setup?
Our team can:
Add your Smart Progress Bar to any page
Optimize placement for conversion
Apply full design customization
Run a free setup & audit
Contact Support through chat or email to request a free 1:1 session with our Product Team.