Thumbnail Widget Setup Guide

Content:

Introduction
How to Create Thumbnail Widget
How Thumbnail Widget Appears with Different Configurations
Best Practices

Introduction

The Thumbnail Widget in Mimeeq is designed to provide a visual and grid-based display of your Option Sets or Collections. The primary benefit of the Thumbnail Widget is to display visually distinctive options like fabric and materials.

This guide will walk you through how to set up and effectively use Thumbnail Widget.

Navigate to the configurator page, open Options tab and click "New"
Select Linked or Manual as the Mode type
Select Thumbnail Widget Type
Configure the widget according to your preferences

Below is a table detailing various options for the Thumbnail Widget and their descriptions:

No.	Configuration Options	Description
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.

Single Option Set Display

If you add one Option Set to your Thumbnail Widget, it will present a grid of options from the selected Option Set. The name displayed at the top of the widget will be 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 click "Hide Section Header," this display name will be hidden and only the thumbnails will be presented, as shown in example 2 of the image.

Multiple Option Sets or Collection Display

If you add multiple Option Sets, or you add a Collection that contains multiple Option Sets, a dropdown menu will appear. Inside this dropdown, you will be able to switch between different 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 options that come from the Armadillo Option Set. Example 2 shows how the open state of the dropdown looks like, revealing the available option sets to choose from.

Image Style Options

Your widget can also have a different look depending on the selected image style. If you choose round or square thumbnail previews, they will have a different shape accordingly.

In the image, example 1 shows the square thumbnail style, providing a clean, grid-like appearance with defined edges. Example 2 demonstrates the round thumbnail style, which offers a softer look for your configurator options.

Layout and Caption Options

You can also pick the number of columns, which controls how many thumbnails will display in one row. Options include 1, 2, 3, 4, 5, 6, and "Auto". You can also control the number of columns on mobile separately. For example, it makes sense to have larger thumbnails on mobile for easier touch interaction.

If you select three or fewer columns, you have the additional option to add captions to your thumbnails, which will display a title underneath each thumbnail.

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

Keyline Visibility Options

The "Show Keyline" setting adds a thin border around each thumbnail. Keylines help separate options visually, particularly when thumbnails have colors 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, colors, and finishes.
Choose the right number of columns based on your options - fewer columns for detailed materials, more columns for simple color choices.
Use captions when option names are important for decision-making, but keep them short and clear.
Ensure all thumbnail images have similar lighting, scale, and quality for 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 aesthetic and maintain consistency.
Always test how thumbnails look on both desktop and mobile before publishing.

For more detailed information about configuring specific widgets, please refer to these dedicated help articles:

Filter Widget Setup Guide
How to Configure Widgets Using Local Settings and Global Templates

Updated on: 17/04/2025

Was this article helpful?

Thank you!