Free Shipping Bar

Author: An Do 454 views

Free Shipping Bar displays progressive messages when customers put more items in their shopping carts, letting them know how much more to buy to get free shipping. This increases the average order value and boosts sales. 

In order to set the Free Shipping value, from Shopify Dashboard, click Settings => Shipping and Delivery => Manage => Shipping zones => Add rate => Add conditions => Based on order price, then set the Minimum price to get the free shipping

To add this element to your page, please go to Elements -> Cart -> Free Shipping Bar.

1. Content

1.1 General

The most general settings for the element will be in this tab

  • Progress message: Show the shipping price with {price} format and custom text ( {price} will be auto-calculated and shown in the live page the value you’ve set in Shopify. While it gets the Minimum Price value to show in the editor)
  • Minimum Price: Set the minimum shipping price on the bar, and this value will show on the Progress message in the editor and the live cart page, but not on the checkout page. This means it is used for preview only. The real price will inherit from the Min price in Shopify settings.
    Note: We should use the same price as the Min price in Shopify settings.
  • Goal achieved message: You can add the text in this field to let the customer know if they have a free shipping
  • Disable when cart empty: This option will disable the bar if it’s ticked
  • Show progress bar: Decide to show on or show off the bar
    + Progress: Set the color for the progress bar
    + Track: Set the color for the track bar
    + Icon: Set the icon at the end of the progress bar to make it more attractive
    + Thickness: set the thickness for the bar
    + Width: set the width for the bar

2. Design

  • General

This tab will have Alignment, Background, Box Shadow, Border, Border Radius, and Spacing and will affect the whole element.

  • Text

This tab will have Typography, Text Color, Text Gradient, Text Shadow, and Spacing. It’s set for the Progress message.

  • Progress icon

This tab will have Color, Size, Rotate, Position, Vertical, and Horizontal. It’s set for the Progress bar icon.

Leave a Comment

Enjoy a free 3-day trial. Then get your first month for $1. Try Now.