Header Sticky Bar

Learn how to customize the look and feel & sticky bar settings.
Written by Jonathan Diaz
Updated 10 months ago

The header sticky bar sits underneath the navigation section of Shoptimized. You can use this for various marketing messages or remove it.

Look and Feel

1 The first step is to open the theme settings area of your Shopify theme config and go into the Header-Sticky Bar section.

Step 1 image

2 Enable the sticky bar here.

Step 2 image

3 If you want to show the sticky bar on mobile also, enable it here.

Step 3 image

4 You can decide if you would like to show the sticky bar site wide, or on specific product pages via a tag.

Step 4 image

5 You can use the product tag sticky-header-bar to display the sticky bar on specific products.

Step 5 image

6 Insert your sticky bar text here. Use the code 'SYMBOL$x' to insert the dynamic shipping threshold number into your message 

Step 6 image

7 Sticky bar message shown here.

Step 7 image

8 change the sticky bar background color here.

Step 8 image

9 Font Color – Changes the font color of the sticky bar.

Step 9 image

10 Font Size – Changes the font size for text within the sticky bar.

Step 10 image

11 Font Style – Change the appearance of sticky bar text. Light, normal, bold, and bolder.

Step 11 image

12 Display a custom message when a customer has met the free shipping threshold amount here.

Step 12 image

13 Let your customers and visitors know they’ve achieved free shipping threshold with a customized message.

Step 13 image

14 Optionally you can display a timer on the header sticky bar here.

Step 14 image

15 Countdown Cut-off – Use a value of 1-24 to display a timer that ticks down to 0. (Time is in hours)


Step 15 image

16 Countdown resets every (hours) – Evergreen countdown timer - when the timer reaches zero it will reset by the amount of time you specify.

Step 16 image

Here's an interactive tutorial for the visual learners

https://www.iorad.com/player/1603101/Demostore---Header-Sticky-Bar

Background – Changes the background color of the sticky bar.

Font Color – Changes the font color of the sticky bar.

Font – Changes the font for the sticky bar.

Font Size – Changes the font size for text within the sticky bar.

Font Style – Change the appearance of sticky bar text. Light, normal, bold, and bolder.

 

 

Sticky Bar Settings

Enable – Toggles sticky bar on or off.

Enable on Mobile – Toggles sticky bar on or off on mobile.

Type – Site Wide or Product tag. Choose how the sticky bar will display. You can use the product tag sticky-header-bar to display the sticky bar on specific products.

Enable Timer – Toggles timer on or off. Recommended using for scarcity.

Text – Sticky bar text (use the code $x to insert your free shipping threshold amount dynamically here)

Free Shipping Achieved Text – Let your customers and visitors know they’ve achieved free shipping threshold with a customized message.

Countdown Cut-off – Use a value of 1-24 to display a timer that ticks down to 0. (Time is in hours)

Countdown resets every (hours) – Evergreen countdown timer - when the timer reaches zero it will reset by the amount of time you specify.

Did this answer your question?