Overview
You can add a section that displays products in one collection.
Section settings
Setting | Description |
---|---|
Section width | Set the width of the section using the drop-down menu:
|
Show top outline | Displays the top outline of the section. |
Show bottom outline | Displays the bottom outline of the section. |
Color scheme | Set the color scheme of the section using the drop-down menu:
|
Background color | Set the background of the section,visible when the Color scheme setting is set to Custom. |
Text color | Set the text of the section,visible when the Color scheme setting is set to Custom. |
Collection | The collection you want to shown. |
Layout | Choose between Grid and Carousel |
Section header | |
Heading | The heading of the section. |
Header alignment | Choose the alignment of the section heading. Options are Left and Center. |
Heading size | Set the height of heading using the drop-down menu:
|
Button label | Enter text for a button, or leave blank to hide the button entirely. |
Button style | The style of the button. Choose between Primary and Secondary. |
GRID | |
Make items the same width | Checked to make items have the same width |
Maximum products to show | The number of products from the collection to display. Minimum: 2. Maximum: 24. |
Number of columns on desktop | Number of columns to display on desktop computers. Minimum: 2. Maximum: 6. |
Number of columns on mobile | Set a specific column layout for mobile devices When Layout mobile is stacked. Choose between 1 and 2 columns. Visible when the Layout setting is set to Grid. |
PRODUCT CARD | |
Show product info | Displays the product info for each product. |
Show product rating | Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app, and metafield definitions for reviews.rating_count and reviews.rating. |
Show vendor | Displays the vendor for each product. |
Show swatch | Displays the swatch for each product. |
SECTION SPACING ADJUSTMENT | Visible on desktop view and 'Section width' is Grid. You can set global vertical space in 'Theme settings - Layout - Vertical space between sections'. |
Top | Set the top spacing of the section. |
Bottom | Set the bottom spacing of the section. |