[Coming Soon] Category Widget | Page Builder (New)

_____35.png

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 themes.
  • After creating a page using the new page builder, the page can still be displayed even if you switch to other themes, 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.

11.png

 

Step 2

Click the Widget button.

Screen_Shot_2022-08-01_at_4.47.14_PM.png

Step 3

Click the Category widget under "Product".

Screen_Shot_2022-08-02_at_4.23.30_PM.png

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.

Screen_Shot_2022-08-02_at_4.51.45_PM.png

 

Click on a "Category" widget and click the + Category button.

Screen_Shot_2022-08-02_at_4.55.59_PM.png

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.

Screen_Shot_2022-08-02_at_5.02.05_PM.png

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.

Screen_Shot_2022-08-02_at_5.06.07_PM.png

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.
  •  

Screen_Shot_2022-08-02_at_5.14.18_PM.png

 

Step 6

Enter the section title and adjust the text alignment (Left/ Center/ Right).

Screen_Shot_2022-08-02_at_5.19.25_PM.png

 

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.
  •  

Screen_Shot_2022-08-02_at_5.39.27_PM.png

 

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.

Screen_Shot_2022-08-02_at_5.46.21_PM.png

Screen_Shot_2022-08-02_at_5.47.35_PM.png

 

Or click the Preview button at the top right to view the complete storefront.

Screen_Shot_2022-08-02_at_5.50.39_PM.png

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.

Screen_Shot_2022-08-02_at_5.52.56_PM.png

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments