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.
\
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
i. Product
Step 1. Click open the "Product" drop-down list and click +Product.
Step 2. Select a product, and click Confirm.
*Note: Product sets are currently not supported.
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.
iii. Text
Click open the "Text" drop-down list. Enter the title, subtitle, and content. You can also adjust the heading tags, text color, font size, bolding, and hyperlinks.
*Notes:
-
If you would like to learn more about heading tags, please refer to: Setting Store Heading Tags.
- 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.
- Currently, Shopper App does NOT support customization of the widget's text color and font size.
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.
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.
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.
2. Product List widget
Step 1
Follow the steps for product and store layout setup in One-Page Store. Then click Product List.
Step 2
You can choose to add a "Product" or " Category" widget.
Step 3
i. Product
Step 1. Select up to 40 products. Then, click Next.
*Note: Product sets are currently not supported.
Step 2. Drag the products to resort the order. Click Confirm when you're done.
Step 3. The selected products will be displayed on the left bar. You can click the pencil icon to edit or the trash bin icon
to delete.
ii. Category
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.
Step 2. The selected category will be displayed on the left bar. you can click the pencil icon to edit or the trash bin icon
to delete.
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.
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.
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.
Read more
Comments