How To Add Size Chart To Your Shopify Store [Without App]

Shopify Size Chart: Welcome to WebSense Pro! Join us in another Shopify how-to video where we'll guide you through the process of adding a size chart to your Shopify product page using a collapsible row section.
In this video, we'll show you how to incorporate an image of your product's size chart directly within the product page using collapsible rows. These size charts will be updated through Metafields. This technique is particularly useful if you have numerous products, each with distinct size details and charts.
Shopify Store For Just 1$/Month: shopify.pxf.io/XYRLdX
00:00 Intro
01:30 Adding image in Collapsible row block
05:00 Creating Meta Field
06:20 Adding liquid code in Collapsible row block
07:30 Updating size Chart to Meta Field
Blog/Code: websensepro.com/blog/how-to-a...
If you want help with Shopify Customization, store development, or any other web development help. Contact us via websensepro.com/contact-us

[@christians7084]

You are awesome!!!! I have been scouring the internet for this video all week. Can't wait to boost my site with this. Thanks!!!!

[@WebSensePro]

Welcome

[@NinaFunke]

This is SUCH A GOOD TUTORIAL! Thank you

[@WebSensePro]

You're so welcome!

[@joynguyen8055]

so helpful! tysm, keep up the good work!

[@WebSensePro]

You're welcome!

[@peachesnc]

Bilal, you are quickly becoming my favorite person on the internet.

[@WebSensePro]

Thank you 😊

[@strikzy.1081]

thanks man really helpfull

[@WebSensePro]

Your welcome

[@WebSensePro]

00:00 Intro
01:30 Adding image in Collapsible row block
05:00 Creating Meta Field
06:20 Adding liquid code in Collapsible row block
07:30 Updating size Chart to Meta Field
Blog/Code: websensepro.com/blog/how-to-add-size-charts-to-shopify-product-pages

[@user-fr3ic4lz6t]

Thanks a lot, i have one problem the picture is too small, idk how to make it bigger

[@WebSensePro]

Glad I could help, contact us for support for your image issue

[@harshpanjwani8288]

Hi,
How to hide the collapsible row, if there is nothing attached?
Thanks

[@WebSensePro]

Creating a different template maybe?

[@ShopMinx]

I got a problem with the code when pasting to row content, it says that image url is invalid that I have to remove it, I don't know
what to do next. if someone can help. thanks in advance

[@WebSensePro]

Need more context of the issue

[@peachesnc]

Quick question. I also emailed you. This worked great for me, thank you. I also want to do the same thing for fabric and care instructions in an image format rather than text. Are the instructions the same for additional fields? I'm confused on editing the code and what I would do for additional fields. Thank you so much!!

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@timmywong1231]

hi, how can I add both stylish texts and images inside the collapsible row?

[@WebSensePro]

Did you try meta fields?

[@yeemanfung3380]

this way only can show the size chart which i edited every singel product?can i edit by tag/ collections, i seems more efficiency

[@WebSensePro]

You can create a template and select that template on multiple products

[@Ansi77]

Hi, Ansarul This side, i want to know how we Add size chart based on collection. its tough to Add size chart on each product if have more than 500 products.

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@Activo-uk8qu]

is there an updated version for dawn 13.0

[@WebSensePro]

Not yet, will add if requested

[@tootiemaseko7110]

am also struggling to add an image as per the way you indicated on you UA-cam and i have followed your steps, please assist.am struggling

[@WebSensePro]

Which part you are struggling with?

[@ExplorerJ-ve1jo]

It didn't work on Dawn 14.0.0

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@josiahsmith4931]

It seems like shopify may have already changed their rules with the tab content. Putting an image tag in the content results in: Setting 'content' is invalid. All top level nodes must be '', '', '' or ''-'' tags and Tag '' is not permitted

[@josiahsmith4931]

I got the same functionality using a slightly different method. Edit the collapsible tab, then go to tab content from page. Click connect dynamic source and add a metafield with type page. Then you need to go to the product page -> metafields and add a new page for your newly created metafield. Then just upload your image when creating the page.

[@WebSensePro]

How many pages you will need to create if you have 100+ products?

[@avnishsharma3488]

SIR PLEASE HELP ME MUJHE APNE FRONT END PE PRODUCT WEIGHT SHOW KARNA HAI PLEASE GUIDE ME SIR

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support