--- title: Gallery & Swatches theme settings description: How to set up your gallery and swatches settings on the Product Page. --- [Skip to content](https://help.boostertheme.com/knowledge/gallery-swatches-theme-settings#main-content) ![logo_white_booster-Sep-13-2022-06-54-02-62-PM.png\]](https://help.boostertheme.com/hs-fs/hubfs/logo_white_booster-Sep-13-2022-06-54-02-62-PM.png?height=36&name=logo_white_booster-Sep-13-2022-06-54-02-62-PM.png) - [Home - Help Center](https://help.boostertheme.com/knowledge) Open main navigation Close main navigation - [Home - Help Center](https://help.boostertheme.com/knowledge) - [Go to boostertheme.com](https://boostertheme.com/) [Go to boostertheme.com](https://boostertheme.com/?hsLang=en) Hello. How can we help you? - There are no suggestions because the search field is empty. 1. [Home - Help Center](https://help.boostertheme.com/knowledge?hsLang=en) 2. [In-depth Tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en) 3. [Theme settings](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#theme-settings) # Gallery & Swatches theme settings ## How to set up your gallery and swatches settings on the Product Page. [![PDP Swatches](https://help.boostertheme.com/hs-fs/hubfs/PDP%20Swatches.jpg?width=688&height=326&name=PDP%20Swatches.jpg)](https://help.boostertheme.com/hubfs/PDP%20Swatches.jpg?hsLang=en) 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. [Video Tutorial](https://help.boostertheme.com/knowledge/gallery-swatches-theme-settings#video-tutorial) 2. [How to access the Gallery & Swatches settings](https://help.boostertheme.com/knowledge/gallery-swatches-theme-settings#how-to-access-the-swatches-settings) 3. [Show selected variant's image](https://help.boostertheme.com/knowledge/gallery-swatches-theme-settings#show-selected-variants-image) 4. [Default variant selector](https://help.boostertheme.com/knowledge/gallery-swatches-theme-settings#default-variant-selector) 5. [How to set up color swatches](https://help.boostertheme.com/knowledge/gallery-swatches-theme-settings#how-to-set-up-color-swatches) 6. [Custom color swatches](https://help.boostertheme.com/knowledge/gallery-swatches-theme-settings#Custom-color-swatches) 7. [How to set up image swatches](https://help.boostertheme.com/knowledge/gallery-swatches-theme-settings#How-to-set-up-image-swatches) 8. [Alternative selector options](https://help.boostertheme.com/knowledge/gallery-swatches-theme-settings#alternate-selector-options) 9. [Swatch logic](https://help.boostertheme.com/knowledge/gallery-swatches-theme-settings#swatch-logic) 10. [Disable Sold Out Options](https://help.boostertheme.com/knowledge/gallery-swatches-theme-settings#disable-soldout-options) 11. [Preselect swatch](https://help.boostertheme.com/knowledge/gallery-swatches-theme-settings#preselect-swatch) 12. [Swatches style](https://help.boostertheme.com/knowledge/gallery-swatches-theme-settings#swatches-style) --- #### 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. ![Show selected variants image option](https://help.boostertheme.com/hs-fs/hubfs/Show%20selected%20variants%20image%20option.jpg?width=317&height=273&name=Show%20selected%20variants%20image%20option.jpg)     #### **Default variant selector** There are two options for the variant selector: 1. Dropdown 2. Swatch ![Variant selector](https://help.boostertheme.com/hs-fs/hubfs/Variant%20selector.jpg?width=494&height=173&name=Variant%20selector.jpg) There's also the default variant selector which is text-only: ![Text-only variant selector](https://help.boostertheme.com/hs-fs/hubfs/Text-only%20variant%20selector.jpg?width=253&height=154&name=Text-only%20variant%20selector.jpg) #### **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](https://help.boostertheme.com/hs-fs/hubfs/Color%20only%20option%20names.jpg?width=688&height=275&name=Color%20only%20option%20names.jpg) #### **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](https://help.boostertheme.com/hs-fs/hubfs/Custom%20color%20codes.jpg?width=610&height=252&name=Custom%20color%20codes.jpg) #### **How to set up image swatches** In the **Image option names** textarea, enter the name of the variant options of the product. ![Image option names](https://help.boostertheme.com/hs-fs/hubfs/Image%20option%20names.jpg?width=588&height=312&name=Image%20option%20names.jpg)Note: Make sure to add an image to each of your variants in Shopify. ![Shopify variant images](https://help.boostertheme.com/hs-fs/hubfs/Shopify%20variant%20images.jpg?width=572&height=432&name=Shopify%20variant%20images.jpg)For more info, you may refer to this Shopify in-depth tutorial: [https://help.shopify.com/en/manual/products/product-media/add-images-variants](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 theopposite of the default variant selector. (Click photo to enlarge) [![Alternate selector options](https://help.boostertheme.com/hs-fs/hubfs/Alternate%20selector%20options.jpg?width=688&height=276&name=Alternate%20selector%20options.jpg)](https://help.boostertheme.com/hubfs/Alternate%20selector%20options.jpg?hsLang=en) #### **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](https://help.boostertheme.com/hs-fs/hubfs/Disable%20soldout%20options.jpg?width=688&height=221&name=Disable%20soldout%20options.jpg)](https://help.boostertheme.com/hubfs/Disable%20soldout%20options.jpg?hsLang=en) #### **Preselect swatch** This allows you to customize whether or not you want to preselect a swatch on page load. ![Preselect swatch](https://help.boostertheme.com/hs-fs/hubfs/Preselect%20swatch.jpg?width=309&height=258&name=Preselect%20swatch.jpg) 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. #### Swatches Style This allows you to customize whether or not you want a border around your variant swatches. - ![Untitled design (29)](https://help.boostertheme.com/hs-fs/hubfs/Untitled%20design%20(29).png?width=300&height=250&name=Untitled%20design%20(29).png) **Enable** — turn on to show a border around each swatch. - **Border Color** — choose the color of the border (example: `#000000`). - End of article - - [Get started](https://help.boostertheme.com/knowledge/get-started?hsLang=en#main-content) - [Installation Process](https://help.boostertheme.com/knowledge/get-started?hsLang=en#installation-process) - [Learning the basics](https://help.boostertheme.com/knowledge/get-started?hsLang=en#learning-the-basics) - [In-depth Tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#main-content) - [Sections](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#sections) - [Theme settings](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#theme-settings) - [Product Page](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#product-page) - [More tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#more-tutorials) - [More support](https://help.boostertheme.com/knowledge/more-support?hsLang=en#main-content) - [Partners app Ressource center](https://help.boostertheme.com/knowledge/more-support?hsLang=en#partners-app-ressource-center) - [Managing your subscription & theme](https://help.boostertheme.com/knowledge/more-support?hsLang=en#managing-your-subscription-theme) - [Change logs & Policies](https://help.boostertheme.com/knowledge/more-support?hsLang=en#change-logs-policies) - [Announcements and others](https://help.boostertheme.com/knowledge/more-support?hsLang=en#announcements-and-others) [![Chill listening crop-3](https://help.boostertheme.com/hs-fs/hubfs/Booster-black-logo.png?width=178&height=51&name=Booster-black-logo.png "Chill listening crop-3")](https://boostertheme.com/?hsLang=en) Copyright © 2026, Booster Theme - PreviewX Inc. ```json { "@context" : "https://schema.org", "@type" : "VideoObject", "caption" : { "@type" : "MediaObject", "contentUrl" : "https://help.boostertheme.com/media-transcripts/185351635874/en.vtt", "inLanguage" : "en", "name" : "en Captions" }, "contentUrl" : "https://stream.mux.com/z006Cz025f2KsCLtRTe00QSsf01PlU5VhjahFqUGJZrJGsY/capped-1080p.mp4", "dateModified" : "2026-08-18T07:56:45.288Z", "duration" : "PT2M58.034S", "height" : 1440, "name" : "Gallery and Swatches", "thumbnailUrl" : "https://api-na1.hubspot.com/filemanager/api/v3/files/thumbnail-redirect/185351635874?portalId=22632616&size=medium", "uploadDate" : "2025-01-26T17:30:20.610Z", "width" : 2560 } ``` ```json { "@context" : "https://schema.org", "@type" : "VideoObject", "contentUrl" : "https://22632616.fs1.hubspotusercontent-na1.net/hubfs/22632616/Gallery%20&%20Swatches.mp4", "dateModified" : "2026-08-18T07:57:32.711Z", "duration" : "PT9.73S", "height" : 1080, "name" : "Gallery & Swatches", "thumbnailUrl" : "https://api-na1.hubspot.com/filemanager/api/v3/files/thumbnail-redirect/119185596853?portalId=22632616&size=medium", "uploadDate" : "2023-06-07T09:27:10.701Z", "width" : 2020 } ``` ```json { "@context" : "https://schema.org", "@type" : "VideoObject", "contentUrl" : "https://22632616.fs1.hubspotusercontent-na1.net/hubfs/22632616/Show%20selected%20variants%20image.mp4", "dateModified" : "2023-06-07T09:32:13.666Z", "duration" : "PT6S", "height" : 1060, "name" : "Show selected variants image", "thumbnailUrl" : "https://api-na1.hubapi.com/filemanager/api/v3/files/thumbnail-redirect/119185226592?portalId=22632616&size=medium", "uploadDate" : "2023-06-07T09:32:05.165Z", "width" : 2244 } ```