Slider Widget | Page Builder (New)

Plan_EC%2BSC.png

When using the new page editor to add or edit advanced pages, you can add a "Slider" widget to add images and videos to your page, making it more aesthetically pleasing. 

⚠️ 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. Add a slider widget

Step 1

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

Screen_Shot_2022-06-30_at_11.06.19_AM.png

 

Step 2

Click the Widget button. 

Screen_Shot_2022-06-17_at_11.03.01_AM.png

 

Step 3

Select the "Sliders" widget. 

Screen_Shot_2022-07-01_at_10.24.06_AM.png

 

Step 4

One set of sliders is set by default, click the Image and Video button to edit content. 

Screen_Shot_2022-07-01_at_10.28.10_AM.png

 

Click the ___2022-06-30___10.34.59.png icon on the left to drag and adjust the image or video order. 

Screen_Shot_2022-07-01_at_10.29.55_AM.png

 

Step 5

Click the image widget to individually upload for mobile and desktop versions respectively. 

*Note: It is recommended that the desktop version image width be greater than 2000 px, and the mobile version image width should be greater than 1080 px. 

Screen_Shot_2022-07-01_at_10.33.49_AM.png

 

Click the language drop-down menu, and a list of supported languages will be listed. You can individually upload the images for each separate language interface. 

Screen_Shot_2022-07-01_at_10.40.26_AM.png

 

Step 6

Click the Image,Video widget to edit image and video related settings. 

1. Image

  • Image cropping: Select which part of the image to crop and display (Top left/Top middle/ Top right/ Middle left/ Middle center/ Middle right/ Bottom left/ Bottom middle/ Bottom right). 
  • Image Alt Text: Enter the image alt text. Use a sentence to describe the image's content to help the search engine better understand the image's content. To learn more about image ALT descriptions, please refer to this article
  • Mask: Select the degree of masking the image.
  • Title: Enter the image title. 
  • Content: Write according to the product information. 
  • Show button: You can select whether or not to let customers see this button in the storefront
  • Button text: You can customize the text of the button the customer sees
  • Link to: Add a URL to the image so that when customers click on it, they will be redirected to a new page. 
    You can select the method to open the link with: 
    • Current window: Open the URL with the current window. 
    • New window: Open the URL in a new window. 

Screen_Shot_2022-07-01_at_10.45.42_AM.png

 

2. Video

  • Video URL: Because videos will automatically be muted when playing, please enter the Youtube or Vimeo URL. 
  • Mask: Select the degree of masking the image.
  • Title: Enter the image title. 
  • Content: Write according to the product information. 
  • Show button: You can select whether or not to let customers see this button in the storefront
  • Button text: You can customize the text of the button the customer sees
  • Link to: Add a URL to the image so that when customers click on it, they will be redirected to a new page. 
    You can select the method to open the link with: 
    • Current window: Open the URL with the current window. 
    • New window: Open the URL in a new window. 

Screen_Shot_2022-07-01_at_10.55.35_AM.png

 

Step 7

Other settings are supported.

A. Full Screen

Screen_Shot_2022-07-01_at_11.24.24_AM.png

Full Screen mode not switched on:

Screen_Shot_2022-07-01_at_11.24.40_AM.png

Full screen switched on: 

Screen_Shot_2022-07-01_at_11.10.00_AM.png

 

B. Adapt height to the Media Size

Screen_Shot_2022-09-27_at_11.15.15_AM.png

"Adapt height to the Media Size" is disabled: 

The height of the slider is based on the width of the image. 

  • Mobile width/height proportions 2:1
  • Mobile width/height proportions 3:4

Screen_Shot_2022-09-27_at_11.17.00_AM.png

"Adapt height to the Media" enabled: 

The height of the slider widget is based on the height of the first image (according to the image proportions). 

Screen_Shot_2022-09-27_at_11.19.58_AM.png

 

C. Image Proportions

You can individually set the image proportions on the desktop and the mobile version. 

Screen_Shot_2022-07-01_at_11.30.21_AM.png

 

D. Style (browsing products)

You can select between the "Button" and "Indicator" for the style of browsing the slider.

Screen_Shot_2022-07-01_at_11.32.31_AM.png

 

E. Duration

You can select the duration of the entire slider between 1-10 seconds. 

Screen_Shot_2022-07-01_at_11.33.23_AM.png


F. Style

You can select a button, indicator, or thumbnail to let customer choose how they want to click for the next image. 

Screen_Shot_2022-09-27_at_2.31.18_PM.png


G. Text Position (Desktop)

You can set the text position of the desktop image/video according to your needs.Select between "Top left, Top center, Top right, Middle left, Middle center, Middle right, Down left, Down center, Down right".  

Screen_Shot_2022-09-27_at_11.49.15_AM.png

 

H. Text Position (Mobile)

You can set the text position of the mobile image/video according to your needs. Select between "Below media, Overlap on media". 

Screen_Shot_2022-09-27_at_11.50.39_AM.png

 

I. Font size

You can select "Store setting default, Large title with small paragraph, Extra large title with paragraph" according to your needs. 

Screen_Shot_2022-07-01_at_11.40.01_AM.png

 

Step 8

During the setting process, you can click the Save button below to view the newly added slider widget.
*Note: You can select whether to preview the desktop version or the mobile version. 

Screen_Shot_2022-07-01_at_1.18.22_PM.png

Screen_Shot_2022-07-01_at_1.23.12_PM.png

 

Or click the Preview button on the top right to preview it at the storefront.  

Screen_Shot_2022-07-01_at_1.24.35_PM.png

 

Step 9

Once the settings above are confirmed, click Publish to let the customers view the newly updated content.

Screen_Shot_2022-07-01_at_1.25.31_PM.png

 

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments