This guide explains how to build a free shipping progress bar for a Shopify store using a Liquid snippet, CSS, and JavaScript. The feature aims to motivate customers by visually displaying their progress toward a free shipping threshold. It ensures the bar is correctly rendered on the initial page load by Liquid and updates live as cart items are added, changed, or removed. The implementation also prioritizes accessibility for screen readers and caters to users with reduced motion preferences.The first step involves creating a Liquid snippet, 'free-shipping-bar.liquid', which calculates the remaining amount and percentage based on the cart total and a defined threshold. This snippet then renders the initial state of the bar and its message on the server, preventing any visual delay. Following this, custom CSS is added to style the progress bar, including a smooth transition for the fill animation. A JavaScript file, 'free-shipping-bar.js', is then created to handle live updates.This JavaScript code fetches the current cart total from '/cart.js' and refreshes the bar and message accordingly. It achieves this by wrapping the browser's native 'fetch' function, allowing the bar to update automatically after any cart-changing requests. The guide highlights the importance of accessibility, explaining how 'role="progressbar"' and 'aria-valuenow' attributes expose progress to screen readers, while 'aria-live="polite"' announces changes gracefully.It also touches upon performance, noting that the fill animation is disabled for users who prefer reduced motion. The guide outlines several limitations and considerations, such as compatibility with older themes that might use XHR instead of 'fetch', handling multiple currencies, and assumptions about currency decimal places. It stresses that the free shipping rule must be configured separately in Shopify's shipping settings to match the bar's displayed goal.Finally, it recommends choosing a relevant free shipping threshold that feels achievable for customers. The guide concludes by suggesting thorough testing on a development store to ensure the bar functions correctly across various scenarios, including adding, removing, and passing the threshold. It offers Brix as an alternative for those who prefer not to maintain custom code, providing a multi-tier rewards progress bar among other features.