# Theme settings

### **Default** and **Custom** color options of a product&#x20;

These colors are key-value pairs bound to specific product options, such as size or material.

For example, if a clothing store offers shirts in different colors and sizes, the store owner can assign a different color filter to each available size option. When a customer selects a size from the dropdown menu, the corresponding color filter will be applied to all product images.

In addition to default product option colors, you can create more when there are not enough fields. By customizing the colors of product options, store owners can create a more visually cohesive and personalized shopping experience for their customers.

<details>

<summary>To customize product color options follow this guide:</summary>

1\. Navigate to the [**Theme Editor** ](https://shopify.com/admin/themes/current/editor)

2\. Click on the **Theme Settings**

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-24/96f6fef4-fdec-45bb-b77a-89f2c6ba8e44/ascreenshot.jpeg?tl_px=0,0&#x26;br_px=1719,961&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=0,137" alt="" data-size="original">

3\. You'll find the "**Default product option colors**" in the list.

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-24/a7ad363b-1bcf-4321-8582-e15dd8082545/ascreenshot.jpeg?tl_px=0,0&#x26;br_px=1719,961&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=161,262" alt="" data-size="original">

4\. Click "**Default product option colors**" to see all default color's names and HEX properties.

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-24/0172dfb4-d863-4b40-95ba-1ebde43ba47f/ascreenshot.jpeg?tl_px=0,0&#x26;br_px=1719,961&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=185,264" alt="" data-size="original">

5\. Click "**Custom product option colors**" to see and edit Custom colors.

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-24/0344c137-e98c-4f1b-b86d-c0761120accb/ascreenshot.jpeg?tl_px=0,51&#x26;br_px=1719,1012&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=164,277" alt="" data-size="original">

6\. Add the name and choose the color.

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-24/7256f2fd-c781-4ad6-a728-4c1876332604/ascreenshot.jpeg?tl_px=0,207&#x26;br_px=1719,1168&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=135,276" alt="" data-size="original">

</details>
