When editing the advanced page in SHOP Builder, you can add the "Category Tab" widget to enhance layout flexibility and optimize page space for displaying more products. Customers can easily switch between categories to browse products by clicking different tab buttons.
⚠️ Before you begin, please note that:
- 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.
This article will cover the following:
1. Add Category Tab Widget
Step 1
In the SHOPLINE Admin, go to [Online Store Design] > [Pages]. Click Add Page and choose Advanced Page. Or click on the "Edit" button next to the existing pages.
*Note: This feature only supports advanced pages with the label .
Step 2
Click + Widget to add a new widget.
Step 3
In the "Product" section, click Category Tab.
*Note: This widget is currently not available for the Shopper App.
Step 4
You can choose to display product categories or specific products according to your needs. Click + Category Tab or + Product Tab to add a tab button.
*Notes:
One "Product Tab" button can add up to 20 products.
One "Category Tab" button can display up to 20 products. To view more products, customers can click the "Show more" button below. One advanced page can add up to 10 product categories.
Step 5
After adding tab buttons, please refer to the following table for content and style settings.
Tab Title |
You can enter the tab title, up to 40 characters. |
Product |
Click the |
Tab Style |
You can select from three tab styles: "Underline," "Filled," or "Outline," and customize the button alignment and font size. If you choose "Filled" or "Outline" style, you can adjust the "Corner Radius". |
Widget Title |
Enter the widget title and choose the alignment format for the title's text. |
|
Product Per Row and Image Proportion |
Select 3:4 or 1:1 for the proportions of product images. You can set up to 6 products per row in the desktop version, and up to 3 products per row for the mobile version. You can select between "Button" and "Dots" for the style for browsing the product slider. For more details on the "Product Slider Widget" component, please refer to: Product Slider Widget. |
Step 6
For the next three settings, please refer to the table below.
| Show Hidden Products |
Choose whether to show Hidden Products. The toggle is switched off by default (the Hidden Products will be not displayed). If a tab contains over 20 products, customers can click "Show more" to enter the full category page. If the feature is disabled, the button is hidden and only the first 20 products are shown. |
Show Button |
Choose whether to show the "Show more" button. The toggle is switched on by default. If enabled:
|
Padding |
The widget's upper, lower, and all-side paddings are adjustable:
|
Step 7
After completing the aforementioned settings, click Save to show the preview in the right section. Click the icon to switch between the desktop and mobile versions.
Step 8
Click Preview Page to view if everything is correct. Then, click Publish to publish the advanced page.
2. Storefront display
The different tabs are displayed on the storefront according to your category tab setup. Customers can select different tabs to view products.
Desktop version:
Comments