Product tabs

Product tabs puts several product lists in one place, one per tab, such as New arrivals, Bestsellers and Gifts. Customers switch tabs without leaving the page, and the products rise into place as each tab opens.

Find it in the editor

On the home page, it is in the Template list. To add it to any page, click Add section and choose Product tabs. Each tab is a Collection block inside it.

Section settings

General

Setting	Description
Color scheme	The colors of this section. Schemes are edited in Theme settings → Colors.

Layout

Setting	Description
Layout	Carousel keeps each tab's products in one row that customers swipe or scroll; Grid shows them all at once, in rows.

Section header

Setting	Description
Subheading	A short line above the heading, with a small dash beside it.
Heading	The heading. Leave it empty to hide it.
Heading size	Medium or Large. Shown when the heading has text.
Backdrop word	A large outlined word behind the heading. One short word works best; it sizes itself to fit.
Description	A short text under the heading.
Alignment	Aligns the header to the left, center or right. The row of tabs follows it.
Alignment on mobile	The alignment below 768px. Same as desktop keeps the alignment above.
Header width	How wide the heading and description may run: Narrow, Medium, Wide or Full width.

Products

Setting	Description
Products per tab	How many products each tab shows at most (2–12). The page loads this many for every tab, so keep it modest when you have many tabs.
Columns on desktop	How many products fit in a row on a large screen (2–5).
Small screens	Below 1024px, a grid can become a Carousel, stay as 2 columns, or stack as 1 column. Shown when Layout is Grid.
Columns on mobile	How many products fit across a phone in a carousel: 1, or 1.2 (a peek), which shows part of the next product.
Grid spacing	The space between products (8–48px).

Product cards

These change the product cards of this section only. Use theme setting follows Theme settings → Product cards.

Setting	Description
Image ratio	The shape of the product pictures: Square (1:1), Portrait (3:4) or Adapt to image.
Text alignment	Lines the card's text up on the Left, Center or Right.
Vendor	Show or Hide the vendor.
Product rating	Show or Hide the star rating.
Quick view	Show or Hide the quick view button.
Second image on hover	Show or Hide the second picture when the pointer is on a card.

Carousel

These settings show when the section is a carousel on any screen.

Setting	Description
Show arrows	Shows the previous and next arrows.
Show dots	Shows a row of dots under the carousel, one for each position.

Button

Setting	Description
Button label	The text of the button under the products, for example View all. It opens the open tab's collection, and shows on tabs that use a collection. Leave it empty to hide it.
Button style	Solid or Outlined. Shown when the button has a label.
Alignment	Aligns the button to the left, center or right. Shown when the button has a label.
Alignment on mobile	The alignment below 768px. Same as desktop keeps the alignment above. Shown when the button has a label.

Section spacing

Setting	Description
Use custom spacing	Gives this section its own top and bottom spacing. Off, it uses Section spacing from Theme settings → Layout.
Top spacing	Space above the section (0–200px). Phones get 60% of it and tablets 80%. Shown when Use custom spacing is on.
Bottom spacing	Space below the section (0–200px). Phones get 60% of it and tablets 80%. Shown when Use custom spacing is on.

Blocks

Collection

One tab. Add tabs with Add Collection under the section in the sidebar, and drag them to change their order.

Setting	Description
Collection	The collection whose products the tab shows.
Products	Products chosen by hand. When you choose some, they replace the collection.
Tab label	The tab's name. Leave it empty to use the collection's title.