# Size chart

The **Size Chart** option type is designed to provide customers with detailed sizing information, ensuring they select the right size for their purchase. This feature is particularly useful for clothing, footwear, and other products where accurate sizing is crucial.

👉You can check out our [Demo prouduct](https://avis-demo.avisplus.io/products/heading-paragraph) to see how it works 

***

## **Basic Option Settings:**

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

#### **1. Option Name**

The internal name used within your app to identify the Size Chart option. This helps you manage and organize different size charts.

#### **2. Chart Title**

This is the title that will be displayed on the product page. When customers click on it, a pop-up containing the size chart content will appear.

#### **3. Chart Header**

The header shown at the top of the pop-up, providing context or a title for the size chart.

#### **4. Show Icons**

Allows you to include icons alongside the size chart, such as symbols for different body parts or clothing types. This adds a visual element to help customers better understand the chart.

#### **5. Size Modal**

Determines the size of the pop-up window (modal) in which the size chart is displayed. Options include:

* **Small (380px)**: A compact modal suitable for simple charts with minimal data.
* **Medium (620px)**: A standard modal size that works well for most size charts.
* **Large (980px)**: A larger modal for more detailed charts with extensive information.

#### **6. Chart Template**

A pre-defined layout or structure for the size chart. This allows you to quickly set up the chart using a standard format, which can be customized as needed.

#### **7. Chart Content**

The actual data within the size chart, such as measurements or size comparisons. This content is what customers will use to determine the correct size for their purchase.

#### **8. Conditional Logic**

Allows the Size Chart to be displayed or hidden based on customer selections or other conditions. This ensures the chart appears only when relevant, such as when a specific product or size is selected.

{% hint style="info" %}
[How to set up Conditional logic for your options](https://options-docs-v2.avisplus.io/app-features/conditional-logic-option-b-shows-if-option-a-is-selected)
{% endhint %}

***

## **Advanced Option Settings:**

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

#### **1.** Show Next To

Choose another option’s label to display this option beside it, helping to group related options together on the product page.

#### **2. Class Name**

Assigns a custom CSS class to the Size Chart option, allowing for specific styling or behavior through CSS. This helps you maintain consistent design and functionality across your product pages.


---

# 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://options-docs-v2.avisplus.io/option-types/all-option-types/size-chart.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.