> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/products/product-list.md). # Featured collection Show products from a collection in a grid or carousel. Add a section header and a View all button to build a complete product showcase on any page. ![Product List section overview](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-7ddc318feada37bd5b773797c7e87a2bd5f6bf7f%2Fglobal-sections-product-list-overview.png?alt=media) *** ## Settings {% hint style="info" %} Select a collection in the **Product list** block — the section has no collection picker of its own. {% endhint %} ### Layout | Setting | Description | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Width | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. | | Desktop alignment | Horizontal alignment of all blocks. | | Mobile alignment | Horizontal alignment on mobile. | ### Gap | Setting | Description | | ------------- | ------------------------------------------- | | Gap — Desktop | Vertical spacing between blocks on desktop. | | Gap — Mobile | Vertical spacing between blocks on mobile. | ### Background | Setting | Description | | ---------------- | ------------------------------------------------------------------------------------- | | Background media | Background media type, such as none, an image, or a video. | | Image | Section background image. | | Image — Mobile | Separate background image for mobile viewports. | | Video | Shopify-hosted background video. Autoplays muted. | | Show overlay | Color layer over the background media. | | Overlay color | Color and opacity of the overlay. | | Parallax effect | Scroll effect for the background media, such as fixed, vertical, horizontal, or zoom. | ### Appearance | Setting | Description | | ------------ | ---------------------------------------- | | Color scheme | Background color scheme for the section. | ### Spacing | Setting | Description | | ----------------------- | -------------------------------------------------------- | | Padding top / bottom | Outer spacing above and below the section. | | Custom padding — Mobile | Override desktop padding with independent mobile values. | *** ## Available Blocks This section is built from three static blocks — **Header**, **View all button**, and **Product list** — plus optional **Promo card** blocks inside the list. ### Header Section header block. Add **Subheading**, **Heading**, and **Text** child blocks inside it — see [Header](/helix/theme-blocks/basic/header.md). ### View all button In this section the button links automatically to the collection selected in the Product list block, so the **Link** and **Open link in new tab** settings are hidden. | Setting | Description | | ------------- | ------------------------------------------------------------------ | | Label | The button text. | | Style | Button style. Set separately for desktop and mobile. | | Height | Button height. Set separately for desktop and mobile. | | Full width | Stretches the button to fill the available width. Mobile only. | | Show icon | Adds an icon to the button. Set separately for desktop and mobile. | | Icon | Which icon to show. | | Icon position | Places the icon before or after the label. | | Icon size | Icon size, with a **Custom icon size** value when set to Custom. | ### Product list | Setting | Description | | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | Collection | The collection to pull products from. | | Max products | How many products to show. | | Type | **Grid** or **Carousel**. The settings below change with this choice. | | Desktop columns / Mobile columns | Number of cards per row on each device. | | Enable swipe on mobile | Lets the cards scroll horizontally on mobile. Grid only. | | Show next slide preview on desktop | Reveals part of the next card to hint that it can be swiped. Carousel only. | | Custom columns | Set the column count per breakpoint yourself, via **Columns per breakpoint**. | | Gap — Horizontal / Vertical | Spacing between cards, with independent mobile values. Grid only. | | Gap — Desktop / Mobile | Spacing between cards in carousel mode. Carousel only. | | Show navigation on desktop | Previous / next arrows, with **Position**, **Style**, **Icon**, and **Behavior**. Carousel only. | | Show pagination on desktop | Slide indicators, with **Type**, **Top padding**, and an optional **Limit width** / **Max width** cap on the progress bar. Carousel only. | | Auto-rotate slides | Advances the carousel automatically, at a set **Speed**, and can **Pause on hover**. Carousel only. | Product card design is set on the **Product card** block inside the list, together with the global [Product cards](/helix/theme-settings/product-cards.md) theme settings. #### Promo card Added inside the Product list block. Inserts a promotional card among the product cards. | Setting | Description | | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | | Card position | Where the card sits among the product cards. | | Desktop columns / Mobile columns | How many columns the card spans. | | Show promo card on top (mobile) | Moves the card above the products on mobile. | | Card link / Open link in new tab | Wraps the whole card in a link. | | Media type | **Image** or **Video** background. | | Image / Mobile Image (optional) / Video | The card's background media. | | Overlay / Overlay color | A color layer over the media, to keep text legible. | | Subheading / Heading / Text | The card's copy. | | Alignment / Position | Horizontal alignment and vertical position of the content. | | Separate button | Pushes the button to the bottom, away from the rest of the content. | | Heading size / Text size | Type sizes for the heading and the text. | | Button | **Label**, **Style**, **Height**, **Full width**, and icon settings (Show icon, Icon, Icon position, Icon size). | | Content gap / Button spacing | Spacing between the content blocks, and above the button. | | Color scheme | Color scheme for the card. | | Padding | Top and bottom, left and right, with independent mobile values via **Custom for mobile**. |