Announcement Bar / Header Settings | Page Builder (New)

Plan_EC%2BSC.png

The new page builder for the "Announcement Bar" and "Homepage" 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:

  • The new page builder currently only supports Ultra Chic, Kingsman and Varm theme templates.
  • After creating a page using the new page 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.

Screen_Shot_2022-06-15_at_4.22.09_PM.png

 

Step 3

Click the Text button.

Screen_Shot_2022-06-15_at_4.24.48_PM.png

 

Step 4

Add announcement bar content.

  • 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. 

Screen_Shot_2022-06-15_at_5.40.34_PM.png

 

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.

Screen_Shot_2022-06-28_at_9.28.17_AM.png

 

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.

Screen_Shot_2022-07-06_at_4.32.21_PM.png

Screen_Shot_2022-07-06_at_4.31.36_PM.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.

Screen_Shot_2022-06-16_at_10.35.44_AM.png

A. Slider

slider_20.gif

B. List All

Screen_Shot_2022-07-05_at_5.48.40_PM.png

 

Step 6

You can set the duration of the slider. 

Screen_Shot_2022-06-16_at_10.48.48_AM.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.

Screen_Shot_2022-06-16_at_10.59.00_AM.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.

Screen_Shot_2022-06-16_at_11.02.29_AM.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
    Screen_Shot_2022-06-16_at_2.27.55_PM.png
  •  Icon & text
    Screen_Shot_2022-06-16_at_2.27.02_PM.png
  • Search Bar
    Screen_Shot_2022-06-16_at_2.28.31_PM.png

 

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
    Screen_Shot_2022-06-16_at_2.44.25_PM.png
  • Icon & text
    Screen_Shot_2022-06-16_at_2.43.46_PM.png

 

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
    Screen_Shot_2022-06-16_at_2.52.50_PM.png
  • Icon & text
    Screen_Shot_2022-06-16_at_2.50.42_PM.png

 

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
    Screen_Shot_2022-06-16_at_2.54.04_PM.png
  • Icon & text
    Screen_Shot_2022-06-16_at_2.54.26_PM.png

 

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
    Screen_Shot_2022-06-16_at_2.56.28_PM.png
  • Icon & text (the text will correspond to the login status of the customer)
    Screen_Shot_2022-06-16_at_2.56.51_PM.png

    Screen_Shot_2022-06-28_at_10.44.10_AM.png

 

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
    Screen_Shot_2022-06-16_at_2.58.36_PM.png
  • Icon & text
    cart.png

 

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

Comments