FROM CACHE - en_header

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

Solved
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)

Accepted Solutions
SumanSaurabh
Excursionist
30 8 15

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!

 

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

View solution in original post

SumanSaurabh
Excursionist
30 8 15

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!

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

View solution in original post

Replies 16 (16)
Kinjaldavra
Shopify Partner
2302 569 1408

Please provide website url

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
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 569 1408

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

Screenshot (6).png

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
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 569 1408

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

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Timito
Pathfinder
93 1 37

Hi @Kinjaldavra 

Is that safe to do so for me?

SumanSaurabh
Excursionist
30 8 15

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!

 

Suman Saurabh | Expert in Shopify Development
Was my reply helpful? Please Like & Accept Solution
Want to hire me? Send PM or Skype: omnisitecreations
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
Excursionist
30 8 15

@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>
Suman Saurabh | Expert in Shopify Development
Was my reply helpful? Please Like & Accept Solution
Want to hire me? Send PM or Skype: omnisitecreations
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
Excursionist
30 8 15

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!

Suman Saurabh | Expert in Shopify Development
Was my reply helpful? Please Like & Accept Solution
Want to hire me? Send PM or Skype: omnisitecreations
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!

EmaStore
New Member
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
New Member
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
4765 390 1021

@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 

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com