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 in Advanced Page:
- How to add new widgets
- Add text paragraph
- Add text with title
- Add photos
- Add videos
- Add single product display
- Add category display
- Add Facebook widget
- Add map
- Add Instagram widget
- Add QR code
- Add H1 Tag
- Other settings & functions
Naming pages
Setting up SEO content
Preview Function - Clone Advanced Page
First, go to "Online Store Design">>"Pages" in admin panel > Click the yellow "Advanced Page" button > Choose a template
You can start designing your page with a blank page or with one of our templates
A. How to Add New Widgets
Choose one of the elements from the left hand menu > Drag and drop the element to the position you want on the right
When you drag the element to the page editing area, green colour indicates placing the element is possible. Otherwise, the element would not be placed.
B. Add Text Paragraph
Box with default text will show up
Click the text box to edit. Text editing tools will be provided on the top of the editor.
Text editing tools: Paragraphs, Font Styles, Alignments, Remove Format, Links, Font colours and Font Size
C. Add Text with Title
Box with default text will show up
The text box is divided into two parts: the top one is "Title" while the bottom one is "Description"
Title and description need to be edited individually. Same as edit the text paragraph, click the title or description to edit. When you edit, text editing tools will be provided on the top of the editor.
D. Add Photos
You can add a photo/banner or a slideshow of multiple photos/banners.
Upload the photos you want to display in the left pop-up window and change the display order by dragging. You can also set up links for each photo so when it is clicked, customers can be redirected to the link respectively.
Set as a Full Width image
For slideshows, you can switch between full-width and normal-width by checking the box "Show full-width image" under "Settings" > "Image Settings"
E. Add Videos
Add YouTube Videos
Insert the URL directly from YouTube
Add a Vimeo Video
Insert the URL directly from Vimeo video
You may change the setting of the video for autoplay and looping. Video size and ratio could be also modified manually.
Remarks: There is new autoplay policy for the new version of Google Chrome. Please proceed to chrome://flags/#autoplay-policy for further setting.
F. Add Single Product Display
Select product you want to show (you can either search by product name or tag) > Click "Save" to add the product
You can click "Change" button to switch to another product
"Description Alignments Settings" configures the position of product name and price
It is set as "Align to left" by default, you may change alignment to center or right
G. Add Category Display
Select the category you want to display
You can create and edit the title, description, number of items per page and enable the “Instant Add To Cart” feature under "Settings" > "Category Settings" after clicking the category widget.
The first 24 products of the category will be displayed by default.
By enabling the “Instant Add To Cart” feature, it allows customers easily add products to cart without going to the product page, and the customer can continue browsing on the same page for a better online shopping experience.
H. Add Facebook Widget
Enter the URL of your Facebook page
Ｉ. Add Map
Google Map is shown in popped-up window on the left menu bar > Search address > Click "OK"
Click here to learn other ways of inserting maps to your shop
Ｊ. Add Instagram Widget
Step 1
Click "Authorize application" button in the pop up menu
Step 2
Directs to Instagram login page > Enter your personal credentials
Step 3
Click "Authorize" button to proceed
Step 4
Page is redirected back to SHOPLINE backend
Click "Unlink" button to disconnect the account with your shop
Ｋ. Add QR Code
Insert link in the pop up window > Click "OK"
L. Add H1 Tag
Box with default text will show up
Click the text box to edit. Text editing tools will be provided on the top of the editor.
Please be reminded that only one tag is allowed in a page. If there is any need to modify, please do so with the existing one.
Ｍ. Other Settings & Functions
1. Naming Pages
Click the blue "Menu" button > "Page Title" under "Page Settings" > Name your own page title
2. Setting up SEO Content
Click the blue "Menu" button > "SEO Settings" > Enter Title, Description, Keywords and SEO-friendly URL
Click here to learn more about SEO
3. Preview Function
You can preview your page by clicking the green "Preview" button at the bottom right corner
In page preview, you can check how your page is resized when browsing in different devices
From left to right: Mobile > Tablet > Desktop
Layouts are automatically adjusted as shown below
Don't forget to click "Save" after finish editing!
N. Clone Advanced Page
You can clone advanced page by clicking the "Copy" button in Pages Index.
All the widget would be copied to the new page, including page name, url, seo settings, and please remember to update the information in these sections.
Please be noted that the copy function is only for advanced pages.
Comments