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
You can recreate this behavior in your new theme with a small Liquid condition in your product template.
First, check if the product has a Size option. Then, generate the size chart page handle dynamically from the product’s vendor.
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.