Free shipping bar
1. Set Up Your Free Shipping Rate
First, we need to create or configure the free shipping rules from Shopify to match our campaign's target value.
If you don't have any free shipping rules yet, don't worry! Just click on 'Read guides' and we'll show you how to create one.
To go straight to the Shopify admin page to create a new free shipping rule, please click on 'Config'.
2. Customize Settings
Next, we'll adjust the display content and action of the Free Shipping Bar.
In the 'Bar content' section, you can customize the following:
Freeship goal: Enter the minimum order value for free shipping at your store.
Initial message: This is the message that will be displayed when the customer's shopping cart is empty. You can use the variable {{goal}} to display the minimum order value for free shipping.
Below-goal message: This message will be shown when the total value of the products in the cart hasn't reached the minimum value yet. You can use the variable {{below_goal}} to display the remaining order value needed for free shipping.
Achieve-goal message: This message will be displayed when the total value of the products in the cart is equal to or greater than the minimum value, indicating that the customer has qualified for free shipping.
In the 'Bar action' section, you can choose the action of the Free Shipping Bar.
If you enable 'Click on bar', you can customize the Free Shipping Bar as a link. When enabled, additional fields such as 'Clickable on bar', 'Clickable link', 'Open link new tab', 'Click Type', 'Button Text' will be displayed.
Clickable on bars: Check the position to display the button at Initial bar, Below-goal bar, or Achieve. Multiple values can be selected.
Clickable link: Enter the link you want to display when clicking on the Free Shipping Bar.
Open link in new tab: Check this option to redirect the page in a new tab.
Click Type: You can choose between two values, 'Make the bar clickable' and 'Insert a clickable button into the bar'.
Make the bar clickable: Clicking anywhere on the notification bar will redirect to the link entered in 'Clickable link'.
Insert a clickable button into the bar: Clicking the button on the Free Shipping Bar will redirect to the entered link.
Button Text: Enter the content to be displayed on the button.
Show close button: Enable this to display a close button on the notification bar.
Click the close button on the notification bar to hide the Free Shipping Bar for the duration entered in 'Close the bar for'
3. Choose Your Display
Now, let's select the theme and display location of the Free Shipping Bar.
Select theme: Choose a display template for the bar.
Position: Choose the display location of the Free Shipping Bar.
Top of the page (push down content): The bar is displayed at the top of the page and will not scroll down when the customer scrolls the page.
Stick at the top of the page (push down content and visible while scrolling): The bar will be fixed at the top of the page and will scroll down as the customer scrolls down the page.
Fixed Top (overlap the content and visible while scrolling): The bar is displayed and fixed at the top of the page and overlaps the header. The bar will scroll down as the customer scrolls the page.
Fixed Bottom (overlap the content and visible while scrolling): The bar is displayed and fixed at the bottom of the page. The bar will scroll up as the customer scrolls the page.
4. Decide Where to Show Your Bar
Next, let's choose the pages where the bar will be displayed.
All pages: Check this option to display the bar on all pages.
Specific page: Check and select the pages where the bar is allowed to be displayed.
Advanced setting: Let's dive into some advanced customization.
Style: Customize the font size, display color on the bar.
'Font family': Choose a font to display for the Free Shipping Bar.
'Font size': Choose the size of the font.
'Font weight': Choose the boldness of the font.
'Padding': Adjust the distance between the bar and the border.
'Opacity': Adjust the transparency.
'Text color': Choose the display color for the text.
'Goal text color': Choose the display color for the goal text.
'Bold/Italic text color': Choose the display color of the bold/italic text on the bar.
'Background color': Choose the display color of the bar's background.
'Background image': Choose a background image for the bar, if left blank no background image will be displayed or you can upload the background image you want.
'Button text color': Choose the display color for the button text.
'Button background color': Choose the display color for the button background.
Display: Customize the bar display.
Show on devices: Choose the devices where the bar will be displayed.
Active date:
Start date: The date when the Free Shipping Bar starts to be displayed.
Start time: The time when the bar starts to be displayed.
End date: The date when the Free Shipping Bar stops being displayed.
End time: The time when the bar stops being displayed.
Show on country:
Show on all countries: Choose to display the Free Shipping Bar in the store in all countries.
Show on selected countries: Choose the countries where you want to display the Free Shipping Bar in the store.
Show on all countries except: Choose the countries where you do not want to display the Free Shipping Bar in the store.
Exclude page to show: Check and select the pages where you do not want to display the bar, you can choose 'Custom' to enter the URL of the page where you do not want to display.
Custom CSS: Enter CSS to customize the bar to your liking.
You can track your customizations on the preview screen on the right.
Last updated
