Introduction｜SHOP Builder

4. EC + SC (EN).png

SHOPLINE's brand new page builder - SHOP Builder can greatly optimize the design for advanced pages. You can design the announcement board, header & footer, and various kinds of widgets to create a unique online store layout.

In this article, you'll find:

SHOP Builder overview
Page editing
SEO settings
Store settings
Notes

⚠️ 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. SHOP Builder overview

Proceed to SHOPLINE Admin > [Online Store Design] > [Pages] and click the [Advanced Page/Edit] button to open the Advanced Page setup.

1. View in web and mobile version

When editing with the new page editor, you can easily switch between the web/desktop version and the mobile version to make your online store matches your brand style.

*Note: Be sure to click "Save" or "Publish" after editing.

A. Web version

B. Mobile version

2. Assistive editing mode

This mode can help you know the name and display position of the currently edited widget. Click the widget to edit it.

3. Language setting

Click the language drop-down menu to edit the page in the supported languages of your store.

4. Page title

The name of the newly added page is "New Page" by default. Click the pencil icon on the right of the title to retitle.

5. Preview page

Click the Preview Page on the top right of the builder to preview the page in a new tab.

6. Save and publish

After adding an advanced page, please be sure to click Save on every edit. The page will appear in the list of Pages, with the label "Support New Page Builder".

*Note: If your advanced page has been added to the Menu Navigation, customers will be able to view this advanced page once it is published. Please be sure to confirm the edited page content before clicking the publish button.

2. Page editing

A. Announcement Bar

You can add three sets of text or countdown for the announcement bar, and select the display method and duration. Please refer to this article for details.

B. Header

You can edit the size and position of the logo, and the alignment of the menu. Please refer to this article for details.

C. Widgets

There are widgets for content, products, and extension. Please refer to the articles below for details.

A. Content

B. Product

C. Extension

D. Footer

You can add text, gallery, and social media icons, and adjust the position/alignment. Please refer to this article for details.

3. SEO settings

Select SEO Settings on the left menu bar, you can set the keywords and URL for the page. Please refer to this article for details.

4. Store settings

Select Store Settings on the left menu bar, you can customize the colors and fonts of each section of the online store, and adjust the settings related to the product list. Design your online store web pages to balance the brand image and style and user experience.

Please refer to this article for the setup procedures of various settings.

*Notes:

Be sure to click "Save" or "Publish" after editing.
If you have started using SHOP Builder, it is recommended that you keep using the theme template that supports SHOP Builder to keep the settings.

5. Notes

If your store is using the Ultra Chic, Kingsman or Varm theme template, when adding a new advanced page, you will be directed to SHOP Builder. Previous pages will not be affected, and you can also edit the existing page content with the old page builder
The existing footer will be replaced when you use SHOP Builder to publish the new footer. Please make sure you want to update the existing footer before publishing.
There is no set limit for adding widgets to the page. However, an excessive number of widgets may impact page performance. Merchants are advised to add no more than 25 widgets on each page and also exert their discretion based on the number of displayed products on the page.