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

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