Add the banner snippet
Create a new snippet in your Shopify theme: snippets/ps-free-shipping-banner.liquid Copy the complete ps-free-shipping-banner.liquid code into this file.
Widget
Free Shipping Progress Bar for Shopify Cart Drawer
Add the theme settings
Open: config/settings_schema.json Add the provided settings object to the root JSON array. Place it alongside groups such as Cart or Logo, not inside the Cart group. Make sure the JSON remains valid. Add a comma after the previous group if necessary, but don't add a trailing comma after the final group.
Render the banner in the cart drawer
Open your cart drawer snippet. In most Shopify themes, this will be: snippets/cart-drawer.liquid Find the .drawer__inner element and render the banner as its first child. Put the below liquid code in here. This places the progress banner at the top of the cart drawer.
{% render 'ps-free-shipping-banner' %}Configure the banner
Go to: Online Store → Themes → Customize → Theme settings → Free shipping banner Configure the free shipping threshold and message to match your Shopify shipping settings. You can use these placeholders in the progress message: [threshold] — your free shipping threshold [remaining] — the amount remaining until free shipping For example: Spend [remaining] more to get free shipping!