Featured collection tabs

Featured collection tabs:

A featured collection with tabs is a user interface design element commonly used on websites, particularly in e-commerce, to showcase multiple featured collections or categories of products using tabbed navigation. The Users can click on the tabs to switch between different collections. When a tab is clicked, it displays the products or items associated with that specific category.

How to set up the Featured collection tabs section?

Navigate to customization theme. At the top of the page, click the dropdown to select the Home page template.
Select “Featured collection tabs” from the left menu.
Customize this section by using the settings described in the following table:

Customize section settings:

Settings	Description
Heading	The title for the block. Use the buttons to make the text bold or italicized, or to add an internal/external link.
Heading size	The size of the heading text. Extra extra large Extra large Large (default) Medium Small Extra small Extra extra small
Description	Display paragraph-style text in the section.
Enable “View all” button if collection has more products than shown	If the collection has more products than set in the Maximum product to show field, then this displays a “View all” button that takes the customers to the collection page.
Image	Select any image to display. Note - Image works as “Poster” if video is uploaded.
Video	Add or select your own video to the section.
Products per Tab (Desktop)	Defines how many products to show per tab on desktop.
Columns per Row (Desktop)	Sets how many product columns are shown in each row on desktop.
Columns on Mobile	Choose 1 or 2 columns for mobile view.
Grid Settings	Number of columns to display on desktop computers. Minimum: 3 , Maximum: 21
Mobile Column Breakpoint	Set the screen width at which mobile columns apply.
Color scheme	A set of colors that you can apply to this section.
Text Alignment	Align the text in the container. Choose between left (default), center, or right.
Center text on mobile	Select this checkbox to enable/disable the “Center text on mobile” option on the mobile devices.
Image ratio	The Image ratio for the product images: Adapt to image: Adapt to image should only be used when images are the same dimensions. Square(default): Crops the images to use a 1:1 ratio. Portrait: Crops the images to use a 2:3 ratio. Landscape: Crops the images to use a 3:2 ratio.
Tabs Position	Select whether tabs appear at the top or on the left side of the grid.
Tabset Alignment	Align tabs to left, center, or right (only applies if tabs are at the top).
Text Alignment (Desktop)	Aligns the heading and description on desktop (left, center, or right).
Product Image Ratio	Defines image shape: adapt, portrait, square, or landscape.
Image Text	Text displayed over the promo image (e.g. "View all")
Image Text Color	Color of the text displayed over the image.
Image Link	Adds a clickable link to the image.
Show Image	Toggles display of the promo image or video.
Show Bottom Border Under Tabs	Displays a border below the tab buttons (top layout only).
Section spacing	Add space to the top or bottom of the Section. Use the range slider to add between 0px and 100px of space to the top or the bottom of your section.

Block settings:

Settings	Description
Collection	Select any collection to display its list of products.