Gallery & Swatches theme settings

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

In this article:

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

---

Video Tutorial

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.

 

Gallery

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

Default variant selector

There are two options for the variant selector:

1. Dropdown
2. Swatch

How to set up color swatches

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

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

How to set up image swatches

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

Note: Make sure to add an image to each of your variants in Shopify.

For more info, you may refer to this Shopify in-depth tutorial: https://help.shopify.com/en/manual/products/product-media/add-images-variants.

 

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)

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)

Preselect swatch

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

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 -