Articles on: Configurator

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.

Thumbnail Widget Example

How to Create 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 OptionsDescription
1.NameThe Option Block Name that will be visible to customers.
2.ModeSelect 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 SourceSelect either "Collection" or "Option Set" to define where the thumbnail options will come from.
4.Widget TypeSelect "Thumbnail" to create a visual, grid-based display of options.
5.Widget SourceDefine if settings come from Global Template or Local Settings.
6.Number of columnsDefine how many thumbnails will appear in each row on desktop.
7.Number of columns on mobileDefine how many thumbnails will appear in each row on mobile devices.
8.Show CaptionIf enabled, shows the name of each individual option as a text caption beneath its thumbnail.
9.Show KeylineAdds a border around each thumbnail. This is useful when thumbnails might blend with the background.
10.Image StyleChoose between "Square" or "Round" thumbnails depending on your preferred design.
11.Add Option SetAfter configuring the widget settings, click the Add button to add an Option Set to this widget.
12.Hide Section HeaderWhen enabled, hides the header text above the thumbnails.


Thumbnail Widget Setup

How Thumbnail Widget Appears with Different Configurations



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.

Single Option Set Display

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.

Multiple Option Sets Display

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.

Image Style 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.

Layout and Caption 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.

Keyline Visibility Options

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?

Share your feedback

Cancel

Thank you!