How can I customize my theme to have a progress bar like the 'Information - Shipping - Payment'?

Store Design
,

Topic summary

A user wants to customize their Shopify checkout page to display a custom progress bar (showing steps like “Information - Shipping - Payment”) instead of the default Shopify version.

Proposed Solution:

  • Access theme code via Shopify admin: Online Store → Themes → Actions → Edit code
  • Locate checkout template files in the Sections or Templates folder (typically named checkout.liquid)
  • Find the progress bar HTML element (usually a <div> or <ul> with a specific class/ID)
  • Modify the HTML structure and apply custom CSS to achieve desired appearance
  • Customization options include: changing colors, adding animations, or using custom icons

Important Note: The discussion includes reversed/encoded text that appears to reference a specific checkout URL example, though the exact details are obscured in the original formatting.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

How can i customize my theme, so i get a progress bar like this, instead of the generic shopify one?

Since i can’t upload a picture, im talking about the “Information - Shipping - Payment” on the top page. Please look at this checkout page: https://checkout.bareen.com/55857086644/checkouts/b9c8b1b266d4375e9436d334714a05d7

PS: Why can’t you upload a png file?

2

To customize the progress bar on your Shopify theme’s checkout page, you’ll need to modify the theme’s code. Here’s a general guide on how to achieve this:

  1. Access your theme’s code: From your Shopify admin, go to “Online Store” and click on “Themes.” Locate the theme you’re using and click on “Actions” > “Edit code” to access the theme’s code editor.

  2. Find the checkout template: In the code editor, navigate to the “Sections” or “Templates” folder and look for the checkout-related template files. The specific file name may vary depending on your theme, but it could be something like checkout.liquid or checkout.liquid.

  3. Locate the progress bar section: Look for the code that generates the progress bar on the checkout page. This is typically found within a <div> or <ul> element with a class or ID related to the progress bar.

  4. Customize the progress bar: Modify the HTML and CSS of the progress bar to achieve the desired design. You can create custom classes or IDs and apply CSS styles to control the appearance, such as changing the colors, adding animations, or using custom icons. You may need to add or modify existing CSS rules to achieve the desired effect.