Gallery Widget | Page Builder (New)

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. 

 

Step 2

Click the Widget button.

Step 3

Select the Gallery widget.  

 

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. 

If you added multiple images, click the  icon on the left to drag and adjust the image order. 

 

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. 

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. 

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. 

 

Step 7

Supports other settings. 

A. Full Screen

Full Screen mode not switched on:

Full Screen mode switched on:

 

B. Padding

Adjust the padding of the image and page.

 

C. Image per row

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

 

D. Image proportions

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

 

E. Text Alignment

 

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. 

 

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

 

Step 9

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

 

 

Read more

• Announcement Bar / Header Settings | Page Builder (New)
• Text Widget | Page Builder (New)
• Image with Text Widget | Page Builder (New)
• Slider Widget | Page Builder (New)
• Product List Widget | Page Builder (New)
• Product Slider Widget | Page Builder (New)
• SEO Settings | Page Builder (New)
• Footer Setting | Page Builder (New)