Product list: Tab
To add this section, please follow the below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Product list: Tab".
Section settings
Collection
Which collection you want to display products from.
Type
Choose how your product collection is displayed:
Slide: Products appear in a horizontal scrollable slider.
Grid: Products are shown in a multi-column grid layout.
Maximum products to show
The number of products from the collection to display. Minimum: 2. Maximum: 25.
Number of columns on desktop
Determines the number of product columns on the desktop. Can be from 2 to 4, increasing arithmetically of 1.
Show navigation arrows below content on desktop
(Displayed if the Type setting is set to Slide) Displays the navigation arrows below content on desktop.
Pagination style
(Displayed if the Type setting is set to Slide) Choose layout for the pagination.
Mobile layout
Number of columns on mobile
(Displayed if the Type setting is set to Slide) Determines the number of product columns on the mobile:
1 column
1.5 columns
2 columns
Number of columns on mobile
(Displayed if the Type setting is set to Grid) Determines the number of product columns on the mobile:
1 column
2 columns
Enable swipe on mobile
(Displayed if the Type setting is set to Slide) Allow customers to swipe horizontally to view additional column blocks.
Show pagination
(Displayed if the Type setting is set to Slide) Displays the pagination for this section.
Layout
Direction
The title for this section.
Wrap
Style of the heading.
Gap
The size of the heading text:
Small
Medium
Large
Extra large
Align items
The alignment of the heading text and description within the section container:
Left - Aligns the heading and description to the left.
Center (default) - Aligns the heading and description in the center.
Right - Aligns the heading and description to the right.
Justify content
The description for this section.
Style
Color scheme
Set the color for the section.
Spacing
Desktop left padding
Determines the width of the left inner space of the section on desktop. Can be from 0px to 100px, increasing arithmetically of 2px (pixel).
Desktop right padding
Determines the width of the right inner space of the section on desktop. Can be from 0px to 100px, increasing arithmetically of 2px (pixel).
Top padding
Determines the height of the top inner space of the section. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).
Header block
Heading alignment
Select the position of the content to be either to the left, right or center of its container.
Product card block
Product
Select a product you want to display.
Color scheme
Set the color for the block.
Product media
Product
Select a product you want to display.
Image ratio
The image ratio for the product images:
Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
Square - Crops the images to use a 1:1 ratio.
Portrait - Crops the images to use a 2:3 ratio.
Show second image on hover
When the customer hovers their cursor over the product image, displays the second product image if the product has one.
Enable quick add button
Displays the quick add button that opens a popup displaying all the essential product details.
Product vendor
Product
Select a product you want to display.
Product title
Product
Select a product you want to display.
Product price
Product
Select a product you want to display.
Product space block
Padding
Controls the top and bottom inner spacing of the block. Adjustable from 0px to 150px in steps of 2px.
Product text block
Description
The description for this block.
Last updated