When editing the advanced page, you can add the "Sales Combo" widget to create diverse layouts. This widget supports combining Text, Product, Image, and Video widgets, enhancing the appeal and richness of your online store's pages.
⚠️ Before you begin, please note that:
- 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.
- If you have enabled the Layout Engine editor, please adjust the code according to this document or contact the Online Merchant Success Team.
This article will cover the following:
1. Add Sales Combo Widget
Step 1
In the SHOPLINE Admin, go to [Online Store Design] > [Pages]. Click Add Page and choose Advanced Page. Or Click on the "Edit" button next to the existing pages.
*Note: This feature only supports advanced pages with the mark .
Step 2
Click + Widget to add a new widget.
Step 3
Find the "Extension" section, and click Sales Combo.
*Note: This widget is currently not available for the Shopper App.
Step 4
Combine components including Product, Image, Text, or Video. Click the icon to arrange the display order. The system defaults to add one image and one product component.
*Note: One Sales Combo Widget can add up to three components (Product/ Image/ Text/ Video). Once three components are selected, the system will automatically hide the "Add" button. .
Step 5
Each component (Product/ Image/ Text/ Video) requires different fields to be set. Please refer to the following table to learn more about the related settings.
| Product |
Click + Product and select a product you want to add to the Sales Combo. If the product is unpublished or hidden, it will not be displayed on the storefront. For more details on the "Product" component, please refer to Product Component. |
| Image |
You can upload separate images for desktop and mobile versions with customizable image ALT text. For optimal display, it is recommended that desktop images have a width of at least 2000 px and mobile images have a width of at least 1080 px. For more details on the "Image" component, please refer to Gallery Component. |
| Text |
Enter Title, Sub title, and Content. The Text Component also supports adjusting text format and other related settings. For more details on the "Text" component, please refer to Text Component. |
| Video |
Enter URLs of YouTube, Facebook, or Vimeo videos. The video display ratio will be 16:9. For more details on the "Video" component, please refer to Video Component. |
Step 6
For the next four settings, please refer to the table below.
| Padding |
You can adjust the vertical padding of the widget. The value ranges from 1 to 30 px and defaults to 30 px. |
| Text alignment |
Choose the alignment format for the widget's text. It can be set to the left, middle, or right and it defaults to the middle. |
| Show product summary |
Choose whether to show the product summary. The toggle is switched on by default, i.e. the product summary will be displayed. |
| Show Hidden Products |
Choose whether to show Hidden Products. The toggle is switched off by default, i.e. the Hidden Products will be not displayed. |
Step 7
After completing the aforementioned settings, click Save to show the preview in the right section. Click the icon to switch between the desktop and mobile versions.
Step 8
Click Preview Page to view if everything is correct. Then, click Publish to publish the advanced page.
2. Storefront display
Desktop version:
According to the number and type of the components in a Sales Combo, the system will:
i. Including 2 components and the first component is Image/ Video
The first image/ video component is displayed with a two-thirds ratio, while the second component is displayed with a one-third ratio.
*Note: If the first component is not an image/ video Component, all components will be displayed evenly .
ii. Including 3 components
All components are displayed evenly, regardless of their type.
Mobile version:
The components are displayed from up to down according to the component order you set.
Read more
Comments