> 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/collections/collection-list-thumbnails.md).
# Collection: Thumbnails
A compact collection navigator built from small thumbnail cards. Show them as a scrollable carousel or a static grid — handy for a "Shop by category" strip.
***
## Settings
### 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. |
| Alignment | Horizontal alignment of the thumbnail group. |
| Layout | Show the thumbnails as a static grid or a scrollable carousel. |
| Enable swipe on mobile | Allow touch-swipe scrolling on mobile. Grid layout only. |
### Gap
| Setting | Description |
| ------- | ------------------------------------------- |
| Desktop | Spacing between thumbnail cards on desktop. |
| Mobile | Spacing between thumbnail cards on mobile. |
### Collection card
| Setting | Description |
| ------- | ------------------------------------------------------------------------------------------------------------------- |
| Layout | **Horizontal** — Image on the left, title on the right, in a pill-style card. **Vertical** — Image above the title. |
| Gap | Space between the image and title inside each card. |
| Padding | Inner padding of horizontal cards. |
### Collection image
| Setting | Description |
| -------------------- | ----------------------------------------------------------------------------- |
| Desktop width | Width of the thumbnail image on desktop. |
| Mobile width | Width of the thumbnail image on mobile. |
| Image ratio | Image shape for the horizontal card layout. |
| Image ratio | Image shape for the vertical card layout. |
| Corner radius | Shape of the thumbnail image corners. Vertical layout only. |
| Custom corner radius | Set an exact corner radius. Only visible when Corner radius is set to Custom. |
{% hint style="success" %}
**Image tip:** Upload square collection images that are large enough to stay sharp on high-resolution screens, since thumbnails are shown at a small size.
{% endhint %}
### Collection title
| Setting | Description |
| -------------- | ----------------------------------------------------------------- |
| Font | Which type style to use for the collection name. |
| HTML tag | Semantic tag for the title. Use headings to help with SEO. |
| Font size | Title size. Available when Font is set to a heading style. |
| Font size | Title size. Available when Font is set to a body or accent style. |
| Letter spacing | Spacing between letters. Available for the body or accent styles. |
### Collection appearance
Applies to the horizontal card layout only.
| Setting | Description |
| -------------------- | ----------------------------------------------------------------------------- |
| Border thickness | Border around each card. |
| Corner radius | Shape of the card corners. |
| Custom corner radius | Set an exact corner radius. Only visible when Corner radius is set to Custom. |
| Shadow | Drop shadow on each card. |
### Navigation
Carousel layout only.
| Setting | Description |
| -------- | ---------------------------------------------------- |
| Style | Visual style of the navigation buttons. |
| Icon | Icon shown on the navigation buttons. |
| Behavior | Whether the buttons appear on hover or stay visible. |
### Background
| Setting | Description |
| ----------------------- | ------------------------------------------------------------------------------ |
| Media | The type of background media behind the section. |
| Video | Background video. Only visible when Media is set to Video. |
| Image | Background image. Only visible when Media is set to Image. |
| Mobile Image (optional) | Separate background image for mobile. Only visible when Media is set to Image. |
| Overlay | Adds a color layer over the background media. |
| Overlay color | Color and opacity of the overlay. |
| Parallax effect | Scroll motion applied to the background media. |
### Appearance
| Setting | Description |
| ------------ | ----------------------------- |
| Color scheme | Color scheme for the section. |
### Spacing
| Setting | Description |
| ----------------- | -------------------------------------------------- |
| Top / Bottom | Outer spacing above and below the section. |
| Custom for mobile | Set independent top and bottom padding for mobile. |
***
## Available Blocks
### Collection
A single thumbnail card. Add one block per collection.
| Setting | Description |
| ------------ | ------------------------------------------------------------ |
| Collection | The collection this card links to. |
| Custom title | Overrides the collection name on the card. |
| Custom link | Sends the card somewhere other than the collection page. |
| Type | What fills the thumbnail — an **Image** or a flat **Color**. |
| Image | The uploaded thumbnail image, when Type is Image. |
| Color | The flat thumbnail color, when Type is Color. |
***
{% hint style="info" icon="headset" %}
**Need help?**
Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.
Chat with us Submit a ticket
{% endhint %}