How can I add a size chart to my product page?

[sebfe]

hello, how to put size chart in my product page, i cant see, select a page in my collapsible row, thank you for the help

[devmont-digital]

Hello @sebfe,

To add a size chart to your product page, you can follow these steps:

1. Navigate to "Online Store" and then click on "Pages."
2. Create a new page with the name "Size Chart" and add the image or table if you want to customize it.
3. Then, go to the customization section and open the default product.
4. Go to the left sidebar and select "Collapsible Row."
5. Click on "Select Page" and choose the size chart you created.
6. Save your changes.
7. 

[sebfe]

the collapsible row i have dont have page, how to make metafields for it,

[devmont-digital]

Can you please tell me which theme you have used?

[sebfe]

i am using impact theme

[devmont-digital · Accepted solution]

Step 1: Navigate to Settings -> Custom Data -> Products. Click "Add Definition" and create a metafield named "Size Chart Image" with the type set to "file".

Step 2: Go to Online Store -> Themes -> Edit Code. Search for the file named "main-product.liquid" and locate "collapsible_text". Paste the code as shown in the attached screenshot.

Code:

{
  "type": "image_picker",
  "id": "image_with_text_image",
   "label": "Image"
}

Step 3: Next, find the file named "accordion.liquid" and paste the code as shown in the attached screenshot.

Code:

{% if block.settings.image_with_text_image != blank %}
          <img src="{{ block.settings.image_with_text_image | img_url:'master' }}" style='margin-top:20px;'>
     {%- endif -%}

[sebfe]

this is the result, it has image option now, is it possible to have "select a page" option also, thank you

[devmont-digital]

Step 1: Go to Online Store -> Themes -> Edit Code. Search for the file named "main-product.liquid" and locate "collapsible_text". Paste the code as shown in the attached screenshot.

Code:

{
  "type": "page",
  "id": "page-size",
  "label": "Page"
}

Step 3: Next, find the file named "accordion.liquid" and paste the code as shown in the attached screenshot.

Code:

<p>{{ block.settings.page-size.content }}</p>

[Louikka7678]

What do I do if I have different size charts for different products?