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:
⚠️ 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.
You can edit the size and position of the logo, and the alignment of the menu. Please refer to this article for details.
There are widgets for content, products, and extension. Please refer to the articles below for details.
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.
- 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.
- 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.
- SEO Settings | SHOP Builder
- Footer Setting | SHOP Builder
- Gallery Widget | SHOP Builder
- Text Widget | SHOP Builder
- Image with Text Widget | SHOP Builder
- Slider Widget | SHOP Builder
- Product List Widget | SHOP Builder
- Product Slider Widget | SHOP Builder