Category Widget | Page Builder (New)


When using the new page 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:

  • The new page builder currently only supports Ultra Chic, Kingsman and Varm theme templates.
  • After creating a page using the new page 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 4 categories can be added. Tap the  Category_CN_4-1.png 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 web and mobile versions individually.
  • Category Name Alignment: You can select your category name alignment (Left/Center/Right).
  • Padding: You can adjust the padding between the category widget and the page.



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






Have more questions? Submit a request