> For the complete documentation index, see [llms.txt](https://adornthemes.gitbook.io/vogal-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://adornthemes.gitbook.io/vogal-theme/product-page/more-products-color.md).

# More Products Color

<figure><img src="/files/ujIEkcXkfeEVnjimoImf" alt=""><figcaption></figcaption></figure>

**Step 1:**

{% hint style="success" %}
From your shopify store admin -> Click “Settings” -> “Custom data” -> Products -> Add Definition
{% endhint %}

Create a metafield as shown in the image below.

<figure><img src="https://www.adornthemes.com/wp-content/uploads/2023/01/more-color-1.png" alt=""><figcaption></figcaption></figure>

**Step 2 :**&#x20;

{% hint style="success" %}

* Now go to products and select any products
* Scroll down to the metafield box.&#x20;
* Click on “More Colors” field and select products.
  {% endhint %}

<figure><img src="https://www.adornthemes.com/wp-content/uploads/2023/01/more-color-2.png" alt=""><figcaption></figcaption></figure>

**Step 3 :**&#x20;

{% hint style="success" %}

* In the theme editor, Choose **Default product** top dropdown menu.
* Click **Product Main s**ection.
* Click **Add Block,** Select **More Colors** block and save.
  {% endhint %}

Make style change from block and click save. Now you can view product from store front.&#x20;