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.
How to create a Thumbnail Widget
Navigate to the configurator page, open the Options tab and click New.
Select Linked or Manual as the Mode type.
Select the Thumbnail widget type.
Configure the widget according to your preferences.
1
Name
The Option Block Name that will be visible to customers.
2
Mode
Select either Linked or Manual. Linked means it will be connected to an existing Option Set or Collection. Manual means you will create an Option Set specifically for this configurator only.
3
Option Set Source
Select either Collection or Option Set to define where the thumbnail options will come from.
4
Widget Type
Select Thumbnail to create a visual, grid-based display of options.
5
Widget Source
Define if settings come from Global Template or Local Settings.
6
Number of columns
Define how many thumbnails will appear in each row on desktop.
7
Number of columns on mobile
Define how many thumbnails will appear in each row on mobile devices.
8
Show Caption
If enabled, shows the name of each individual option as a text caption beneath its thumbnail.
9
Show Keyline
Adds a border around each thumbnail. This is useful when thumbnails might blend with the background.
10
Image Style
Choose between Square or Round thumbnails depending on your preferred design.
11
Add Option Set
After configuring the widget settings, click the Add button to add an Option Set to this widget.
12
Hide Section Header
When enabled, hides the header text above the thumbnails.
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.
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.
Image style options
The selected image style changes the shape of the thumbnails:
1
Square
A clean, grid-like appearance with defined edges
2
Round
A softer look for your configurator options
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.
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.
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
Last updated
Was this helpful?