Advanced Page

4.EN_Support_EC_SC.png

Advanced Page Editor allows merchants to create a unique customized page by organizing banners, images, videos, and texts by drag-and-drop.

 

This article will guide you through different actions on Advanced Page:

 

1. How to add new widgets

Step 1

First, go to [Online Store Design] > [Pages] in the Admin panel, then click the Advanced Page button.

EN_1.png

 

Step 2

You can start designing your page with a blank page or with one of the templates.

EN_2.png

 

Step 3

Click the blue Build button on the left, then select the element you want to add to the page.

Screen_Shot_2022-07-27_at_6.57.06_PM.png

 

Step 4

When you drag the element to the page editing area, the green colour block indicates the available position. Otherwise, the element would not be placed.

  

2. Element functions

Click on the hyperlinks below to view the instructions for various page elements.

 

3. Edit header and footer

  • The header of the Advanced Page will remain in the editing area, showing "Click here and go to edit header." Click the hyperlink to edit the header on the Menu Navigation page. Please refer to this article for detailed instructions.
  • The footer of the Advanced Page will also be shown in the editing area, showing "Click here and go to edit footer." Click the hyperlink to edit the footer on the Menu Navigation page. Please refer to this article for detailed instructions.

*Note: The current edit content will be saved automatically when you go edit the header and footer.

Screen_Shot_2022-07-27_at_6.59.46_PM.png

 

4. Advanced Page layout

  • You can add at most 4 elements side by side in each row. The elements will split the width of the layout.Screen_Shot_2022-07-28_at_3.49.54_PM.png

 

  • Click the "cross" icon on the element to drag and move the position; click the bin icon to delete the element.move_element.gif

 

  • If you want to adjust a whole row of components, click the green arrow icon on the right to move up and down the entire row; click the green bin icon to delete the entire row of elements. sort_and_del.gif

 

5. Preview page

You can preview your page by clicking the green Preview button at the bottom right.

preview_button_eng.png 

In page preview, you can check how your page is resized when browsing on different devices
From left to right: Mobile > Tablet > Desktop.

  

Layouts are automatically adjusted, as shown below. Click Close Preview to end the preview.

Don't forget to click "Save" after editing!

Screen_Shot_2022-07-28_at_3.54.05_PM.png

 

6. Copy Advanced Page

You can copy the Advanced Page by clicking the Copy button in Pages Index.

All the widgets would be copied to the new page, including page name, URL, SEO settings. Please remember to update the details in these sections.

*Please be noted that the copy function is only for Advanced Pages.

EN_14.png

 

7. [Coming Soon] New Page Builder

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. Please read this article for more details.

Screen_Shot_2022-07-28_at_5.44.10_PM.png

*Notes:

  • The new page builder currently only supports the Ultra Chic theme.
  • 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.
  • Storefront layouts that support display but do not support editing in the New Page Builder are Dusk, Philia, Varm, Skya, Sangria, Bianco, Doris Bien, and Kingsman. Other storefront layouts do not support editing or display.

 

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments