Solved

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

Timito
Pathfinder
93 1 37

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

Accepted Solutions (2)

SumanSaurabh
Shopify Partner
69 26 26

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!

 

➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

SumanSaurabh
Shopify Partner
69 26 26

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!

➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 16 (16)

Kinjaldavra
Shopify Partner
2302 570 1422

Please provide website url

Timito
Pathfinder
93 1 37

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

Sneakersafe.co.uk

Thank

Kinjaldavra
Shopify Partner
2302 570 1422

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

Screenshot (6).png

Timito
Pathfinder
93 1 37

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

Kinjaldavra
Shopify Partner
2302 570 1422

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

Timito
Pathfinder
93 1 37

Hi @Kinjaldavra 

Is that safe to do so for me?

EmaStore
Visitor
3 0 0

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:

https://help.shopify.com/en/manual/online-store/themes/os/customize/add-size-chart#adding-the-size-c...

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

kevinj1990
Visitor
3 0 0

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.  

 

https://help.shopify.com/en/manual/online-store/themes/os/customize/add-size-chart#adding-the-size-c...

PaulNewton
Shopify Partner
6274 573 1319

@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.  

 

https://help.shopify.com/en/manual/online-store/themes/os/customize/add-size-chart#adding-the-size-c...


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 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


SumanSaurabh
Shopify Partner
69 26 26

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!

 

➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️
Timito
Pathfinder
93 1 37

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!

SumanSaurabh
Shopify Partner
69 26 26

@Timito 

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>
➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️
Timito
Pathfinder
93 1 37

@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?

SumanSaurabh
Shopify Partner
69 26 26

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!

➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️
Timito
Pathfinder
93 1 37

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!

Timito
Pathfinder
93 1 37

nevermind I managed to get it to work with your code thank you!