> For the complete documentation index, see [llms.txt](https://help.mimeeq.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.mimeeq.com/configurator/options-and-widgets/thumbnail-widget.md).

# Thumbnail Widget

Show fabrics, materials and finishes as a clear visual grid. Learn how to set up the Thumbnail Widget and customise its layout, captions and style.

The Thumbnail Widget displays your Option Sets or Collections as a visual, grid-based layout. It works best for visually distinctive options like fabrics and materials.

![Thumbnail Widget showing a grid of fabric swatches in the configurator](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FLqKPj8NTBOP8CLw4UW40%2Fthumbnail-11_1725rel.png?alt=media)

***

## How to create a Thumbnail Widget

1. Navigate to the configurator page, open the **Options** tab and click **New**.
2. Select **Linked** or **Manual** as the **Mode** type.
3. Select the **Thumbnail** widget type.
4. Configure the widget according to your preferences.

<table><thead><tr><th width="60.375">#</th><th width="223.44921875">Configuration option</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td><strong>Name</strong></td><td>The Option Block Name that will be visible to customers.</td></tr><tr><td>2</td><td><strong>Mode</strong></td><td>Select either <strong>Linked</strong> or <strong>Manual</strong>. <strong>Linked</strong> means it will be connected to an existing Option Set or Collection. <strong>Manual</strong> means you will create an Option Set specifically for this configurator only.</td></tr><tr><td>3</td><td><strong>Option Set Source</strong></td><td>Select either <strong>Collection</strong> or <strong>Option Set</strong> to define where the thumbnail options will come from.</td></tr><tr><td>4</td><td><strong>Widget Type</strong></td><td>Select <strong>Thumbnail</strong> to create a visual, grid-based display of options.</td></tr><tr><td>5</td><td><strong>Widget Source</strong></td><td>Define if settings come from Global Template or Local Settings.</td></tr><tr><td>6</td><td><strong>Number of columns</strong></td><td>Define how many thumbnails will appear in each row on desktop.</td></tr><tr><td>7</td><td><strong>Number of columns on mobile</strong></td><td>Define how many thumbnails will appear in each row on mobile devices.</td></tr><tr><td>8</td><td><strong>Show Caption</strong></td><td>If enabled, shows the name of each individual option as a text caption beneath its thumbnail.</td></tr><tr><td>9</td><td><strong>Show Keyline</strong></td><td>Adds a border around each thumbnail. This is useful when thumbnails might blend with the background.</td></tr><tr><td>10</td><td><strong>Image Style</strong></td><td>Choose between <strong>Square</strong> or <strong>Round</strong> thumbnails depending on your preferred design.</td></tr><tr><td>11</td><td><strong>Add Option Set</strong></td><td>After configuring the widget settings, click the <strong>Add</strong> button to add an Option Set to this widget.</td></tr><tr><td>12</td><td><strong>Hide Section Header</strong></td><td>When enabled, hides the header text above the thumbnails.</td></tr></tbody></table>

![Thumbnail Widget settings in the configurator Options tab](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FXwhwcQFKpICKjIZthM7m%2Fsettings-image-32_u6uv5i.png?alt=media)

***

## How the Thumbnail Widget appears with different configurations

### Single Option Set display

If you add one Option Set to your Thumbnail Widget, it presents a grid of options from the selected Option Set. The name at the top of the widget is the name of the Option Block.

In example 1 of the image below, "Seat Finishes" is the name of the Option Block, which appears as the section header above the grid of fabric swatches.

If you enable **Hide Section Header**, this display name is hidden and only the thumbnails are presented, as shown in example 2.

![Single Option Set with section header (1) and with the header hidden (2)](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FMsD4mDdNJ8J7cub9pWMX%2Fthumbnail-21_1amkhzm.png?alt=media)

### Multiple Option Sets or Collection display

If you add multiple Option Sets, or a Collection that contains multiple Option Sets, a dropdown menu appears. Use this dropdown to switch between Option Sets.

In this case, "Armadillo" and "Wool" are names of individual Option Sets, while "Seat Finish" is the Option Block Name. You can hide this header if desired.

In the image, example 1 shows the selected "Armadillo" Option Set with its options. Example 2 shows the open dropdown, revealing the available Option Sets to choose from.

![Thumbnail Widget with the Armadillo Option Set selected (1) and the Option Set dropdown open (2)](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FiZNBWbro39N3X7s1kPEJ%2Fthumbnail-31_1a5gf3w.png?alt=media)

### Image style options

The selected image style changes the shape of the thumbnails:

| # | Image style | Look                                             |
| - | ----------- | ------------------------------------------------ |
| 1 | **Square**  | A clean, grid-like appearance with defined edges |
| 2 | **Round**   | A softer look for your configurator options      |

![Square thumbnail style (1) and round thumbnail style (2)](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2F9BFSg0a1VFPZPcc8BQFC%2Fthumbnail-41_1rt89or.png?alt=media)

### Layout and caption options

The number of columns controls how many thumbnails display in one row. Options are 1, 2, 3, 4, 5, 6 and **Auto**. You can set the number of columns on mobile separately. For example, larger thumbnails on mobile make touch interaction easier.

If you select three or fewer columns, you can also add captions, which display a title underneath each thumbnail.

In the image, example 1 shows a six-column layout, a compact view with more options visible at once. Example 2 shows a three-column layout with captions, offering larger thumbnails with text underneath.

![Six-column layout (1) and three-column layout with captions (2)](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2F1BDWYgyV1HdYco4jA8zx%2Fthumbnail-51_zgdd9y.png?alt=media)

### Keyline visibility options

**Show Keyline** adds a thin border around each thumbnail. Keylines help separate options visually, particularly when thumbnails have colours or patterns that might blend with the background.

In the image, example 1 shows thumbnails with keylines, creating clear boundaries between options. Example 2 shows thumbnails without keylines.

![Thumbnails with keylines (1) and without keylines (2)](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FXPcCN8psiujJLnEuagrU%2Fthumbnail-61_9ipfds.png?alt=media)

***

## Best practices

* Thumbnail Widgets work best for visually distinctive options like fabrics, colours and finishes.
* Choose the number of columns based on your options: fewer columns for detailed materials, more columns for simple colour choices.
* Use captions when option names are important for decision-making, but keep them short and clear.
* Make sure all thumbnail images have similar lighting, scale and quality for a professional appearance.
* Add keylines when thumbnails might blend with backgrounds or with each other.
* For multiple Option Sets, group them logically to help customers navigate choices more intuitively.
* Choose round or square thumbnails based on your overall design and keep it consistent.
* Always test how thumbnails look on both desktop and mobile before publishing.

***

## Related articles

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Local &#x26; Global Templates</strong></td><td>Share widget settings across configurators or customise them per product.</td><td><a href="/configurator/options-and-widgets/local-and-global-templates.md">Local &amp; Global Templates</a></td></tr><tr><td><strong>Filter Widget</strong></td><td>Help customers filter large material collections with tags.</td><td><a href="/configurator/options-and-widgets/filter-widget.md">Filter Widget</a></td></tr><tr><td><strong>Colour Picker Widget</strong></td><td>Let customers pick any colour or choose from presets.</td><td><a href="/configurator/options-and-widgets/colour-picker-widget.md">Colour Picker Widget</a></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.mimeeq.com/configurator/options-and-widgets/thumbnail-widget.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.