When using SHOP Builder to add or edit an advanced page, you can add a Category widget to display the different categories in your store to your customers and attract customers to browse specific categories of products.
⚠️ 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 Category Widget
Step 1
Proceed to SHOPLINE Admin > [Online Store Design] > [Pages] and click Advanced Page/Edit to open up the Advanced Page settings page.
Step 2
Click the Widget button.
Step 3
Click the Category widget under "Product".
Step 4
The system sets three categories by default; you can also add or delete categories. Click the + Category to add categories; up to 8 categories can be added. Click on the bin icon next to any category to delete that category.
Click on a "Category" widget and click the + Category button.
In the pop-up window, you select which products you would like to include in the category. You can also search products by category name. Once the product category is selected, click Confirm.
Step 5
Once a product category is added, you can upload images for web and mobile versions separately.
*Note: Please upload images with a width greater than 2000 px for the web version and 1080 px for the mobile version.
Once the image is added, you can continue editing image-related settings at the bottom.
- Image Cropping: Select which part of the image to crop (Top left/ Top center/ Top right/ Middle left/ Middle center/ Middle right/ Down left/ Down center/ Down right)
- Image Alt Text: Enter the image alt text. Use a sentence to describe the contents of the image to help the search engine recognize the image. Please refer to this article for more information related to image Alt text.
Step 6
Enter the section title and adjust the text alignment (Left/ Center/ Right).
Step 7
Other settings are supported. You can adjust the following:
- Image proportions: You can set your image proportions for desktop and mobile versions individually.
- Category Name Alignment: You can select your category name alignment (Left/Center/Right).
- Product Category Per Row: You can choose the number of categories displayed per row, with up to 8 categories per row for the desktop version and up to 4 categories per row for the mobile version.
- Padding: You can adjust the padding between the category widget and the page. For a more detailed introduction to the settings of the padding, please refer to Category Widget｜SHOP Builder.
Step 8
When setting up, you can click the Save button on the bottom, and a preview screen of the added video widget will display on the right.
*Note: You can preview from the web and mobile versions.
Or click the Preview button at the top right to view the complete storefront.
Step 9
Once the above is completed, click the Publish button, and customers will be able to see the added content on this page at the storefront.
Read more
- Product Slider Widget | SHOP Builder
- Product List Widget | SHOP Builder
- Product With Text Widget | SHOP Builder
Comments