Add size chart pop up to product page (debut theme)

Solved
SneakerSafe
Excursionist
53 0 13

Hi

My website is sneakersafe.co.uk, I'm attempting to add a size chart to all my product pages (essentially a pop up link to my size chart page).

This is the link I've followed precisely https://shopify.dev/tutorials/customize-theme-add-size-chart#adding-the-size-chart-to-your-theme

For some reason it is not working properly for me, I get a blank pop up when I click on the 'see size chart' button. Could anyone help me to see what is going wrong with my code?

Thank you very much

0 Likes
Natztech
Excursionist
75 8 10

Please provide website url

Want to theme customize Hire us.
If helpful then please Like and Accept Solution
E-mail :natztech2312@gmail.com
SneakerSafe
Excursionist
53 0 13

Hi I wrote in the 1st line but I’ll send again

Sneakersafe.co.uk

Thank

0 Likes
Natztech
Excursionist
75 8 10

Please add some data in the form of html in 'size-chart-content' class

Screenshot (6).png

Want to theme customize Hire us.
If helpful then please Like and Accept Solution
E-mail :natztech2312@gmail.com
SneakerSafe
Excursionist
53 0 13

@Natztech thank you, I have minimum knowledge on coding, could you guide me through what I have to do?

0 Likes
Natztech
Excursionist
75 8 10

Please add me as a staff member. Email: natztech2312@gmail.com

Want to theme customize Hire us.
If helpful then please Like and Accept Solution
E-mail :natztech2312@gmail.com
0 Likes
SneakerSafe
Excursionist
53 0 13

Hi @Natztech 

Is that safe to do so for me?

0 Likes

This is an accepted solution.

Hi @SneakerSafe ,

 

The pop-up will display content from the following page of your store:

https://sneakersafe.co.uk/pages/size-chart

Please check the following troubleshootings:

1. You have created a page "Size Chart" as suggested in the tutorial and it's handle is exactly: size-chart

2. If you already created the "Size Chart" page then this must be published (active) (not in hidden/draft).

3. Please make sure your Size Chart page has some content.

I hope this helps.

Thanks!

 

Suman Saurabh | Expert in Shopify Development
✅ Was my reply helpful? Please Like & Accept Solution
✅ Want to hire me? Send PM or Skype: omnisitecreations
SneakerSafe
Excursionist
53 0 13

Hi @SumanSaurabh 

I see what went wrong now, the page I have on my website is https://sneakersafe.co.uk/pages/size-conversion-charts not https://sneakersafe.co.uk/pages/size-chart as needed. Thank you!

0 Likes

@SneakerSafe 

If you want to keep the same URL:

https://sneakersafe.co.uk/pages/size-conversion-charts

Then, you'll need to change the following line of code in the Snippet > size-chart.liquid:

From:

      <span class="size-chart-content">{{ pages.size-chart.content }}</span>

To:

      <span class="size-chart-content">{{ pages.size-conversion-charts.content }}</span>
Suman Saurabh | Expert in Shopify Development
✅ Was my reply helpful? Please Like & Accept Solution
✅ Want to hire me? Send PM or Skype: omnisitecreations