Gallery & Swatches theme settings

How to set up your gallery and swatches settings on the Product Page.

PDP Swatches

Swatches are used to allow you to sell multiple variants of a product. In this section, you'll be able to optimize your swatches and images gallery.

In this article:

  1. How to access the Gallery & Swatches settings
  2. Show selected variant's image
  3. Default variant selector
  4. How to set up color swatches
  5. Custom color swatches
  6. How to set up image swatches
  7. Alternative selector options
  8. Swatch logic
  9. Disable Sold Out Options
  10. Preselect swatch


Let's get started!

It is important to set up your swatches correctly on the product page so it's easier for the customers to identify the variants available for that particular product. Depending on the type of product, you can set the swatches to display the colour of the variant or the image itself.


To access the Gallery & Swatches settings, go to your Theme settings → Gallery & Swatches.



The Show selected variant's image option will change the main image according to the selected variant.

Show selected variants image option



Default variant selector

There are two options for the variant selector:

  1. Dropdown
  2. Swatch

Variant selector

There's also the default variant selector which is text-only:

Text-only variant selector

How to set up color swatches

In the Color only option names textarea, enter the name of the variant options of the product.

Color only option names

Custom color swatches

With this feature, you can set a custom color to your swatches using the HEX color codes.

Let's say you want your red to be a certain tone you'll have to put in the "Custom color codes" field:

red: #EA674B

Custom color codes

How to set up image swatches

In the Image option names textarea, enter the name of the variant options of the product.

Image option namesNote: Make sure to add an image to each of your variants in Shopify.

Shopify variant imagesFor more info, you may refer to this Shopify in-depth tutorial:


Alternative selector options

Let's say you want your colour to remain swatches but would like to have the size as a dropdown, you simply enter the name of your size variant and it will do the opposite of the default variant selector.

(Click photo to enlarge)

Alternate selector options

Swatch logic

Within Booster Theme, there are 2 different swatch logics to choose from: Amazon and Aliexpress.

  1. Amazon — Amazon swatch logic allows you to select variants not greyed out, which means they are currently unavailable.
  2. Aliexpress — Aliexpress is simply the reverse, you can't select unavailable variants.

Disable Sold Out Options

You can tick this option if you don't want sold-out variants to be clickable.

(Click photo to enlarge)

Disable soldout options

Preselect swatch

This allows you to customize whether or not you want to preselect a swatch on page load.

Preselect swatch

  1. None — this will leave the variant unselected.
  2. First option — will always select the first variant.
  3. First or selected variant — will always select the first variant of all options.


- End of article -