> 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

Settings for product swatch and size chart that display on product detail page. Set other product detail page options and settings from Product page section.

{% 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="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FnFLskeWkM1NOCIJTFPpQ%2Fproduct-swatch.jpg?alt=media&amp;token=88044a27-d214-48d0-bf0d-68951e6c0039" 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="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FmkvmJ7gNWTaYRIAKAHfH%2Fproduct-page-color-swatch.jpg?alt=media&amp;token=8c958485-1211-427c-83c8-4ebe907023d9" 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="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FHLptU2ky9y5qPrJTAuZI%2Fvariant-swatch.jpg?alt=media&amp;token=90cd938c-9109-49c7-a031-ccb9b6a1601f" alt=""><figcaption></figcaption></figure></div>

<figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FLvFDMqawKL1CUA5qVziu%2Fproduct-page-variant-swatch.jpg?alt=media&amp;token=1c4ee065-f977-4598-b26d-c5db0b8f1bf2" 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 %}