Collection tabs

The Collection tabs section allows you to display a single-row carousel showcasing selected collections (maximum of 3).

This section is ideal for highlighting different product categories, such as seasonal collections or bestsellers, while maintaining an organized and visually appealing layout. It provides easy access to multiple collections in a compact format.

1, How to add section in theme editor:

1

In your theme editor (Customize), scroll to the bottom of the template and select Add section.

2

In the list, locate and select Collection tabs section. The section will now be added to your page, ready for customization.

2, Section settings

• General settings

  • Maximum products to show: Specify the maximum number of products to display per collection: from 2 to 12 products.

  • Products per row on desktop: Define how many products are displayed per row on desktop: from 2 to 4 produtcs

• “View all” card:

  • Enable "View all" link if collection has more products than shown: When enabled, a View all card appears at the end of the product list if the collection contains more products than displayed. Clicking the View all card redirects users to the full collection page.

  • Image overlay opacity: Adjust the transparency of the overlay on the View all card for better visibility of text.

  • Overlay style: Choose the overlay style to enhance text readability and overall design: Gradient from bottom, Gradient from top, Full image darken.

• Product card settings:

  • Image ratio: Select the aspect ratio for product images: Portrait, Square & Adapt to image. Ensure product images use a uniform aspect ratio for a polished look.

  • Show product rating: Enable to display the product’s rating (requires product rating integration).

  • Show color swatches: Display available color swatches beneath product images for easy browsing.

  • Enable quick add button: Activate a Quick add button for users to view product details and add to their cart without navigating to the product page.

• Mobile layout:

  • Products per row on mobile : Specify how many products appear per row on mobile devices: 1 product or 2 products.

  • Enable swipe on mobile: If enabled, products exceeding the row limit will be displayed in a swipeable carousel format.

3, Collection block settings:

• Collection: Choose a specific collection to display in the carousel.

• Heading: Enter a custom heading for the selected collection. If left blank, the default collection name will be displayed.

• Hide unavailable products: Enable to hide products that are out of stock or unavailable (e.g., price = 0).