# Swatches Swatches are a great solution to use with product pages, product cards, and search filters. If customers need a product of a certain color, material, or texture, swatches make it better for them to visually detect the needed option and study other options they might like. {% embed url="" %} How to set up custom swatches in Aurora {% endembed %} ### PRIMARY OPTION Assign the option, the values of which will show as swatches in all the places throughout the store: product pages, various carousels and girds featuring product cards, and filters on the "Search" and "Collection" pages. Alternatively, you can set up and use [Shopify’s native swatches](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields). In this case, Shopify’s native swatches will have priority over the primary option’s swatches. If there is no Shopify’s native swatch assigned, the theme’s swatch will be used. The shape and size for Shopify’s native swatches and the primary option are the same. Learn how to set up [color swatches in Shopify using metafields](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields). {% hint style="warning" %} Shopify’s native visual filters also use the shape and size of the primary option. Learn how to set up [visual filters in Shopify using metafields](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters#visual-filters). {% endhint %} #### Option To turn the swatches on, add the relevant option name to the input field. The name should be the same as the one you have for your [products](https://admin.shopify.com/products) in admin. #### Shape for product cards Choose the shape of the swatches in the product cards. #### Size for product cards Adjust the size of the swatches in the product cards. #### Shape for product pages Choose the shape of the swatches on the product pages. #### Size for product pages Adjust the size of the swatches on the product pages. #### Shape for filters Choose the shape of the swatches in the search filters. #### Size for filters Adjust the size of the swatches in the search filters. ### SECONDARY OPTIONS Secondary options allow representing more than one product option with swatches, not only "Color" but, for example, "Material" or "Frame". They appear on product pages and in search filters. {% hint style="warning" %} You **can’t use variant images** for secondary swatch options. {% endhint %} #### Options To turn the swatches on, add the relevant option names to the input field. The names should be the same as those you have for your [products](https://admin.shopify.com/products) in admin. Note that you need to place each option name in a separate line. #### Shape for product pages Choose the shape of the swatches on the product pages. #### Size for product pages Adjust the size of the swatches on the product pages. #### Shape for filters Choose the shape of the swatches in the search filters. #### Size for filters Adjust the size of the swatches in the search filters. ### PRIMARY VS SECONDARY OPTIONS

Criteria	Primary option	Secondary options
Quantity	Only 1 + translations	Many + translations
Use: product cards	✔
Use: product pages	✔	✔
Use: filters	✔	✔
Media: Variant images	✔
Media: Colors	✔	✔
Media: Images from Files	✔	✔

### CUSTOM COLORS AND PATTERNS The theme provides standard swatches for a[ number of colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color_keywords). If your products have more specific option values, like cherry blossom or light purple, assign swatches for them by adding a rule (option value::#hexcolorcode) to the input field. Don't forget the two colons that separate the option value and the color code, as well as the # before the color code. Note that you should add only one rule per line. Use this[ hex color palette](https://www.color-hex.com/) to choose the right shade and see its code. You can also override [standard colors](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color) with your own shades by adding rules.

Use several color codes to create a complex swatch with vertical stripes. Do this by adding a rule (option value::#hexcolorcode/#hexcolorcode/#hexcolorcode) to the input field. Don't forget to separate color codes with a forward slash ( / ) and insert no spaces in between.

If your complex swatch includes colors from [the list of standard colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color_keywords), you can replace color codes in the rule with the relevant keywords.

You can also initially list several colors in the option value field when creating variants for your[ products](https://admin.shopify.com/products) in admin. This way, the complex swatch will be created automatically. Don't forget to separate color keywords with a forward slash ( / ) and insert no spaces in between (the letter case doesn’t matter). Note that this approach works similarly to swatches: [standard colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color_keywords) appear automatically, and custom colors are added as a rule.

If you want to use patterns and textures as swatches, add an image instead of a hex code. First, add the image to your[ files](https://admin.shopify.com/content/files) in the admin. Study the Shopify [file requirements](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads#file-requirements) for correct upload. Then add a rule (option value::file-name.png) to the input field. Don't forget the two colons and the file extension.

Note that the rule (option value::file-name.png) applies only to the images with .jpg, .png, or .jpeg extensions. For other image formats, add a link to the file instead.

### **LOCALIZATION OF SWATCHES** {% hint style="warning" %} If you use [Shopify’s native swatches](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields), you don’t need to localize them. {% endhint %} If you sell internationally and want to keep swatches in other languages, add the translations of the option name to the corresponding ‘Option name’ field. For a primary swatch option, separate its translations with a comma. For secondary swatch options, place each translation in a separate line.

Primary/secondary options and translations

Also, add translated option values with color codes as rules to the corresponding ‘Custom colors and patterns’ field (option value translation::#hexcolorcode).

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://getsitecontrol.gitbook.io/aurora-theme/theme-settings/swatches.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.