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
Please provide website url
Hi I wrote in the 1st line but I’ll send again
Thank
@Kinjaldavra thank you, I have minimum knowledge on coding, could you guide me through what I have to do?
Please add me as a staff member. Email: natztech2312@gmail.com
Hi @Kinjaldavra
Is that safe to do so for me?
Hi @Timito ,
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:
You have created a page “Size Chart” as suggested in the tutorial and it’s handle is exactly: size-chart
If you already created the “Size Chart” page then this must be published (active) (not in hidden/draft).
Please make sure your Size Chart page has some content.
I hope this helps.
Thanks!
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!
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:
{{ pages.size-chart.content }}
To:
{{ pages.size-conversion-charts.content }}
@SumanSaurabh Thank you.
How can I reduce the size of the pop up on desktop and mobile? Also on mobile, the size chart doesn’t fit on the screen because its too long. Is there a way to add scrolling or format it differently so it fits?
Hi @Timito ,
You can use the following CSS to fit size chart pop-up within screen and add scroll bars:
.show-pop-up {
z-index: 9999;
}
.pop-up-content {
max-width: 90%;
max-height: 90%;
overflow: auto;
}
Also, you may consider transposing your size chart tables (switch columns into rows and rows into columns), so that will not require horizontal scroll.
Thanks!
Thank you @SumanSaurabh , but the issue is still there for mobile? I’d just like the horizontal scroll to be added if you know how to. Thank you!
nevermind I managed to get it to work with your code thank you!
Hi @Kinjaldavra
I am having some trouble adding the 'size-chart- pop up button on my products pages.
I’d really appreciate if you could please help me. I can add you as an user so you can take a look - would really appreciate this. I’ve never done coding so i can’t seem to figure out what the problem is.
I’ve followed the steps from the link below:
However, on the last step for the code entered below, I kept getting error.
{% if product.options contains ‘Size’ %}
See size chart
{% endif %}
Thank you in advance.
Regards,
Anika
Can you please help me with this? I have tried putting all the code exactly from the link below but it isn’t working for me.
And you followed these instructions for the debut theme?
When you do not actually explain what isn’t working it’s near impossible for others to guess what the problem is if they cannot also see the issue or inspect your code.
If your using a free shopify theme you can contact support to have them add it for you :
If you use a free theme from Shopify, then you might be able to contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. To learn more, refer to Support for themes.
Otherwise if you need to buy the installation to different theme or some other factor you can contact me with store details at paull.newton+shopifyforums@gmail.com
Here is the solution to create size chart:
