

Top Bar
In top bar, you can select which page to work on, set global theme settings, and switch between editor views.Views
In the top right corner next to the ‘Publish’ button, there are 3 buttons.Mobile View
Clicking on the mobile icon will change the page builder preview to a mobile layout
Desktop View
Clicking on the desktop icon will switch the page builder preview to a desktop layout.
Preview
Clicking on the preview button will allow you to see a preview of the live site, i.e., outside of the page builder. This allows you to see an accurate representation of what the storefront will look like before publishing any changes.Page Selector
In the top left corner of the screen, there’s a dropdwon menu that allows you to select the page you’d like to work on.
Color Scheme
To change the color scheme of your storefront, click on the color palette icon next to the page selector. Doing so will cause the side bar UI to show a list of page elements and they’re default colors.


Fonts
To change storefront fonts, click on the letter A next to the color palette icon. Doing so will change the side bar UI to a font selector interface.
Standard Fonts
In the first tab, you can apply different font families to normal text and headers by selecting them from the respective dropdown menus.
Custom Fonts
In the second tab, you can add custom fonts by inserting the code into the box, e.g.:
Side Bar
In the side bar, you can add, edit, and rearrange the sections and elements of the page you are working on.
Page Section Settings
Most of the page sections and page elements display two different settings tabs when clicked on. Different page sections have different settings for both content and design.Content Settings
In the content tab, you can edit the content of that particular section, such as text, images, and links.
Design Settings
In the design tab, you can modify color, padding, borders, alignment, and in some cases section layout.
Global Page Sections
Global page sections are visible on all pages of your website, and any changes made to them on one page will be reflected on all other pages.Announcement Bar
The announcement bar is a global page section that can display an important message across your entire website, and is situated at the very top of the page. For example, you could use it to inform visitors about the latest promos or free shipping.
Page Header
The header serves as your store’s navigation hub and first point of interaction, housing essential elements like your logo, menu categories, search bar, shopping cart, and user account access. As the most visible and consistent element across all pages, it shapes your brand’s first impression while ensuring customers can easily find what they need and complete their purchases, directly impacting your conversion rates.Logo
You can add your logo by clicking on ‘Header’ and selecting the file you wish to upload.

Links
If you’re using the default header configuration, then you can add links to the header by clicking on ‘Header’ and clicking on ‘+ Add Link’.
- Page - static pages, e.g., Shop All, Homepage, About Us, Blog, etc.
- Product - an individual product page
- Post - an individual blog post
- Taxon - a product listing page for a taxon, e.g., Fashion, Garden
- Policy - one of your store policies, e.g., Terms and Conditions, Privacy Policy, etc.
- URL - a URL that links to an internal or external page

Custom Header Configuration
Under ‘Header’ in the page builder side bar, there is an option to ‘+ Add Block’. Clicking on this will allow you to configure a custom header with more advanced functionality instead of only simple links.
Mega Nav With Subcategories
This block allows you add a dropdown menu to your header that appears when hovering over that item in the header.
Mega Nav
This block functions in the same way as the ‘Mega Nav With Subcategories’ block, except you decided which links to include in which columns.
Newsletter
The newsletter is another global page section that allows you to capture user email addresses without them having to place an order. It enables you to build a direct marketing channel with your customers, allowing you to share new products, promotions, and content that drive first-time or repeat purchases and increases customer lifetime value.

Footer
The footer serves as a trust-building section of your store by housing essential business information, policies, and links to key pages – giving customers the confidence and resources they need to make informed purchasing decisions.


Page-Specific Sections
As the name suggests, these sections are specific to whichever page you add them to, and allow you to create an interesting, visually appealing storefront experience that helps your customers discover new products and categories, and learn more about your business.Add Page Sections
To add a page section, click the blue ‘Add Section’ button in the side bar.


Edit Page Sections and Elements
To edit a page section or element, either select it from the side bar, or click on it in editor preview. This will open up the settings for that particular section or element.

Delete Page Sections and Elements
To delete a page section or element, simple select it from the side bar or click on it in the editor preview, and locate the ‘Delete button in the bottom left corner of the page.

