Adding a Progress Bar to Your Shopify Store Without Apps

Welcome to this guide on how to enhance your Shopify store with a progress bar feature, completely free and without relying on paid apps. This feature can boost your sales and increase order values by motivating customers to reach a spending threshold to unlock rewards like free gifts or discounts. In this article, we’ll walk you through the steps to implement a progress bar in your Shopify store using custom code.

Why Use a Progress Bar?

A progress bar visually displays how close a customer is to reaching a specific cart value, encouraging them to add more items to qualify for a reward, such as a free gift, discount, or free shipping. This feature can:

• Increase average order value.
• Drive sales by incentivizing customers to spend more.
• Enhance the shopping experience with clear, engaging visuals.

Let’s dive into the step-by-step process to add this feature to your Shopify store without using any third-party apps.

Step-by-Step Guide to Adding a Progress Bar

Step 1: Duplicate Your Theme

1. Log in to your Shopify store’s admin panel.
2. Navigate to Online Store > Themes.
3. Find your active theme and click Actions > Duplicate to create a backup. For example, name the duplicated theme “Dawn Progress Bar.”
4. Click the three dots next to the duplicated theme and select Edit Code to open the code editor.

Step 2: Create a Snippet for the Progress Bar

1. In the code editor, locate the Snippets section.
2. Click Add a new snippet and name it, e.g., “GRT Progress Bar.”
3. Copy the given code and paste it into the snippet file.

   
   
   {%- if settings.cart_free_approval -%}
     {%- liquid
       assign cart_free_approval_amount = settings.cart_free_approval_uk
       if localization.country.iso_code == "US"
         assign cart_free_approval_amount = settings.cart_free_approval_us
       elsif localization.country.iso_code == "IN"
         assign cart_free_approval_amount = settings.cart_free_approval_in
       endif
   
       assign cart_total = cart.total_price
       assign free_approval_amount = cart_free_approval_amount | times: 100
       assign bySizeTotal = 0
   
       for item in cart.items
         assign taglist = item.product.tags | join: " " | downcase
         if taglist contains 'stickers'
           continue
         elsif item.product.id != settings.gift_wrap_product.id
           assign bySizeTotal = bySizeTotal | plus: item.final_line_price
         endif
       endfor
   
       capture eligibilityFreeApproval
         assign a__ = free_approval_amount
         if a__ > bySizeTotal
           assign awayFrom_bysize = a__ | minus: bySizeTotal
           assign awayFrom_bysize = awayFrom_bysize | divided_by: 100.00 | round: 2
           assign awayFrom_bysize_0 = awayFrom_bysize | split: '.' | first
           assign awayFrom_bysize_1 = awayFrom_bysize | split: '.' | last
           if awayFrom_bysize_1.size == 1
             assign awayFrom_bysize_1 = awayFrom_bysize_1 | append: '0'
           endif
           assign awayFrom_bysize = awayFrom_bysize_0 | append: '.' | append: awayFrom_bysize_1 | prepend: localization.country.currency.symbol
           echo settings.cart_free_approval_text | replace: '[AMOUNT]', awayFrom_bysize
         else
           echo "🎉 <strong>Congrats! You are eligible for free gift!</strong> Unlocked"
         endif
       endcapture
   
       assign cart_free_approval_amount_cents = cart_free_approval_amount | times: 100
       assign progress_raw = bySizeTotal | times: 100 | divided_by: cart_free_approval_amount_cents
       assign progress_width = progress_raw | at_most: 100
   
       assign progress_color = '#FF4D4D'
       if progress_width >= 90
         assign progress_color = '#02CC7E'
       elsif progress_width >= 50
         assign progress_color = '#FFA500'
       endif
     -%}
   
     <div class="cart-notice">
       <free-shipping-blanks class="sidebar-widget__contentItem cart_free_approval"
           free-shipping-amount="{{ cart_free_approval_amount | times: 100 }}"
           data-cart-total="{{ bySizeTotal }}">
           
           <div class="freeShipping__title">
             <div><span class="freeShipping__content">{{ eligibilityFreeApproval }}</span></div>
           </div>
           
           <span class="cart-notice__slider">
             <span class="cart-notice__slider-bar"
                   style="background-color: {{ progress_color }}; width: {{ progress_width }}%;">
             </span>
           </span>
       </free-shipping-blanks>
     </div>
   {%- endif -%}
   
   
   
   <!-- Progress Bar CSS -->
   <style>
     .cart-notice__slider-bar {  transition: width 0.5s ease-in-out;  height: 8px;  border-radius: 4px;  display: block; }
     .cart-notice__slider {  background: #eee;  border-radius: 4px;  height: 8px;  overflow: hidden; margin-top: 8px;}
   </style>
   

4. Save the snippet.

Step 3: Update the Theme Settings Schema

1. In the code editor, find the Config section and open the settings_schema.json file.
2. Scroll to the bottom of the file, locate the last comma in the collection, and add the progress bar given schema code.

   {
   	"type": "header",
   	"content": "Free Product"
     },
     {
   	"type": "checkbox",
   	"id": "cart_free_approval",
   	"label": "Free Product",
   	"default": false
     },
     {
   	"type": "textarea",
   	"id": "cart_free_approval_title",
   	"label": "Free Product Msg",
   	"default": "Free Product Msg [TOOLTIP]"
     },
     {
   	"type": "textarea",
   	"id": "cart_free_approval_tooltipContent",
   	"label": "Enter Tooltip msg",
   	"default": "Enter text"
     },
   
       {
       "type": "text",
       "id": "cart_free_approval_in",
       "label": " Amount ",
       "default": "40"
     },
     {
   	"type": "textarea",
   	"id": "cart_free_approval_text",
   	"label": "Free Approval text",
   	"default": "Add [AMOUNT] for Free Proof Approval"
     } ,

3. Paste the schema code after the comma and save the file.

Step 4: Render the Progress Bar in the Cart Drawer

1. Search for the “cart drawer” snippet in the code editor (e.g., cart-drawer.liquid).
2. Around line 77, locate the tag starting with “cart drawer item.”
3. By line 82, add a render command for your snippet. For example, if your snippet is named “GRT Progress Bar,” add:

   {% render 'GRT Progress Bar' %}
   

4. Save the file. This will display the progress bar in the cart drawer.

Step 5: Configure the Progress Bar in Theme Settings

1. Go back to the Shopify admin panel and open the Theme Customizer for the duplicated theme.
2. Click the Theme Settings icon (typically the second icon in the top corner).
3. Navigate to the Cart settings (usually the third option from the bottom).
4. You’ll see new settings added via the settings_schema.json file, such as “Free Product” settings.
5. Enable the progress bar by checking the relevant option.
6. Configure the settings:
   • Free Product Message: Leave as default or customize.
   • Tooltip Message: Leave as default or customize.
   • Amount Threshold: Set the cart value required for a reward, e.g., ₹4000 for a free gift.
7. Save the settings.

Step 6: Test the Progress Bar

1. Preview your store to ensure the progress bar appears in the cart.
2. Add a product to the cart (e.g., worth ₹1499) and check if the progress bar updates to show the remaining amount needed (e.g., ₹2501 to reach ₹4000).
3. Increase the product quantity or add more items to exceed the threshold (e.g., ₹4000).
4. Verify that a message appears, such as “Congrats, you are eligible for a free gift!”

Step 7: Add a Reward (Optional)

To further incentivize purchases, you can set up a discount or free shipping for customers who meet the threshold:

1. Go to Discounts in the Shopify admin panel.
2. Create a new discount, e.g., a 40% discount for a minimum cart value of ₹5000.
3. Test the checkout process to ensure the discount applies when the cart value exceeds ₹5000.

Benefits of This Approach

• Cost-Free: No need to pay for third-party apps with monthly subscriptions.
• Customizable: Adjust the threshold, messages, and rewards to suit your store’s needs.
• Seamless Integration: The progress bar blends naturally into your store’s cart drawer.

Example in Action

For instance, if a customer adds a product worth ₹1499, the progress bar will show they need ₹2501 more to reach the ₹4000 threshold. Once they add more items and exceed ₹4000, they’ll see a congratulatory message and qualify for a free gift. Similarly, if you set a 40% discount for a ₹5000 cart value, customers will see the discount applied at checkout, reducing their total (e.g., from ₹6745 to ₹4000).