Gallery Widget | Page Builder (New)

Plan_EC%2BSC.png

With the new page editor, when adding/editing advanced pages, you can use image widgets to enrich your tab with more images and make it more aesthetically pleasing. 

⚠️ Before you begin:

  • The new page builder currently only supports Ultra Chic, Kingsman, and Varm theme templates.
  • After creating a page using the new page builder, the page can still be displayed even if you switch to other theme templates, but it cannot be edited and the layout may be messed up. Please take note of this before publishing the page.

 

1. Add an image 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 Gallery widget.  

Screen_Shot_2022-06-30_at_10.29.15_AM.png

 

Step 4

The system is set to add 1 image by default. Click the Image button to add more images.

*Note: Currently supports adding up to 16 images. 

Screen_Shot_2022-06-30_at_10.32.14_AM.png

If you added multiple images, click the ___2022-06-30___10.34.59.png icon on the left to drag and adjust the image order. 

Screen_Shot_2022-06-30_at_11.22.45_AM.png

 

Step 5

Click the image widget to separately upload for desktop and mobile interfaces. 

*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-06-17_at_11.47.09_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-06-30_at_11.39.37_AM.png


Step 6

Edit image-related settings.

  • 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. 
  • URL link: 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-06-17_at_12.05.29_PM.png

 

Step 7

Supports other settings. 

A. Full Screen

Screen_Shot_2022-06-17_at_12.07.35_PM.png

Full Screen mode not switched on:

st.png

Full Screen mode switched on:

raw.png

 

B. Padding

Adjust the padding of the image and page.

Screen_Shot_2022-06-17_at_1.00.58_PM.png

 

C. Image per row

You can individually set the number of images in each row of the desktop and mobile versions. 

Screen_Shot_2022-06-17_at_1.06.20_PM.png

 

D. Image proportions

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

Screen_Shot_2022-06-17_at_1.09.29_PM.png

 

E. Text Alignment

Screen_Shot_2022-06-17_at_1.10.11_PM.png

 

Step 8

During the setting process, you can click the Save button below to view the newly added gallery widget on the preview screen to the right.

*Note: You can select whether to preview the desktop version or the mobile version. 

Screen_Shot_2022-06-17_at_2.54.14_PM.png

Screen_Shot_2022-06-17_at_2.55.58_PM.png

 

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

preview.png

 

Step 9

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

Screen_Shot_2022-06-17_at_2.58.13_PM.png

 

 

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments