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.
Step 2
Click the Announcement Bar button.
Step 3
You can choose to add a "Text" or "Countdown" widget.
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.
2. Add Text widget
Click the Text button.
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.
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.
Step 5
If you add multiple announcement bars, you can select its display method.
*Note: Currently supports adding a maximum of 3 announcement bars.
A. Slider
B. List All
Step 6
You can set the duration of the slider.
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.
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.
2. Header settings
On the Advanced Page setup page, click the Header button.
A. Logo
Click Logo to set the size and position of the store logo on the desktop/ mobile interface.
B. Menu
Click Menu to set the alignment of the store menu on the desktop interface.
*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.
D. Search bar
You can set the display of the search bar.
- 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.
- 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.
F. Currency selector
You can set the display of the currency selector button.
- None: No currency selector icon
- Icon
- Icon & text
G. Contact us
You can set the display of the contact us button.
- None: No currency selector icon
- Icon
- Icon & text
H. Member Center
You can set the display of the Member Center button.
- 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.
- 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.
After confirming the setup, click Publish at the top right so customers can view all the new content on this tab at the storefront.
Read more
- Text Widget | SHOP Builder
- Gallery Widget | SHOP Builder
- Image with Text Widget | SHOP Builder
- Slider Widget | SHOP Builder
- Product List Widget | SHOP Builder
- Product Slider Widget | SHOP Builder
- SEO Settings | SHOP Builder
- Footer Setting | SHOP Builder
Comments