Prestige - Size guide popup on button click

hae_villareal
Visitor
1 0 0

I'm trying to add a 'Size chart' button to my product page and have a size chart popup when clicking the button. All products have different size guides, so the button should link to the page tag form "meta-size-chart-{pagename}" in order to open the specific chart for the product. I was able to get 'Size chart' on the page and a popup appears, but  it's blank. How would I get the specific size chart for the product to popup?

Here is how the product page looks with the button:

pdp-size-link.jpg

 

 

 

 

 

 

And when you click 'Size chart', this is the popup that appears:

blank-popup.jpg

 

 

 

 

 

I did grab code from the previous theme that allowed us to have a size chart popup, thinking that it would help.

 

Here is what I copied from old theme and added to our new theme

** snippets/product-form.liquid**

{% for tag in product.tags %}
{% if tag contains 'meta-size-chart-' %}
{% assign meta-size-chart = true %}
{% endif %}
{% endfor %}

{% comment %} Size chart Mobile{% endcomment %}
{% if settings.size_chart != blank or meta-size-chart %}
<a href="javascript&colon;;" class="product__size-chart size-chart--medium-down" data-fancybox data-src="#size-chart{{product.id}}" data-type="inline">{{ 'products.product.size_chart' | t }} {% render 'icon', name: 'right-caret' %}</a>
{% render 'popup-size-chart', product_id: product.id %}
{% endif %}

{% comment %} Size chart{% endcomment %}
{% if settings.size_chart != blank or meta-size-chart %}
<a href="javascript&colon;;" class="product__size-chart medium-down--hidden" data-fancybox data-src="#size-chart{{product.id}}" data-type="inline">Size Guide{% render 'icon', name: 'right-caret' %}</a>
{% render 'popup-size-chart', product_id: product.id %}
{% endif %}

 

In the same file, this is the code that allows me to have 'Size chart' on the prod page and the popup to appear:

              {% if settings.size_chart != blank or meta-size-chart %}
              	<button type="button" class="ProductForm__LabelLink Link Text--subdued" data-action="open-modal" aria-controls="modal-{{ size_chart_page.handle }}">
                  {{- 'product.form.size_chart' | t -}}
                </button>
              {% endif %}                 
Reply 1 (1)

tewe
Shopify Partner
244 46 102

Hi @hae_villareal ,

this looks to specific for a direct answer in this forum, but if you share the link to your shop and accept me as a collaborator I am happy to have a look.

Regards
Thomas

• Was my reply helpful? Click Like to let me know!
• Was your question answered? Mark it as an Accepted Solution
• Check out our Price Updater App