# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://adornthemes.gitbook.io/vogal-theme/theme-settings/product-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.