Does anyone know how to add a link to the product page that will open a size chart based on the vendor? I.e. the name of the page is “[vendor] Size Chart”.
The link is only visible when there is a “Size” option on the product.
My current theme does this but we are switching themes and it does not have the capability.
Thanks in advance!
Hi @foveo
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder 
We use ESC size charts and bring in charts via tag.
https://foveo.run thanks
Thank you. I’m hoping to find an automated solution like what my current theme has built in… Appreciate your suggestion 
Hi @foveo
I can’t see any values in the size chart right now. In which product have you added the size chart values?
Best regards,
Devcoder
Here’s one way you could go about it that will work on any theme.
Something like this: (fake example)
{% assign vendor_name = product.vendor | downcase %}
{% for size_chart in shop.metaobjects.size_charts.values %}
{% assign chart_title = size_chart.title.value | downcase %}
{% if chart_title contains vendor_name %}
{{ size_chart.contents.value }}
{% endif %}
{% endfor %}
https://foveo.run/collections/all-shoes/products/005-comet-women
Sorry, we don’t have them for every vendor yet.
This is great, thanks.
Is there are a way to link to a page rather than the html content in the metafield?
My existing theme does this and maybe I can grab the code from there, but not sure where to look.
Thanks so much
<div class="product-form mfp-link fl f-aie f-wrap mb10{% unless product.available %} hide{% endunless %}">
{%- unless product.options.size == 1 and product.variants[0].title == 'Default Title' -%}
{% assign sizechart = false %}
{%- for option in product.options_with_values -%}
<div class="dd_wrap fl1 js pr_form_item mb20{% if settings.show_swatch %} dn{% endif %}">
<label {% if option.name == 'default' %}class="hidden_txt" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">{{ option.name }}
{% assign optionName = option.name | downcase %}
{% assign sizeOptions = settings.sizeOpt | downcase | replace:", ","," | replace:" , ","," | replace:" ,","," | split: "," %}
{%- if settings.sizechart_link and sizeOptions contains optionName -%}
<a href="#sizechart" class="mfp sizelink" data-effect="mfp-zoom-in">{{ 'products.product.size_chart' | t}}</a>
{%- assign sizechart = true -%}
{%- assign sizechartcontent = true -%}
{%- endif -%}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }} pr_input selectbox" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{%- for value in option.values -%}<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>{%- endfor -%}
</select>
</div>
{%- endfor -%}
{%- endunless -%}
<select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="pr_variants selectbox no-js">
{%- for variant in product.variants -%}
{%- if variant.available -%}
<option{% if variant == current_variant %} selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
{%- else -%}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{%- endif -%}
{%- endfor -%}
</select>
{%- comment -%}**** product swatches **** {%- endcomment -%}
{%- if settings.show_swatch and product.variants.size > 0 and product.variants[0].title != 'Default Title' -%}
{%- for option in product.options -%}{% include 'swatch' with option %}{%- endfor -%}
{%- endif -%}
</div>
{% capture sizechartData %}
<div id="sizechart" class="mfpbox mfp-hide mfp-with-anim tc">
{%- assign prtype = product.type | handleize | append: "-size-chart" -%}
{%- assign prbrand = product.vendor | handleize | append: "-size-chart" -%}
{%- if product.metafields.my_fields.sizechart != blank -%}
{{ product.metafields.my_fields.sizechart }}
{%- elsif settings.sizechart_type == "type" and pages[prtype].content != empty -%}
{{ pages[prtype].content }}
{%- elsif settings.sizechart_type == "brand" and pages[prbrand].content != empty -%}
{{ pages[prbrand].content }}
{%- else -%}
{{ pages[settings.sizechart_page].content }}
{%- endif -%}
</div>
{% endcapture %}
{% capture productTabs %}
{% include 'upsell' %}
{% if section.settings.show_product_tabs %}
<div class="tbs_lst {{ settings.tab_postion}} {{settings.tab_style}} wow fadeIn">
{% if settings.tab_stl != "acctab" %}
<ul class="fl product-tabs {{settings.tab_style}}{% if settings.tab_align == "center" %} f-jcc{% endif %} small--hide">
{% for block in section.blocks %}
{%- if block.type == 'metafields' -%}
{%- if product.metafields.my_fields[block.settings.key] != blank -%}
<li><a class="tablink" href="#tab{{block.id}}">{{block.settings.title}}</a></li>
{%- endif -%}
{%- elsif block.type == 'sizechart' -%}
{% if sizechart %}<li><a class="tablink" href="#tab{{block.id}}">{{block.settings.title}}</a></li>{% endif %}
{%- else -%}
<li><a class="tablink" href="#tab{{block.id}}">{{block.settings.title}}</a></li>
{%- endif -%}
{% endfor %}
</ul>
{% endif %}
<div class="tbs_wrp{% unless section.settings.show_product_tabs %} noTabs{% endunless %}">
{% for block in section.blocks %}
{% capture blockTitle %}
{%- if section.settings.show_product_tabs -%}
<h3 class="acor-ttl{% if settings.tab_stl != "acctab" %} medium-up--hide{% endif %}"><a class="tablink" href="#tab{{block.id}}">{{block.settings.title}} <i class="at at-angle-down-r" aria-hidden="true"></i></a></h3>
{%- else -%}
<h3 class="h2">{{block.settings.title}}</h3>
{%- endif -%}
{% endcapture %}
{%- case block.type -%}
{% when 'descriptions' %}
{{blockTitle}}
<div id="tab{{block.id}}" class="tb_cnt {% if settings.tab_stl == "acctab" %}acrd{% endif %}"><div class="tb_pr_desc">{{ product.description }}</div></div>
{% when 'review' %}
{{blockTitle}}
<div id="tab{{block.id}}" class="reviewtab tb_cnt {% if settings.tab_stl == "acctab" %}acrd{% endif %}">
{% include 'reviews' %}
</div>
{% when 'sizechart' %}
{%- assign sizechartcontent = false -%}
{% if sizechart %}
{{blockTitle}}
<div id="tab{{block.id}}" class="tb_cnt {% if settings.product_latyout == "style3" %}acrd{% endif %}">{{sizechartData}}</div>
{% endif %}
{% when 'custom' %}
{{blockTitle}}
<div id="tab{{block.id}}" class="tb_cnt {% if settings.tab_stl == "acctab" %}acrd{% endif %}">{{block.settings.content}}</div>
{% when 'metafields' %}
{%- if product.metafields.my_fields[block.settings.key] != blank -%}
{{blockTitle}}
<div id="tab{{block.id}}" class="tb_cnt {% if settings.tab_stl == "acctab" %}acrd{% endif %}">{{product.metafields.my_fields[block.settings.key]}}</div>
{%- endif -%}
{%- endcase -%}
{% endfor %}
</div>
</div>
{% endif %}
{% endcapture %}
{%- if sizechartcontent -%}<div class="hide">{{sizechartData}}</div>{%- endif -%}
Hi @foveo
Could you please send me collaborator code and also share a screenshot showing where you want to add the vendor? I will set it up directly in your store.
Best regards,
Devcoder
Thank you I dm’d you.
I’m not sure how this works, I’m new to this. Thanks
Thank you yes correct that’s what I’m looking to do. But I’m not a Developer so just looking for guidance on exactly how to do it or the code that I would use or help with it. Thank you very much.
You don’t need to be a developer. Shopify Sidekick can do practically anything you want.
Hi there 
Yes, this is definitely possible, but the implementation depends on how your new theme handles product information and custom content.
One approach is to create a separate size chart for each vendor (for example, “Nike Size Chart”, “Adidas Size Chart”, etc.) and then display the appropriate chart based on the product’s vendor. You could achieve this with custom code, metafields, or theme customization, but it may require additional development work depending on the theme you’re moving to.
If you’re looking for a no-code option, you might want to check out Easify Custom Product Options 
I’ve created a similar setup to help illustrate how it works.
With Easify, you can create a Modal (Popup) that contains the relevant size chart image or content, then use Conditional Logic to display the correct size chart based on the product. You can also choose to show the size chart link only when products have a specific option such as Size, which sounds very similar to the setup you’re using now.
What I like about this approach is that you don’t need to edit theme code whenever you add a new vendor. You can simply manage the size charts directly from the app and assign them to the relevant products.
It may be worth considering if you’re looking for a more flexible solution while switching themes
You can handle this seamlessly without writing custom theme liquid or JavaScript files by using Misk Variant & Product Options.
Instead of worrying about theme capability limits, the app lets you build completely dynamic conditions that automatically display your sizing details exactly when and where they belong:
Add Size Buttons Globally: Use the app to create a reusable Size Button Option Set that can load across your entire catalog.
Inside the app, you can create unique option sets for individual brands and use the visibility trigger to show on selected products based on the Vendor name.
This allows you to effortlessly map a precise “[Vendor] Size Chart” or structural popup layout uniquely to that brand’s product catalog without writing a single line of theme code.
Hi @foveo .
Your old theme did three simple things.
Showed the link only if the product had a Size option.
Matched the product’s vendor to a page named [Vendor] Size Chart.
Only showed the link if that page actually existed.
To bring this back, someone would need to add this same logic to your new theme’s product page. Or, a size chart app from the Shopify App Store could handle this without any coding.
off sitewide
July sale — 45% off at checkout, applied automatically. Valid for 60 minutes. One per customer.
Offer ends in
