{"id":6528,"date":"2026-10-11T20:33:39","date_gmt":"2026-10-11T09:33:39","guid":{"rendered":"https:\/\/mokudigital.com\/space\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\/"},"modified":"2026-10-11T20:33:39","modified_gmt":"2026-10-11T09:33:39","slug":"how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout","status":"publish","type":"post","link":"https:\/\/mokudigital.com\/space\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\/","title":{"rendered":"How to Build a Free Shipping Progress Bar That Makes Shoppers Add One More Item Before Checkout"},"content":{"rendered":"<p>Most cart abandonments happen in the gap between &#8220;I think I have enough&#8221; and &#8220;wait, shipping costs how much?&#8221; The shopper adds one item, sees the shipping fee at checkout, and leaves. A free shipping progress bar fixes this by showing them exactly how close they are to unlocking free shipping while they are still shopping, not at checkout.<\/p>\n<h2>Why This Works<\/h2>\n<p>When shoppers can see they are $8 away from free shipping, they do not abandon. They browse for one more item. The progress bar creates a micro-goal that feels achievable. It turns shipping from a penalty into a reward.<\/p>\n<p>The best part? You do not need a plugin for this. You can build it with a small amount of liquid code in your theme and a snippet of JavaScript. Here is how.<\/p>\n<h2>Step 1: Set Your Free Shipping Threshold<\/h2>\n<p>Before you build anything, decide your threshold. Look at your average order value over the last 90 days. Set your free shipping threshold about 15 to 20 percent above that number. If your average order is $65, set free shipping at $80. This gives shoppers a realistic target that lifts your average order value without feeling unreachable.<\/p>\n<p>Write this number down. You will use it in the code in step 3.<\/p>\n<h2>Step 2: Find Your Cart Template<\/h2>\n<p>Go to your Shopify admin. Click Online Store, then Themes. Click the three dots next to your active theme and select Edit code. In the Sections folder, find your cart template. This is usually called <code>cart-template.liquid<\/code> or <code>main-cart.liquid<\/code> depending on your theme.<\/p>\n<p>If you are using a drawer cart (the slide-out cart that appears when someone clicks add to cart), look for <code>cart-drawer.liquid<\/code> or similar in your Snippets folder.<\/p>\n<h2>Step 3: Add the Progress Bar HTML<\/h2>\n<p>Inside your cart template, find the section where the cart subtotal or total is displayed. Right above that block, paste this code:<\/p>\n<blockquote><p>&lt;div class=&#8221;free-shipping-bar&#8221; data-threshold=&#8221;8000&#8243;&gt;<br \/>\n&nbsp;&nbsp;&lt;div class=&#8221;free-shipping-track&#8221;&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&#8221;free-shipping-fill&#8221; style=&#8221;width: 0%&#8221;&gt;&lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&lt;p class=&#8221;free-shipping-text&#8221;&gt;Add &lt;span class=&#8221;free-shipping-remaining&#8221;&gt;$80&lt;\/span&gt; more for free shipping&lt;\/p&gt;<br \/>\n&lt;\/div&gt;<\/p><\/blockquote>\n<p>Note: the <code>data-threshold<\/code> value is in cents. $80 becomes 8000. Adjust this to match your threshold.<\/p>\n<h2>Step 4: Add the CSS<\/h2>\n<p>In your theme CSS file (usually in the Assets folder as <code>base.css<\/code> or <code>theme.css<\/code>), add these styles:<\/p>\n<blockquote><p>.free-shipping-bar {<br \/>\n&nbsp;&nbsp;margin: 16px 0;<br \/>\n&nbsp;&nbsp;padding: 12px;<br \/>\n&nbsp;&nbsp;background: #f5f5f5;<br \/>\n&nbsp;&nbsp;border-radius: 8px;<br \/>\n&nbsp;&nbsp;text-align: center;<br \/>\n}<br \/>\n.free-shipping-track {<br \/>\n&nbsp;&nbsp;height: 8px;<br \/>\n&nbsp;&nbsp;background: #e0e0e0;<br \/>\n&nbsp;&nbsp;border-radius: 4px;<br \/>\n&nbsp;&nbsp;overflow: hidden;<br \/>\n&nbsp;&nbsp;margin-bottom: 8px;<br \/>\n}<br \/>\n.free-shipping-fill {<br \/>\n&nbsp;&nbsp;height: 100%;<br \/>\n&nbsp;&nbsp;background: #000;<br \/>\n&nbsp;&nbsp;border-radius: 4px;<br \/>\n&nbsp;&nbsp;transition: width 0.4s ease;<br \/>\n}<br \/>\n.free-shipping-text {<br \/>\n&nbsp;&nbsp;font-size: 14px;<br \/>\n&nbsp;&nbsp;margin: 0;<br \/>\n&nbsp;&nbsp;color: #333;<br \/>\n}<br \/>\n.free-shipping-bar.is-unlocked .free-shipping-text {<br \/>\n&nbsp;&nbsp;font-weight: 600;<br \/>\n&nbsp;&nbsp;color: #1a7a3a;<br \/>\n}<\/p><\/blockquote>\n<p>Adjust the colours to match your brand. The <code>.is-unlocked<\/code> class changes the text when the threshold is met.<\/p>\n<h2>Step 5: Add the JavaScript<\/h2>\n<p>This is the part that makes it dynamic. The script reads the current cart total, calculates how far the shopper is from the threshold, and updates the bar in real time. Add this script at the bottom of your cart template, inside a <code>&#123;% javascript %&#125;<\/code> tag or in your theme JavaScript file:<\/p>\n<blockquote><p>document.addEventListener(&#8220;DOMContentLoaded&#8221;, function() {<br \/>\n&nbsp;&nbsp;const bar = document.querySelector(&#8220;.free-shipping-bar&#8221;);<br \/>\n&nbsp;&nbsp;if (!bar) return;<\/p>\n<p>&nbsp;&nbsp;const threshold = parseInt(bar.dataset.threshold, 10);<\/p>\n<p>&nbsp;&nbsp;function updateBar() {<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;fetch(&#8220;\/cart.js&#8221;)<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.then(res =&gt; res.json())<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.then(cart =&gt; {<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const total = cart.total_price;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const remaining = Math.max(threshold &#8211; total, 0);<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const percent = Math.min((total \/ threshold) * 100, 100);<\/p>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bar.querySelector(&#8220;.free-shipping-fill&#8221;).style.width = percent + &#8220;%&#8221;;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bar.querySelector(&#8220;.free-shipping-remaining&#8221;).textContent = &#8220;$&#8221; + (remaining \/ 100).toFixed(0);<\/p>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (remaining === 0) {<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bar.classList.add(&#8220;is-unlocked&#8221;);<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bar.querySelector(&#8220;.free-shipping-text&#8221;).innerHTML = &#8220;You unlocked free shipping!&#8221;;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br \/>\n&nbsp;&nbsp;}<\/p>\n<p>&nbsp;&nbsp;updateBar();<br \/>\n&nbsp;&nbsp;document.addEventListener(&#8220;cart:updated&#8221;, updateBar);<br \/>\n&nbsp;&nbsp;document.addEventListener(&#8220;ajaxCart:updated&#8221;, updateBar);<br \/>\n});<\/p><\/blockquote>\n<p>The script fetches the cart total on load and listens for cart update events. This means the bar updates instantly when a shopper adds or removes an item, without a page reload.<\/p>\n<h2>Step 6: Test It<\/h2>\n<p>Add a product to your cart. Open the cart page or drawer. You should see the progress bar with the remaining amount. Add more products and watch the bar fill up. When you cross the threshold, the text should change to confirm free shipping is unlocked.<\/p>\n<p>Check on mobile too. The bar should be fully responsive. If it looks cramped, reduce the padding in the CSS for mobile breakpoints.<\/p>\n<h2>Step 7: Add a Product Recommendation Below the Bar<\/h2>\n<p>This is where the bar earns its keep. When a shopper sees they need $12 more for free shipping, show them products in that price range. You can add a simple product carousel below the bar using your theme&#8217;s existing product recommendation snippet.<\/p>\n<p>In your cart template, below the progress bar HTML, add a conditional block that shows products priced near the remaining amount. This gives the shopper exactly what they need to cross the threshold.<\/p>\n<h2>Common Mistakes to Avoid<\/h2>\n<p><strong>Setting the threshold too high.<\/strong> If your average order is $40 and you set free shipping at $100, no one will chase it. Keep it within 20 percent of your average order value.<\/p>\n<p><strong>Forgetting to update the bar on cart changes.<\/strong> If the bar only updates on page load, shoppers who add items via AJAX will not see it update. The JavaScript event listeners in step 5 handle this.<\/p>\n<p><strong>Hiding the bar on mobile.<\/strong> Mobile shoppers are the most likely to abandon over shipping costs. The bar should be even more visible on mobile, not less.<\/p>\n<p><strong>Not testing with real products.<\/strong> Add items at different price points and make sure the math works. A rounding error in the remaining amount will make the bar feel broken.<\/p>\n<h2>What to Track After Launch<\/h2>\n<p>Give it two weeks. Then check these numbers in your Shopify admin:<\/p>\n<ul>\n<li>Average order value (compare to the two weeks before the bar)<\/li>\n<li>Cart abandonment rate at checkout<\/li>\n<li>Percentage of orders that qualify for free shipping<\/li>\n<\/ul>\n<p>If your average order value goes up by even 5 percent, the bar has paid for the 30 minutes you spent building it.<\/p>\n<hr \/>\n<p><em>Want more like this? Join MOKU Club for free. Weekly resources, early access to new guides, and occasional templates you can actually use. Join below.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most cart abandonments happen in the gap between &#8220;I think I have enough&#8221; and &#8220;wait, shipping costs how much?&#8221; The shopper adds one item, sees the shipping fee at checkout,&#8230;<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[64,59],"tags":[],"class_list":["post-6528","post","type-post","status-publish","format-standard","category-design","category-how-to"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Build a Free Shipping Progress Bar That Makes Shoppers Add One More Item Before Checkout &#8212; MOKU Space<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mokudigital.com\/space\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build a Free Shipping Progress Bar That Makes Shoppers Add One More Item Before Checkout &#8212; MOKU Space\" \/>\n<meta property=\"og:description\" content=\"Most cart abandonments happen in the gap between &#8220;I think I have enough&#8221; and &#8220;wait, shipping costs how much?&#8221; The shopper adds one item, sees the shipping fee at checkout,...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mokudigital.com\/space\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\/\" \/>\n<meta property=\"og:site_name\" content=\"MOKU Space\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MOKUdigital\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-11T09:33:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mokudigital.com\/space\/wp-content\/uploads\/2024\/02\/mokuspace_og.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hera\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hera\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\\\/\"},\"author\":{\"name\":\"Hera\",\"@id\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/#\\\/schema\\\/person\\\/fcc0cf0192c88b70fc3156df50cbde7d\"},\"headline\":\"How to Build a Free Shipping Progress Bar That Makes Shoppers Add One More Item Before Checkout\",\"datePublished\":\"2026-10-11T09:33:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\\\/\"},\"wordCount\":1168,\"publisher\":{\"@id\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/#organization\"},\"articleSection\":[\"Design\",\"How-to\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\\\/\",\"url\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\\\/\",\"name\":\"How to Build a Free Shipping Progress Bar That Makes Shoppers Add One More Item Before Checkout &#8212; MOKU Space\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/#website\"},\"datePublished\":\"2026-10-11T09:33:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/mokudigital.com\\\/space\\\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Build a Free Shipping Progress Bar That Makes Shoppers Add One More Item Before Checkout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/#website\",\"url\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/\",\"name\":\"MOKU Space\",\"description\":\"A space to learn and find resources for growth in the digital landscape.\",\"publisher\":{\"@id\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/#organization\",\"name\":\"MOKU Digital\",\"alternateName\":\"MOKU\",\"url\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/MOKU_SPACE_ICON_2x.png\",\"contentUrl\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/MOKU_SPACE_ICON_2x.png\",\"width\":580,\"height\":579,\"caption\":\"MOKU Digital\"},\"image\":{\"@id\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/MOKUdigital\\\/\",\"https:\\\/\\\/www.instagram.com\\\/mokudigital\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/#\\\/schema\\\/person\\\/fcc0cf0192c88b70fc3156df50cbde7d\",\"name\":\"Hera\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/cropped-hera_pfp-bw_v2-96x96.jpg\",\"url\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/cropped-hera_pfp-bw_v2-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/cropped-hera_pfp-bw_v2-96x96.jpg\",\"caption\":\"Hera\"},\"url\":\"https:\\\/\\\/mokudigital.com\\\/space\\\/author\\\/hera\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Build a Free Shipping Progress Bar That Makes Shoppers Add One More Item Before Checkout &#8212; MOKU Space","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mokudigital.com\/space\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\/","og_locale":"en_US","og_type":"article","og_title":"How to Build a Free Shipping Progress Bar That Makes Shoppers Add One More Item Before Checkout &#8212; MOKU Space","og_description":"Most cart abandonments happen in the gap between &#8220;I think I have enough&#8221; and &#8220;wait, shipping costs how much?&#8221; The shopper adds one item, sees the shipping fee at checkout,...","og_url":"https:\/\/mokudigital.com\/space\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\/","og_site_name":"MOKU Space","article_publisher":"https:\/\/www.facebook.com\/MOKUdigital\/","article_published_time":"2026-10-11T09:33:39+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/mokudigital.com\/space\/wp-content\/uploads\/2024\/02\/mokuspace_og.jpg","type":"image\/jpeg"}],"author":"Hera","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hera","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mokudigital.com\/space\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\/#article","isPartOf":{"@id":"https:\/\/mokudigital.com\/space\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\/"},"author":{"name":"Hera","@id":"https:\/\/mokudigital.com\/space\/#\/schema\/person\/fcc0cf0192c88b70fc3156df50cbde7d"},"headline":"How to Build a Free Shipping Progress Bar That Makes Shoppers Add One More Item Before Checkout","datePublished":"2026-10-11T09:33:39+00:00","mainEntityOfPage":{"@id":"https:\/\/mokudigital.com\/space\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\/"},"wordCount":1168,"publisher":{"@id":"https:\/\/mokudigital.com\/space\/#organization"},"articleSection":["Design","How-to"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/mokudigital.com\/space\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\/","url":"https:\/\/mokudigital.com\/space\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\/","name":"How to Build a Free Shipping Progress Bar That Makes Shoppers Add One More Item Before Checkout &#8212; MOKU Space","isPartOf":{"@id":"https:\/\/mokudigital.com\/space\/#website"},"datePublished":"2026-10-11T09:33:39+00:00","breadcrumb":{"@id":"https:\/\/mokudigital.com\/space\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mokudigital.com\/space\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mokudigital.com\/space\/how-to-build-a-free-shipping-progress-bar-that-makes-shoppers-add-one-more-item-before-checkout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mokudigital.com\/space\/"},{"@type":"ListItem","position":2,"name":"How to Build a Free Shipping Progress Bar That Makes Shoppers Add One More Item Before Checkout"}]},{"@type":"WebSite","@id":"https:\/\/mokudigital.com\/space\/#website","url":"https:\/\/mokudigital.com\/space\/","name":"MOKU Space","description":"A space to learn and find resources for growth in the digital landscape.","publisher":{"@id":"https:\/\/mokudigital.com\/space\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mokudigital.com\/space\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/mokudigital.com\/space\/#organization","name":"MOKU Digital","alternateName":"MOKU","url":"https:\/\/mokudigital.com\/space\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mokudigital.com\/space\/#\/schema\/logo\/image\/","url":"https:\/\/mokudigital.com\/space\/wp-content\/uploads\/2024\/01\/MOKU_SPACE_ICON_2x.png","contentUrl":"https:\/\/mokudigital.com\/space\/wp-content\/uploads\/2024\/01\/MOKU_SPACE_ICON_2x.png","width":580,"height":579,"caption":"MOKU Digital"},"image":{"@id":"https:\/\/mokudigital.com\/space\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/MOKUdigital\/","https:\/\/www.instagram.com\/mokudigital"]},{"@type":"Person","@id":"https:\/\/mokudigital.com\/space\/#\/schema\/person\/fcc0cf0192c88b70fc3156df50cbde7d","name":"Hera","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mokudigital.com\/space\/wp-content\/uploads\/2026\/04\/cropped-hera_pfp-bw_v2-96x96.jpg","url":"https:\/\/mokudigital.com\/space\/wp-content\/uploads\/2026\/04\/cropped-hera_pfp-bw_v2-96x96.jpg","contentUrl":"https:\/\/mokudigital.com\/space\/wp-content\/uploads\/2026\/04\/cropped-hera_pfp-bw_v2-96x96.jpg","caption":"Hera"},"url":"https:\/\/mokudigital.com\/space\/author\/hera\/"}]}},"_links":{"self":[{"href":"https:\/\/mokudigital.com\/space\/wp-json\/wp\/v2\/posts\/6528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mokudigital.com\/space\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mokudigital.com\/space\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mokudigital.com\/space\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/mokudigital.com\/space\/wp-json\/wp\/v2\/comments?post=6528"}],"version-history":[{"count":0,"href":"https:\/\/mokudigital.com\/space\/wp-json\/wp\/v2\/posts\/6528\/revisions"}],"wp:attachment":[{"href":"https:\/\/mokudigital.com\/space\/wp-json\/wp\/v2\/media?parent=6528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mokudigital.com\/space\/wp-json\/wp\/v2\/categories?post=6528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mokudigital.com\/space\/wp-json\/wp\/v2\/tags?post=6528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}