[Coming Soon] Product Image and Text Widget & Product List Widget|SHOP Builder

1. EC (EN).png

9.png

By adding or editing the "Product Image and Text" widget and "Product List" widget, you can add images and descriptions to your store. Also, you can customize the widgets and create the storefront layout that best suits your store, attracting more views and visits from customers.

⚠️ Before you start, please note that:

  • These features are only supported in One-Page Store.
  • SHOP Builder currently supports Ultra Chic, Kingsman, Varm, and Philia theme templates. If you switch to other templates, the One-Page Store will be unavailable.

This article will cover the following:

 

1. Product Image and Text widget

Step 1

Follow the steps for product and store layout setup in One-Page Store. Then click Product Image and Text.

\1.png

 

Step 2

You can choose to add a "Product", "Image" or "Text" widget.

*Note: Supports adding up to 4 widgets. You can use different combinations
or multiple similar widgets.

For instance:
1. Product x4
2. Image x3 + Text x1
3. Product x2 + Image x2

2.png

 

i. Product

Step 1. Click open the "Product" drop-down list and click +Product.

3.png

 

Step 2. Select a product, and click Confirm.

*Note: Product sets are currently not supported.

4.gif

 

ii. Image

Click open the "Image" drop-down list, and select to add a desktop or mobile image. Then, configure the ALT text of the image.

5.png

 

iii. Text

Click open the "Text" drop-down list. Enter the title, subtitle, and content. You can also adjust the heading tags, bolding, and hyperlinks.

6.png

 

*Note: If you would like to learn more about heading tags, please refer to: Setting Store Heading Tags.

7.png

 

Step 3

Adjust margin and text alignment, and choose whether to show product summary and hidden products. Upon completion, click Save to save all the changes.

  • Padding: You can adjust the margin between the image and text and the page.
  • Text alignment: You can choose left, center, or right alignment.
  • Show product summary: Switch on the toggle to show product summaries. Switch off to hide them.
  • Show Hidden Products: Switch on the toggle to show hidden products. Switch off to hide them.

8.png

 

Step 4

After saving, you can preview the content on the right. You can also click the Preview Page button on the top right to view the complete storefront.

9.png

 

Step 5

After you complete and confirm all the above-mentioned settings, click Publish. Your customer will then be able to view the changes made in this One-Page Store.

10.png

 

 

2. Product List widget

Step 1

Follow the steps for product and store layout setup in One-Page Store. Then click Product List.

11.png

 

Step 2

You can choose to add a "Product" or " Category" widget.

12.png

 

Step 3

i. Product

13.png

 

Step 1. Select up to 40 products. Then, click Next.

*Note: Product sets are currently not supported.

14.png

 

Step 2. Drag the products to resort the order. Click Confirm when you're done.

15.gif

 

Step 3. The selected products will be displayed on the left bar. You can click the pencil icon  截圖 2024-04-30 08.02.54.png to edit or the trash bin icon 截圖 2024-04-30 06.34.54.png to delete.

16.png

 

ii. Category

17.png

 

Step 1. Select a product category. Then, click Next.

*Note: A maximum of 40 products can be displayed. If the category contains more than 40 products, the products closer to the back will not be displayed in the One-Page Store.

18.png

 

Step 2. The selected category will be displayed on the left bar. you can click the pencil icon  截圖 2024-04-30 08.02.54.png to edit or the trash bin icon 截圖 2024-04-30 06.34.54.png to delete.

19.png

 

Step 4

Set the title, text alignment, products per row, and margin. Then, choose whether to show the product summary and hidden products. After setting, click Save to save all the changes.

  • Title: Enter the title of the category, and set the heading tag for the text.
  • Text alignment: You can choose left, center, or right alignment.
  • Product Per Row: The number of rows (horizontally) in the category, only available for the desktop version.
  • Padding: You can adjust the margin between the image and text and the page.
  • Show product summary: Switch on the toggle to show product summaries. Switch off to hide them.
  • Show Hidden Products: Switch on the toggle to show hidden products. Switch off to hide them.

20.png

 

Step 5

After saving, you can preview the content on the right. You can also click the Preview Page button on the top right to view the complete storefront.

21.png

 

Step 6

After you complete and confirm all the above-mentioned settings, click Publish. Your customer will then be able to view the changes made in this One-Page Store.

22.png

 

 

 

 

 

Read more

 

 

 

 

 

 

Have more questions? Submit a request

Comments