Hero: Product tab section

Adding a Product tab section to your Shoplazza storefront is an easy way to showcase and categorize your inventory by collections. An effective product tab section keeps your product listings organized. It also helps your customers navigate through your collections.

This section is useful when:

• You want to showcase your product.
• You have a large inventory and you would like to display products by collections.
• You want an elegant interface that improves your customer's shopping experience.

In this article, we will demonstrate how to add a product tab section in Hero.                                

Creating a product tab section

1. From your Shoplazza Admin, go to Online Store > Themes and click the Customize button.

2. Click the Add section to see more available sections for this theme.

3. Under Additional sections, find the Products tab section and customize your configurations.

4. If you would like to reposition the Products tab section, use the Drag indicator to place anywhere on the layout.

5. In the added product tab section, use the drop-down menu to adjust the layout for mobile devices.

6. Here, you may also make layout adjustments for desktops.

7. Toggle on to enable the View more button.

8. Here you can change different savings display styles, showing amount or percentage.

Colors

1. Here you can customize the appearance of this feature by using the colour palette.

2. The Heading font menu allows you to customize the font style. You may click on Change to browse the font list.

3. Here you can customize the appearance by choosing the edges.

4. Also, you can customize the appearance of the quick shop popup by choosing the edges.

Section padding

1. The padding editor is used to generate extra space around the section you create. Activate the "linkage icon" and type a value (measured in pixels) in any of the 4 columns to add buffers around the section or you may manually adjust each input by disabling the "linkage icon" in the centered area.

2. The screenshot below is an example of using 100px spacing on each side.

3. Here, you can select to preview on desktop or mobile.

Editing your Product tab section

1. Refer back to the main editing page and edit your collections separately in each block.

2. Here, you can assign a collection and edit the title displayed.