Announcement Bar / Header Settings | SHOP Builder

4. EC + SC (EN).png

SHOP Builder's "Announcement Bar" and "Header" features will allow your website to stand out visually and, at the same time, display more relevant information about the store.

This article will cover:   

⚠️ Before you begin:

  • SHOP Builder currently only supports Ultra Chic, Kingsman, Varm, and Philia theme templates.
  • After creating a page using SHOP Builder, the page can still be displayed even if you switch to other theme templates, but it cannot be edited and the layout may be messed up. Please take note of this before publishing the page.


1. Announcement bar settings 

Step 1

Proceed to SHOPLINE Admin > [Online Store Design] > [Pages] and click the [Advanced Page/Edit] button to open the Advanced Page setup.Screen_Shot_2022-06-30_at_11.06.19_AM.png


Step 2

Click the Announcement Bar button. EN_2-0_Annoucement_Bar_countdown_fix.png


Step 3

You can choose to add a "Text" or "Countdown" widget.EN_3-0_Annoucement_Bar_countdown_fix.png

1. Add Countdown widget

Click Countdown to add a Countdown widget as an announcement bar. For more detailed information on the Countdown widget, please refer to this article.EN_3-1-1_Annoucement_Bar_countdown_fix.png


2. Add Text widget

Click the Text button.EN_3-2-1_Annoucement_Bar_countdown_fix.png

Edit the content of the Text widget. 

  • Title: Enter the announcement bar title. 
  • Link: You can also input the link and select how you want to open the link. 
    • Current window: Open the page directly from the current window
    • New window: Open the page in a new window. 


Click the "Language" drop-down menu, and a list of supported languages will be listed. You can set the display content of this announcement bar for each separate language interface.EN_3-2-3_Annoucement_Bar_countdown_fix.png


Step 4

Click the bin icon on the right side of the created announcement bar to delete it. Click the Text button again to add another announcement bar.EN_4-1_Annoucement_Bar_countdown_fix.png



Step 5

If you add multiple announcement bars, you can select its display method.
*Note: Currently supports adding a maximum of 3 announcement bars. EN_5-0_Annoucement_Bar_countdown_fix.png

A. SliderEN_5-A_Annoucement_Bar_countdown_fix.gif

B. List AllEN_5-B_Annoucement_Bar_countdown_fix.png


Step 6

You can set the duration of the slider. EN_6_Annoucement_Bar_countdown_fix.png


Step 7

During the setup process, you can click the Save button below to preview the newly added bulletin board on the right or click the Preview page at the top right to preview it at the storefront.EN_7_Annoucement_Bar_countdown_fix.png


Step 8

After completing the setup, click the Publish button at the top right so that customers can view all the new content on this tab at the storefront.EN_8_Annoucement_Bar_countdown_fix.png


2. Header settings

On the Advanced Page setup page, click the Header button. Screen_Shot_2022-06-16_at_11.12.38_AM.png


A. Logo 

Click Logo to set the size and position of the store logo on the desktop/ mobile interface. Screen_Shot_2022-06-16_at_11.17.55_AM.png


B. Menu

Click Menu to set the alignment of the store menu on the desktop interface. Screen_Shot_2022-06-16_at_11.19.33_AM.png

*Note: Please proceed to SHOPLINE Admin > [Online store Design] > [Design/Store Menu] for setting up the store Logo and Menu.


C. Padding

You can choose whether you want to pin the header at the top of the page and not have it covered by scrolling down the page and adjusting the header padding.Screen_Shot_2022-06-16_at_11.22.57_AM.png


D. Search bar

You can set the display of the search bar.Screen_Shot_2022-06-16_at_2.23.39_PM.png

  • None: No search bar
  • Icon
  •  Icon & text
  • Search Bar


E. Language selector, Hide specific language

a. Language selector

You can set the display of the language selector. Screen_Shot_2022-06-16_at_2.41.01_PM.png

  • None: No language selector button. 
  • Icon
  • Icon & text


b. Hide specific language 

In the "Hide specific language" drop-down menu, you will find all the supported languages, select the ones you wish to hide, and click Hide specific language, so customers will not be able to switch to these languages at the storefront. 06.png


F. Currency selector 

You can set the display of the currency selector button.Screen_Shot_2022-06-16_at_2.49.50_PM.png

  • None: No currency selector icon
  • Icon
  • Icon & text


G. Contact us

You can set the display of the contact us button.Screen_Shot_2022-06-16_at_2.53.22_PM.png

  • None: No currency selector icon
  • Icon
  • Icon & text


H. Member Center

You can set the display of the Member Center button.Screen_Shot_2022-06-16_at_2.57.49_PM.png

  • Icon
  • Icon & text (the text will correspond to the login status of the customer)



I. Shopping cart

You can set the display of the shopping cart button. Screen_Shot_2022-06-16_at_2.57.49_PM.png

  • Icon
  • Icon & text


During the setup, you can click the Save button at the bottom, then Preview Store at the top right to preview the complete storefront. Screen_Shot_2022-06-16_at_3.04.34_PM.png


After confirming the setup, click Publish at the top right so customers can view all the new content on this tab at the storefront.Screen_Shot_2022-06-16_at_3.05.01_PM.png


Read more






Have more questions? Submit a request