> For the complete documentation index, see [llms.txt](https://luxoria-docs.okrisedesign.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://luxoria-docs.okrisedesign.com/theme-settings/variants-and-swatches.md).

# Variants and swatches

![](https://643331134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbIpsy9iitv63MBYZPGgi%2Fuploads%2FOXTtPVwUixKbuFSu7vh6%2Fimage.png?alt=media\&token=5cc1102d-3a2c-48c7-9816-b7421a726ce5)

## The subcategory is managed through:

Customize Theme → Theme Settings → Variants and swatches

## Introduction & Settings overview:

Variants and swatches are essential features that enhance the browsing and shopping experience on a Shopify store. By offering customers the ability to view and select different product variations through intuitive swatches, merchants provide a seamless and interactive way for them to explore options and make informed purchase decisions.

* **Swatches option name:** Here the user should enter the swatch option name that corresponds the option name in the Variants category in the product settings from the admin panel (refer to Admin panel → Products).\
  ![](https://643331134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbIpsy9iitv63MBYZPGgi%2Fuploads%2F9c8F1Fwx6sWkiarlINwb%2F54.png?alt=media\&token=18b814a4-69d9-4f39-b14c-45af00733fa4)\
  If it's correctly setup, the following visualization of the swatch will be used by the theme:\
  ![](https://643331134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbIpsy9iitv63MBYZPGgi%2Fuploads%2FoOPLOBma33EpsvXuQJaD%2F55.png?alt=media\&token=56296f1f-51a6-471a-b811-175be7007524)\
  If not, the default visualization will appear:\
  ![](https://643331134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbIpsy9iitv63MBYZPGgi%2Fuploads%2FKsXbuxDX1NSmEz4i5pVT%2F56.png?alt=media\&token=2c43fa39-c86a-4dec-88cd-871eb71f167f)
* **Hex codes:** Here the product colors should be described in the following format: 'Color name|Hex code of the color', for example: Blue|#008DCB or 'Color name|Swatch image', for example: Blue|blue.png (the swatch image file should be uploaded in the store).
* **Size option name:** Here, the user should enter the 'Size option name' that corresponds to the option name in the Variants category in the product settings from the admin panel (refer to Admin panel → Products).\
  \`![](https://643331134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbIpsy9iitv63MBYZPGgi%2Fuploads%2FrDMWSNnfaHPOYpB2WX0H%2F57.png?alt=media\&token=9f422590-1301-4cbe-999d-4b20d5924ae7)\
  If it's correctly setup, the following visualization of sizes will be used by the theme:\
  ![](https://643331134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbIpsy9iitv63MBYZPGgi%2Fuploads%2F8ronhjcByl9Ph31z0ynm%2F58.png?alt=media\&token=4875a7a4-f330-49fc-8245-6cfc003a1b14)\
  If not, the default visualization will appear:\
  ![](https://643331134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbIpsy9iitv63MBYZPGgi%2Fuploads%2FweSxIRRRly6R3I0ui1k2%2F59.png?alt=media\&token=9d94a09d-53d7-45f6-ba0a-654d3513e399)