> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-sections/collections/collection-pills.md).

# Collection pills

The **Collection pills** section shows collections as a row of clickable pills. On desktop, hovering a pill can show the collection image.

Add the section from the section picker. The preset starts with six collection blocks. The section accepts up to 12.

### Section settings <a href="#section-settings" id="section-settings"></a>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>3 options for container</p><ul><li><strong>Fixed width</strong> (default)</li><li><strong>Stretch width</strong></li><li><strong>Full width</strong></li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Select colors from <strong>Theme settings -> Colors</strong>.</td></tr><tr><td><strong>Subheading</strong></td><td>Small text above the heading.</td></tr><tr><td><strong>Heading</strong></td><td>Title of the section. Default: "Heading". The drawn underline is on by default, with the same styles and default color as the grid banner.</td></tr><tr><td><strong>Description</strong></td><td>Text below the heading.</td></tr><tr><td><strong>Heading size</strong></td><td><p>3 options for the heading size</p><ul><li><strong>Large</strong></li><li><strong>Medium</strong> (default)</li><li><strong>Small</strong></li></ul></td></tr><tr><td><strong>Content alignment</strong></td><td><p>3 options for the content alignment</p><ul><li><strong>Left</strong></li><li><strong>Center</strong> (default)</li><li><strong>Right</strong></li></ul></td></tr><tr><td><strong>Pill style</strong></td><td><p>2 options for the pill style</p><ul><li><strong>Primary</strong></li><li><strong>Outline</strong> (default)</li></ul></td></tr><tr><td><strong>Show product count</strong></td><td>Show the number of products in each collection. Default: off.</td></tr><tr><td><strong>Show image on hover</strong></td><td>Show the collection image when the shopper hovers a pill. The hover image does not show on mobile. Default: on.</td></tr><tr><td><strong>Hover image ratio</strong></td><td><p>4 options for the hover image</p><ul><li><strong>Adapt to image</strong></li><li><strong>Square</strong></li><li><strong>Portrait</strong> (default)</li><li><strong>Landscape</strong></li></ul></td></tr><tr><td><strong>Horizontal scroll</strong></td><td>On mobile, the pills scroll sideways. Default: off.</td></tr><tr><td><strong>Show divider</strong></td><td>Toggles the visibility of a horizontal divider line within the section. Default: off.</td></tr></tbody></table>

#### Section padding <a href="#section-padding" id="section-padding"></a>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Top</strong></td><td>Customize the top margin of the section, from 0 to 100 px. Default: 48 px.</td></tr><tr><td><strong>Bottom</strong></td><td>Customize the bottom margin of the section, from 0 to 100 px. Default: 48 px.</td></tr></tbody></table>

### Block settings (per pill) <a href="#block-settings" id="block-settings"></a>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Collection</strong></td><td>The collection the pill links to. A pill without a collection has no link.</td></tr><tr><td><strong>Collection title</strong></td><td>Text on the pill. Leave it empty to use the collection's title.</td></tr><tr><td><strong>Collection image</strong></td><td>Image shown on hover. If you leave it empty, the collection's own image is used.</td></tr></tbody></table>