Advanced Page

4. EC + SC (EN).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:

How to add new widgets
Element functions
Edit header and footer
Advanced Page layout
Preview page
Copy Advanced Page
SHOP Builder

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.

Step 2

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

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.

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

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.

5. Preview page

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

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!

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.

7. SHOP Builder

With SHOPLINE's new page builder - SHOP Builder, you can optimize the design for advanced pages. Design the announcement board, header & footer, and other 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:

SHOP Builder currently only supports Ultra Chic, Kingsman, Philia, and Varm themes.
After creating a page using SHOP 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.
The storefront layouts that support display but do not support editing in the SHOP Builder are Dusk, Skya, Sangria, Bianco, and Doris Bien. Other storefront layouts do not support editing or display.