Showing a free shipping bar on checkout

This guide explains how to set up a free shipping bar on checkout using the Shopify platform. This feature prompts customers to add more items to their cart to qualify for free shipping.





The free shipping bar is based on the settings configured in the delivery section of Shopify. This guide does not cover setting up a free shipping discount through the upsell block, although this is also possible.



Customers can add more products to their cart to qualify for free shipping.



The free shipping settings are configured in the shipping and delivery section of Shopify.



To set up a free shipping bar, follow these steps:

Step 1: Open the checkout wizard app.

Step 2: Click on create extensions.



Step 3: When prompted to select where the extension appears, click on during checkout.



Step 4: Click continue.



Step 5: Navigate to the customized content section of the app and select the free shipping bar.





Step 6: Click create Lama.



Step 7: Give the block a name and set rules for when the block should appear. These rules can be based on the products in the cart, cart total, customer tags, and more.



Step 8: Set up the minimum cart value for which free shipping will be applied. This is based on the settings configured in the delivery and shipping sections of Shopify.



Step 9: Customize the text alignment, text size, and language of the text. Preview the changes.



Step 10: Customize the colors of the progress state and the success state by changing the hex code.



Step 11: Set a background color for the entire block using the background fill section.



Step 12: In the advanced configurations, specify the border style, spacing, banner, border radiuses, and more.



Step 13: Set a checkout block location in the publish block section. This can be any number between one to twenty.



Step 14: Click save.

After saving the block, follow these steps to add it to the checkout section:

Step 1: Navigate to the settings section of Shopify.



Step 2: In the checkout section, click customize on the profile to be customized.



Step 3: Add an ad block and select the content block.





Step 4: Enter the same number given in the app for the checkout block location.



Step 5: Drag and drop the block to the desired location for the free shipping bar.





Preview the changes directly on the team editor. If the changes are not visible, clear the cookies and refresh the page, or preview it directly in Shopify.



For further assistance with the implementation or customization of this feature, contact us through the in-app chat or email suria@skylama.com.

Updated on: 12/09/2024