Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
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:
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!
This is an accepted solution.
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!
Please provide website url
Hi I wrote in the 1st line but I’ll send again
Sneakersafe.co.uk
Thank
Please add some data in the form of html in 'size-chart-content' class
@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
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' %}
<a class="btn size-chart-open-popup" href="#size-chart">See size chart</a>
{% 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.
@kevinj1990 wrote: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
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
This is an accepted solution.
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:
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!
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:
<span class="size-chart-content">{{ pages.size-chart.content }}</span>
To:
<span class="size-chart-content">{{ pages.size-conversion-charts.content }}</span>
@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?
This is an accepted solution.
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!
Here is the solution to create size chart:
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024