Free shipping bar

This guide describes setting up the Free shipping bar section.

Use the section to display an indicator that compares a customer's order amount with your store's free shipping threshold. You specify the threshold in Theme settings > Cart > Free shipping threshold. After the customer's order amount meets or exceeds the specified threshold, their order qualifies for free shipping.

For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.

Set up the Free shipping bar section

To set up the Free shipping bar section:

1. In Theme editor, at the top of the page, use the theme templates dropdown menu to select a page that contains a Free shipping bar section. For example, select the home page.

   Note

   The section can be added to the Header area of any page, except Checkout, Gift card, and Password pages. To add the section to the current page, in the Header area, select Add section > Free shipping bar. Refer to Shopify help: Add a section.

2. From the side menu, select Free shipping bar.

3. Select a setting described in the following table.

Setting name	Description
Home page only	Set the Home page only option to on or off. With this option enabled, the section displays only on the home page.
Hide on mobile	Use the Hide on mobile option to show or hide the section on mobile display devices.
Uppercase	Set the Uppercase option to on or off. With this option enabled, uppercase is applied to the section's text. To use this option, set the Theme settings > Typography > Body text > Uppercase option to off.
Link	In the Link field, enter a URL or select a link to a store page. The link opens when a customer selects the section.
Display	Use the Display options to show the section's text as Static or Scrolling text.
Scroll > Speed	Adjust the Speed slider between 20 and 400 to specify how quickly scrolling content moves inside the section. If a user has reduced motion enabled, the scrolling text does not animate and instead displays as a static banner.
Scroll > Direction	Use the Direction options to set the section's text to scroll from Right to left or Left to right.
Scroll > Repeat text	Set the Repeat text option to on or off. With this option enabled, the section's text repeats automatically, creating an endless scrolling effect.
Repeat text separator > Spacing	Use the Spacing options to select S (small), M (medium), L (large), or XL (extra large). This option specifies the amount of spacing between each occurrence of repeated text.
Repeat text separator > Type	Use the Type options to select Gap, Character, or Button. This option specifies how the spacing between each occurrence of repeated text is displayed. The Gap option displays empty space between each occurrence. The Character option displays a specific text character between each occurrence. The Button option displays a button between each occurrence.
Repeat text separator > Character	Use the Character options to select ·, •, ↑, →, ↓, and more. This option specifies the text character displayed between each occurrence of repeated text inside the section. To use this option, set the Type option to Character.
Repeat text separator > Repeat character	Adjust the Repeat character slider between 1x and 6x. This option specifies the number of text characters that are displayed between each occurrence of repeated text inside the section. To use this option, set the Type option to Character.
Repeat text separator > Spacing between repeated characters	Use the Spacing between repeated characters options to select None, Hair, Thin, Punctuation, 4-per-em, and more. This option changes the spacing between text characters that separate each occurrence of repeated text inside the section. To use this option, set the Type option to Character.
Repeat text separator > Button label	In the Button label field, enter text to use as a label for the button that separates each occurrence of repeated text inside the section. The button uses the URL or store page you provide in the Link field. To use this option, set the Type option to Button.
Repeat text separator > Button style	Use the Button style options to apply a Primary or Secondary button style to the button that separates each occurrence of repeated text inside the section. To use this option, set the Type option to Button.
Color > Color scheme	Use the Color scheme picker to select a color scheme for the section. Refer to Colors.
Theme settings	If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSS	Select Custom CSS. In the CSS field, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.
Remove section	Select Remove section to delete the section from the current page.

Note

To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in Theme editor.

To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the theme editor.

Configure a block in the Free shipping bar section

To configure a block in the Free shipping bar section:

1. In Theme editor, at the top of the page, use the theme templates dropdown menu to select a page that contains a Free shipping bar section. For example, select the home page.

2. From the side menu, expand the Free shipping bar section menu.

3. To configure an existing block, select the block from the side menu.

   To add a new block, select Add block, choose a block to add, and then select the block you added.

   Note

   Inside the section, you can add, remove, show, hide, and move blocks. Refer to Configure blocks inside a section and Shopify help: Sections and blocks.

4. Apply a block setting described in the following table.

Block name	Description	Setting
Text	Displays text inside the section.	In the Text field, enter a single line of text to display inside the section. Select Remove block to delete the block from the section.
Free shipping	Displays a free shipping bar inside the section.	Configure the threshold in Theme settings > Cart > Free shipping threshold. If the market is configured to have free shipping progress disabled, this block does not display. Refer to Show a free shipping progress bar. Select Remove block to delete the block from the current section.
Countdown timer	Displays a countdown timer inside the section. Note that the block's time is set in the store's time zone.	In the Text before timer field, enter a single line of text to display as prefix text before the block's timer text. In the Text after timer field, enter a single line of text to display as suffix text after the block's timer text. In the Text after completion field, enter a single line of text. The text you enter is displayed inside the block after the countdown timer's target date is reached. If left blank, the timer displays "crossed out" zeros. Use the Spacing between timer and before and after text option to apply S (small), M (medium), or L (large) spacing between the countdown timer and the text before and after it inside the block. Alternatively, select None to apply no spacing. Use the Separator type option to select Gap or Character. This option specifies the type of separator displayed between the block's text and countdown timer. To use this option, set the Spacing between timer and before and after text option to S, M, or L. Use the Character option to select ·, •, ↑, →, ↓, and more. This option specifies the type of text character (symbol) to display as a separator between the block's text and countdown timer. To use this option, set the Separator type option to Character. Adjust the Repeat character slider between 1x and 6x. This option specifies the number of text characters (symbols) to display as separators between the block's text and countdown timer. To use this option, set the Separator type option to Character. Use the Spacing between repeated characters option to select None, Hair, Thin, Punctuation, 4-per-em, and more. This option specifies the amount of spacing displayed between each separator inside the block. Separators are displayed between the block's text and countdown timer. To use this option, set the Separator type option to Character. Set the Use current year option to on or off. With this option enabled, the block's countdown timer uses the current year. Alternatively, to set the block's countdown timer to use a specific year, set this option to off and then enter a year in the Year option field. In the Year field, enter a four-digit number that represents the year you want the block's countdown timer to display. For example, enter the year 2029. To use this option, disable the Use current year option. Use the Month option to select the month you want the block's countdown timer to display. For example, select 1 – January, 2 – February, 3 – March, 4 – April, 5 – May, etc. Use the Day option to select the date (day of the month) you want the block's countdown timer to display. Use the Hour (24-hour time) option to select the hour (in 24-hour format) you want the block's countdown timer to display. For example, select 00 (12 a.m. / midnight), 01 (1 a.m.), 02 (2 a.m.), etc. Use the Minute option to select the minute you want the block's countdown timer to display. For example, select 00, 01, 02, etc. Use the Style option to apply a Sentence or Timer style to the block's countdown timer. Set the Flash separators option to on or off. With this option enabled, a flashing animation is applied to the text characters that separate parts of the block's countdown timer. To use this option, set the Style option to Timer. Use the Labels option to select Full or Abbreviated. This option applies a full or short display style to the text labels that describe parts of the block's countdown timer. For example, the Full option applies the labels months, days, hours, minutes, and seconds to the countdown timer. The Abbreviated option shortens these labels to mos, days, hrs, mins, and secs. To use this option, set the Style option to Timer. Set the Hide labels if only time parts are visible option to on or off. When enabled, the block displays remaining hours, minutes, and seconds using a HH:MM:SS format countdown timer, and hides text labels for expired days, months, and years. To use this option, set the Style option to Timer. Select Remove block to delete the block from the section.