Solved

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

sebfe
Excursionist
40 0 2

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

Accepted Solution (1)
devmont-digital
Shopify Partner
97 23 22

This is an 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".

1.PNG

 

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"
}

1.PNG

 

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

1.PNG

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io

View solution in original post

Replies 8 (8)

devmont-digital
Shopify Partner
97 23 22

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.1.PNG
  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. 2.png
Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
sebfe
Excursionist
40 0 2

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

 

hfdghdfhdf.png

 

devmont-digital
Shopify Partner
97 23 22

Can you please tell me which theme you have used?

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
sebfe
Excursionist
40 0 2

i am using impact theme

devmont-digital
Shopify Partner
97 23 22

This is an 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".

1.PNG

 

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"
}

1.PNG

 

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

1.PNG

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
sebfe
Excursionist
40 0 2

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

fgdsgsdg.png

devmont-digital
Shopify Partner
97 23 22

 

 

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"
}

 

1.PNG

 

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>

 

1.PNG

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
Louikka7678
Tourist
5 0 2

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