Image swatch settings

Overview #

The Image Swatch Settings are core theme settings that control the global appearance of image swatches across the shop. Image swatches visually represent product variants, such as different colors or styles, using images. These settings are applied globally but can be overridden at the section or block level. Image swatches will display the thumbnail set for each variant option. If an option does not have an associated image, it will appear empty. Image swatches will override color swatches if both types are used.

Key components and functionality #

Display swatch image

This setting allows you to enable or disable the display of image swatches for product variants. When enabled, image swatches will show the thumbnail set for each variant option. The default value is false.

Style swatch image

This setting determines the style of the image swatches. You can choose from several options to best fit your theme's design:

1. Default
2. Circle
3. Landscape
4. Portrait
5. Square
6. Widescreen

The default style is square.

Column count swatch image desktop

This setting specifies the number of columns used to display image swatches on desktop devices. You can choose a value between 1 and 8, with the default being 4.

Column count swatch image mobile

Similar to the desktop setting, this determines the number of columns for image swatches on mobile devices. The range is from 1 to 8, with a default of 4. This allows for flexibility in displaying swatches differently on mobile devices, which may require different layouts due to screen size constraints.

Options swatch image

This setting allows you to specify the option names for image swatches. It is important to ensure that the option names correspond to the variant options you wish to display as image swatches.

Usage examples #

1. Enabling image swatches: You might consider enabling the Display swatch image setting to showcase product variants using images, enhancing the shopping experience by providing a visual representation of each variant.

2. Customizing swatch style: Depending on your theme's design, you might consider selecting a style such as "Circle" for a modern look.

3. Adjusting column count: Depending on the number of variants and the layout of your product pages, you might consider adjusting the column count for both desktop and mobile to ensure the swatches are displayed neatly and are easy to navigate.

By configuring these settings, you can create a visually appealing and user-friendly interface for displaying product variants, ultimately improving the shopping experience for your customers.