When using SHOP Builder 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:
- SHOP Builder currently only supports Ultra Chic, Kingsman, Varm, and Philia theme templates.
- After creating a page using SHOP 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 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.
Step 2
Click the Widget button.
Step 3
Select the "Sliders" widget.
Step 4
One set of sliders is set by default, click the Image and Video button to edit content. Click the icon on the left to drag and adjust the image or video order.
Step 5
Click the image widget to individually upload for mobile and desktop versions respectively.
1. Bulk upload
The system sorts according to the modification date of the image file, from top to bottom, from the most recently edited to the previous edited.
2. Single upload
You can also upload one image at a time, and the thumbnails are sorted in the same way as bulk uploads.
*Notes:
- 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.
- If the upload fails due to the image file format, quantity, etc., the following error prompt may appear
- Upload failure
Error message: Fail to upload image (cannot display any thumbnails) - Partial upload failure
Error message: Fail to upload some images (Automatically skip error files while displaying thumbnails)
- Upload failure
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
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: Insert the product title. You can also customize the following style settings. The display order of the style settings is: Widget's style settings > Store Settings.
- Heading tags: There are 6 options from H1 to H6. The system defaults to H3.
- Text color: Click open the palette to choose the text color, or enter a color code.
- Content: Insert the description for the product. You can also customize the following style settings.
- Text color: Click open the palette to choose the text color, or enter a color code.
- Lists: You can add bulleted lists or numbered lists.
- Full-screen editing: You can enter the full-screen editing mode to create your content more easily.
- 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.
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: Insert the product title. You can also customize the following style settings. The display order of the style settings is: Widget's style settings > Store Settings.
- Heading tags: There are 6 options from H1 to H6. The system defaults to H3.
- Text color: Click open the palette to choose the text color, or enter a color code.
- Content: Insert the description for the product. You can also customize the following style settings.
- Text color: Click open the palette to choose the text color, or enter a color code.
- Lists: You can add bulleted lists or numbered lists.
- Full-screen editing: You can enter the full-screen editing mode to create your content more easily.
- 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.
*Notes:
- The display order of the style settings is: Widget's style settings > Store Settings.
- If you have adjusted your page layout using the custom liquid, you will need to edit the rules for the custom liquid after adjusting the widgets style settings.
- To customize the font size for Slider's title and content, you can go to the "Font Size" option at the bottom of the left panel. For more details, please go to Step 7: I. Font Size down below.
- Currently, Shopper App does NOT support customization of the widget's text color and font size.
Step 7
Other settings are supported.
A. Full Screen
Full Screen mode not switched on:
Full screen switched on:
B. Adapt height to the Media Size
"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
"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).
C. Image Proportions
You can individually set the image proportions on the desktop and mobile versions (3:4 ratio, 2:1 ratio, 1:1 ratio).
- Recommended image proportions for the desktop version
- If the "Adapt Height to the Media Size" is disabled, the image proportion will be set to a 2:1 ratio by default (2000 x 1000px).
- If the "Adapt Height to the Media Size" toggle is enabled, it will display the original proportion of the image. It is recommended to have at least 2000px width.
- Recommended image proportions for the mobile version
- Rectangular (2:1 ratio) - Recommended single image dimension: 1080 x 540px.
- Rectangular (3:4 ratio) - Recommended single image dimension: 810 x 1080px
- Square (1:1 ratio) - Recommended single image dimension: 1080 x 1080px.
D. Padding
Adjust the padding between images and the page.
E. Duration
You can select the duration of the entire slider between 1-10 seconds.
F. Style
You can select a button, indicator, or thumbnail to let customers select how they want to click for the next image.
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".
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".
I. Font size
You can select "Store setting default, Large title with small paragraph, Extra large title with paragraph" according to your needs.
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.
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 | SHOP Builder
- Text Widget | SHOP Builder
- Gallery Widget | SHOP Builder
- Image with Text Widget | SHOP Builder
- Product List Widget | SHOP Builder
- Product Slider Widget | SHOP Builder
- SEO Settings | SHOP Builder
- Footer Setting | SHOP Builder
Comments