> 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/theme-settings/product-page.md).

# Product Page

{% hint style="success" %}
**Steps:**

* In the theme editor, click **Theme settings**
* Locate **Product Page,**
* Make necessary change and click save.
  {% endhint %}

### <mark style="color:blue;">**Product Swatch**</mark>

Please make sure that you set variants for your products in order to **display product swatches** on your store.

&#x20;From **Shopify admin** > **Products** > **Select** product to add variants > Scroll down to **Variants** > Click Icon to **Add** **Variants** and add color, size, etc as your products suit.&#x20;

<div align="left"><figure><img src="/files/8dzaMvpltex7oKvBjkZr" alt=""><figcaption></figcaption></figure></div>

**Swatch Type :** Choose product swatch type to **Color Swatch** Or **Variant Swatch.**

**For Color Swatch,** make sure you have define all custom colors. Custom colors can be add from Sections -> Scroll down to Custom Color section.  You can find Custom Color section next to footer section

<div align="left"><figure><img src="/files/OO594hYMcYGWnc5QOGxA" alt=""><figcaption><p>preview color swatch</p></figcaption></figure></div>

**For Variant Swatch,** Please make sure you have uploaded variant images From **Shopify admin** > **Products** > **Select** product to add variants > Scroll down to **Variants.**&#x20;

<div align="left"><figure><img src="/files/PMImDcEhMLuV0mZaZOhk" alt=""><figcaption></figcaption></figure></div>

<figure><img src="/files/ZZwSNxfe02rt4eGD1z7E" alt=""><figcaption><p>preview variant swatch</p></figcaption></figure>

**Variant Image Position: Set variant image position.** Set variant image position. Either you can set to display it from center or top.

**Swatch Size:**  Select swatch size to small, medium or large.

**Border Radius:** Set rounded corner for swatch.

**Add variant title to show as color swatches:** Add all variant name that will display as color swatch. i.e. Color, couleur, Farbe, Kleur, Farge

Set swatch text background, text, border and active swatch colors.

### <mark style="color:blue;">Size Chart</mark>

Show size chart for all products on your store.&#x20;

**Show Size Chart Link?**  Enable to show size chart link above size swatch that will display size chart popup when user click.

**Size Chart Type:** Choose how you want to display size chart. You can set size chart by default,

By Brand, By Type Or Different for each products. [<mark style="color:orange;">**Click to know more in detail**</mark>](https://www.adornthemes.com/knowledge-base/vogal-how-to-set-size-chart/)

**Add variant title to active size chart link and tab:** You need to add all variant name here that you want for size chart to work. i.e. Size, Dimension, Taille, Velikost, talla, Taglia

{% hint style="info" %}
You can also display size chart in product tabs . You need to add size chart tab from product page tab section.
{% endhint %}