Advanced Page

Plan Availability:

✓ Basic Plan

✓ Advanced Plan

✓ Premium Plan

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:

1. How to add new widgets
2. Add text paragraph
3. Add text with title
4. Add photos
5. Add videos
6. Add single product display
7. Add category display
8. Add Facebook widget
9. Add map
10. Add Instagram widget
11. Add QR code
12. Other settings & functions
   12.1 Naming pages
   12.2 Setting up SEO content
   12.3 Preview Function

 

First, go to "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

 

 


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

 

 


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

 

 


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

 

  


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

 

 


5. Add Videos

Add YouTube Videos 

Insert the URL directly from YouTube 

If you prefer Youtube autoplay, add ?autoplay=1&rel=0 at the end of the embed link

For example:

https://www.youtube.com/watch?v=V7BEzkRBp_g?autoplay=1&rel=0

  

Add a Vimeo Video

Insert the URL directly from Vimeo video


 

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

 

 

 


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

category_en.png

 

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.

instant_add_to_cart_-_en_demo.gif

  

 


8. Add Facebook Widget

Enter the URL of your Facebook page

 


map_icon.png 

9. Add Map

Google Map is shown in popped-up window on the left menu bar > Search address > Click "OK"

map_eng_.gif

Click here to learn other ways of inserting maps to your shop

 


ig_icon.png

10. Add Instagram Widget

 

Step 1

Click "Authorize application" button in the pop up menu 

ig_eng_1.png

 

Step 2 

Directs to Instagram login page > Enter your personal credentials

ig_2_.png

 

Step 3 

Click "Authorize" button to proceed

ig_3.png

 

Step 4

Page is redirected back to SHOPLINE backend
Click "Unlink" button to disconnect the account with your shop

ig_eng_2_.png

 


qr_code_icon.png

11. Add QR Code

Insert link in the pop up window > Click "OK"

qr_code_eng.gif

 


12. Other Settings & Functions

12.1 Naming Pages

Click the blue "Menu" button > "Page Title" under "Page Settings" > Name your own page title 

 

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

 

Remarks: You do not need to fill in page titles for both languages if you are not doing bilingual content. You can leave the other language fields blank

 

12.3 Preview Function

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

preview_button_eng.png

 

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!

Have more questions? Submit a request

Comments

Powered by Zendesk