> 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

When customers are on product page, they see more colors or more style available below product title, they can click on option to see that product.

<figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FCjRZOv4xh03qWiL6NY6V%2Fmore-colors.jpg?alt=media&amp;token=2de760db-6c76-4ffc-b1a9-fa53463a4830" 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;