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

[Timito]

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

[SumanSaurabh · 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!

[Kinjaldavra]

Please provide website url

[Timito]

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

Sneakersafe.co.uk

Thank

[Kinjaldavra]

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

[Timito]

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

[Kinjaldavra]

Please add me as a staff member. Email: [email protected]

[Timito]

Hi @Kinjaldavra 

Is that safe to do so for me?

[EmaStore]

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]

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]

---

@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 [email protected] 

[SumanSaurabh · 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!

[Timito]

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]

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

[Timito]

@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 · 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!

[Timito]

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]

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

[MRamzan]

Here is the solution to create size chart: