Get started with Website Builder
If this is your first time using Website Builder, we will assist you in getting started with building your amazing website, as well as familiarizing yourself with the interface and basic functions of Website Builder.
A. Access the Website Builder
B. Overview of the Website Builder interface
C. Header bar
D. Web front
E. Side bar settings
F. Page selector
G. Layer panel
H. Styling settings
I. Website settings
K. Insert panel
L. Quick bar settings
From your store admin, go to Online Store > Design and click Customize next to the template you want to edit.
Then, you can click Template to search and select a suitable template for your page.
Click Apply to use the template on your web page.
Please refer to this article for more information about template on Website Builder.
The Website Builder interface can be divided into 3 main sections:
The Header bar displayed on top of the interface holds all sorts of options and commands related to web pages, page structure layers, styling settings, website settings and more.
The Side bar displays all content and style attribute settings for each element of your web page.
The Web front is the area where you view and edit your web page. You can click and drag each element to rearrange them on the web page as desired.
Refer to the list below for all options on the Header bar.
Exit: Close the Website Builder and return to your dashboard.
Pages: Show all pages on the website. It is simple to pick a page to design.
Layers button: Enable the Layer panel.
Style button: Enable the Styling settings panel.
Settings button: Open all settings section of the website.
Insert button: Enable the Insert panel where you can add more elements to the web page.
The name of the web page you are editing.
Save status message.
Undo button.
Redo button.
Preview button: Preview the page on your website.
Switch device button: Switch between desktop and mobile view.
Save button.
Preferences button: Advanced setting functions.
This section displays the complete website interface when your page is published. You can select to display it in desktop or mobile view for easy visualization.
You can click and drag each design block within the Web front section to rearrange them on your website.
When displayed on desktop and mobile, all content and values of each design block will be synchronized, but Website Builder also includes a function that allows customers to adjust different colors, styles, and sizes for each device type.
This section includes page selector (1st icon), layer panel, styling settings, website settings and insert panel that allows you to easily set up the values and properties of each section, row, column and block.
Check out our guides to:
Set up sections on Website Builder.
Set up blocks on Website Builder.
This section includes every page in Websites pages, E-commerce pages, Blog pages, Member pages and System pages.
Once you click on the desired page, the preview page will show up on the right screen.
In the Layer panel, you can view the list of layers of the web page you are designing:
Each layer will have the following structure: Section > Row > Column > Block.
Each layer can contain smaller sublayers which can be configured to your preference.
You can show/hide any elements of the pages independently on each device.
The layer list is displayed in the order of the elements on your web page from top to bottom. You can easily drag and drop to rearrange the order of layers.
When you insert new elements into the web page, they will also be displayed in the Layer panel.
If a layer is put into Header or Footer section, it will show on all pages of the website.
Check out our guides to:
Set up sections on Website Builder.
Set up blocks on Website Builder.
Styling settings, which includes Site styles and Page styles, allows customers to easily set the same color, font and button style for the entire Website. These settings helps the Website to have a uniform and consistent interface. Click on the Pencil and Ruler icon (Styling settings) or use shortcut Shift + S to open Styling settings.
When there is a need to design a Web page with separate styles and colors, you can use Page Style, the function will create a separate style for the current Page without affecting the overall style of the entire website.
After setting up a styling setting, you can also save it to your library for later use.
Check out our guide to:
Understand styling settings in Website Builder.
This is where you can set up the general settings of the website, including: General, Product, Cart goal, Language, Cookies banner, Review rating. Please visit this article to learn more.
The Insert panel allows you to add more blocks and sections into your web page.
You can select a block or section from our prebuilt library to use and customize.
Blocks and sections that are saved to your library are also listed here for you to easy select and set up your web page coherently.
You can use the quick bar settings to quickly edit each element of your web page. Depending on the element's actual use and properties, different quick bar settings are available for them. Below is the list of the most common quick bar settings:
Move the element one layer forward/backward.
Hide the selected element.
Duplicate the selected element.
Save the element to your library.
Delete the selected element.
Overview of Website Builder
Get started with Website Builder
Add website template made with Website Builder
Overview of Website Settings
How to use General in Website Settings?
How to edit your product in Website Settings?
In this article
A. Access the Website Builder
B. Overview of the Website Builder interface
C. Header bar
D. Web front
E. Side bar settings
F. Page selector
G. Layer panel
H. Styling settings
I. Website settings
K. Insert panel
L. Quick bar settings
A. Access the Website Builder
From your store admin, go to Online Store > Design and click Customize next to the template you want to edit.
Then, you can click Template to search and select a suitable template for your page.
Click Apply to use the template on your web page.
Please refer to this article for more information about template on Website Builder.
B. Overview of the Website Builder interface
The Website Builder interface can be divided into 3 main sections:
The Header bar displayed on top of the interface holds all sorts of options and commands related to web pages, page structure layers, styling settings, website settings and more.
The Side bar displays all content and style attribute settings for each element of your web page.
The Web front is the area where you view and edit your web page. You can click and drag each element to rearrange them on the web page as desired.
C. Header bar
Refer to the list below for all options on the Header bar.
Exit: Close the Website Builder and return to your dashboard.
Pages: Show all pages on the website. It is simple to pick a page to design.
Layers button: Enable the Layer panel.
Style button: Enable the Styling settings panel.
Settings button: Open all settings section of the website.
Insert button: Enable the Insert panel where you can add more elements to the web page.
The name of the web page you are editing.
Save status message.
Undo button.
Redo button.
Preview button: Preview the page on your website.
Switch device button: Switch between desktop and mobile view.
Save button.
Preferences button: Advanced setting functions.
D. Web front
This section displays the complete website interface when your page is published. You can select to display it in desktop or mobile view for easy visualization.
You can click and drag each design block within the Web front section to rearrange them on your website.
When displayed on desktop and mobile, all content and values of each design block will be synchronized, but Website Builder also includes a function that allows customers to adjust different colors, styles, and sizes for each device type.
E. Side bar settings
This section includes page selector (1st icon), layer panel, styling settings, website settings and insert panel that allows you to easily set up the values and properties of each section, row, column and block.
Check out our guides to:
Set up sections on Website Builder.
Set up blocks on Website Builder.
F. Page selector
This section includes every page in Websites pages, E-commerce pages, Blog pages, Member pages and System pages.
Once you click on the desired page, the preview page will show up on the right screen.
G. Layer panel
In the Layer panel, you can view the list of layers of the web page you are designing:
Each layer will have the following structure: Section > Row > Column > Block.
Each layer can contain smaller sublayers which can be configured to your preference.
You can show/hide any elements of the pages independently on each device.
The layer list is displayed in the order of the elements on your web page from top to bottom. You can easily drag and drop to rearrange the order of layers.
When you insert new elements into the web page, they will also be displayed in the Layer panel.
If a layer is put into Header or Footer section, it will show on all pages of the website.
Check out our guides to:
Set up sections on Website Builder.
Set up blocks on Website Builder.
H. Styling settings
Styling settings, which includes Site styles and Page styles, allows customers to easily set the same color, font and button style for the entire Website. These settings helps the Website to have a uniform and consistent interface. Click on the Pencil and Ruler icon (Styling settings) or use shortcut Shift + S to open Styling settings.
When there is a need to design a Web page with separate styles and colors, you can use Page Style, the function will create a separate style for the current Page without affecting the overall style of the entire website.
After setting up a styling setting, you can also save it to your library for later use.
Check out our guide to:
Understand styling settings in Website Builder.
I. Website settings
This is where you can set up the general settings of the website, including: General, Product, Cart goal, Language, Cookies banner, Review rating. Please visit this article to learn more.
K. Insert panel
The Insert panel allows you to add more blocks and sections into your web page.
You can select a block or section from our prebuilt library to use and customize.
Blocks and sections that are saved to your library are also listed here for you to easy select and set up your web page coherently.
L. Quick bar settings
You can use the quick bar settings to quickly edit each element of your web page. Depending on the element's actual use and properties, different quick bar settings are available for them. Below is the list of the most common quick bar settings:
Move the element one layer forward/backward.
Hide the selected element.
Duplicate the selected element.
Save the element to your library.
Delete the selected element.
Related articles
Overview of Website Builder
Get started with Website Builder
Add website template made with Website Builder
Overview of Website Settings
How to use General in Website Settings?
How to edit your product in Website Settings?
Updated on: 30/10/2024
Thank you!