SHOPLINE Page Builder (New)

Plan_EC%2BSC.png

SHOPLINE is about to launch a brand new Page Builder, which greatly optimizes the design for advanced pages. You can design the announcement board, header & footer, and up to six kinds of widgets to create a unique online store layout.

In this article, you'll find:

 

⚠️ Before you begin:

  • The new page builder currently only supports Ultra Chic, Kingsman and Varm themes.
  • After creating a page using the new page builder, the page can still be displayed even if you switch to other themes, but it cannot be edited and the layout may be messed up. Please take note of this before publishing the page.

 

1. New page builder overview

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

EN_1.png

 

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

EN_2.png


B. Mobile version

EN_3.png

 

2. Language setting

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

EN_4.png

 

3. 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.

EN_5.png

 

4. Preview page

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

EN_6.png

 

5. 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".

EN_7.png

*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 for the announcement bar, and choose the display method and duration. Please refer to this article for details.

announcement_EN.png

 

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. 

Header_EN.png

 

C. Widgets

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

widget_EN.png

 

D. Footer

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

Footer_EN.png

 

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. 

SEO_Setting_EN.png

 

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 the new page builder, it is recommended that you keep using the theme that supports the new page builder to keep the settings. 

 

Store_setting_EN.png 

 

5. Notes

  • If your store is using the Ultra Chic, Kingsman or Varm theme, when adding a new advanced page, you will be directed to the new page 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 the new page builder to publish the new footer. Please make sure you want to update the existing footer before publishing.

 

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments