Creating a progress bar on checkout

• Navigate to the Checkout wizard app, select 'Create Extensions', and choose the checkout page.
• In the 'Custom Content' section, select the 'Free shipping progress bar' and click 'Create'. [screenshot of the progress bar]
• Set the minimum cart value required for the progress bar to show as complete. For example, enter 1000.
• (Optional) Set display rules for when the progress bar appears, such as when the cart total exceeds a specific amount or when certain products are in the cart. If no rules are added, the progress bar will be visible to all customers.
• Configure the block's content and style. Customize the colors of the progress, fill, and background states. You can also adjust the text and its alignment to reflect your specific offer (e.g., free shipping, discount, free gift). [screenshot of the progress bar dynamically increasing] [screenshot showing the progress made]
• Assign a location number to the block (e.g., 15) and click 'Save' to publish it.
• Click 'Place on Checkout' and select a checkout profile to edit.
• In the editor, add a content block to the checkout.
• In the settings for the new content block, enter the same location value you assigned in step 6 (e.g., 15).
• In the 'Sections' panel, drag and drop the block to your desired location on the page. [screenshot of modifying the content block]
• Click 'Save'. The extension will now appear in your checkout preview. [screenshot of the extension in the preview]
• To view the final result on your site, click the three dots and select 'View' or 'Preview'.

Updated on: 01/08/2025