How to add a size chart to the Dawn Theme?

Web_Dev_
Tourist
10 0 1

Screenshot 2024-05-06 at 3.42.10 AM.png

I want to achieve this, but I'm stuck in the last part because I can't find `<variant-radios>` in `main-product.liquid` (Dawn theme 14.0.0). Any help would be great!

(GUIDE HERE --> https://ecommercepot.com/shopify-qa/size-chart/ )

Replies 8 (8)

Sonya_2025
Shopify Partner
168 23 34

Hey @Web_Dev_ 

 

You can find the <variant-radios> code here

theme code editor --> snippets --> product-variant-picker.liquid

 

Hope this helps

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
Motivate me by  PAY ME
Web_Dev_
Tourist
10 0 1

{% comment %}
Renders product variant-picker

Accepts:
- product: {Object} produact object.
- block: {Object} passing the block information.
- product_form_id: {String} Id of the product form to which the variant picker is associated.
- update_url: {Boolean} whether or not to update url when changing variants. If false, the url isn't updated. Default: true (optional).
Usage:
{% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}
{%- unless product.has_only_default_variant -%}
<variant-selects
id="variant-selects-{{ section.id }}"
data-section="{{ section.id }}"
data-url="{{ product.url }}"
{% if update_url == false %}
data-update-url="false"
{% endif %}
{{ block.shopify_attributes }}
>
{%- for option in product.options_with_values -%}
{%- liquid
assign swatch_count = option.values | map: 'swatch' | compact | size
assign picker_type = block.settings.picker_type

if swatch_count > 0 and block.settings.swatch_shape != 'none'
if block.settings.picker_type == 'dropdown'
assign picker_type = 'swatch_dropdown'
else
assign picker_type = 'swatch'
endif
endif
-%}
{%- if picker_type == 'swatch' -%}
<fieldset class="js product-form__input product-form__input--swatch">
<legend class="form__label">
{{ option.name }}:
<span data-selected-swatch-value="{{ option.name }}">
{{- option.selected_value -}}
</span>
</legend>
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
</fieldset>
{%- elsif picker_type == 'button' -%}
<fieldset class="js product-form__input product-form__input--pill">
{%- liquid
assign optionNames = settings.optionName | split:","
assign useColor = false
for optionColor in optionNames
if optionColor == option.name
assign useColor = true
break
endif
endfor
-%}
{%- if useColor -%}
<legend class="form__label ">{{ option.name }}:<span id="selected-{{ option.name }}"> {{ option.selected_value }}</span></legend>
{% render 'color-option', product: product, option: option, block: block %}
{%- else -%}
<legend class="form__label">{{ option.name }}</legend>
{% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %}
{%- endif -%}
</fieldset>
{%- else -%}
<div class="product-form__input product-form__input--dropdown">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
{%- if picker_type == 'swatch_dropdown' -%}
<span
data-selected-dropdown-swatch="options[{{ option.name | escape }}]"
class="dropdown-swatch"
>
{% render 'swatch', swatch: option.selected_value.swatch, shape: block.settings.swatch_shape %}
</span>
{%- endif -%}
<select
id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
>
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endif -%}
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{%- endunless -%}

 

This is the product-variant-picker.liquid but no <variant-radios> here.

Sonya_2025
Shopify Partner
168 23 34

Yes, your code missing <variant-radios> code. May be you can compare the dawn default theme without any changes to find the code back.

Feel free to reach out if any further questions

 

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
Motivate me by  PAY ME
Web_Dev_
Tourist
10 0 1

This is a completely new theme without any modifications, and it still doesn't have the <variant-radios>.

 

{% comment %}
Renders product variant-picker

Accepts:
- product: {Object} product object.
- block: {Object} passing the block information.
- product_form_id: {String} Id of the product form to which the variant picker is associated.
- update_url: {Boolean} whether or not to update url when changing variants. If false, the url isn't updated. Default: true (optional).
Usage:
{% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}
{%- unless product.has_only_default_variant -%}
<variant-selects
id="variant-selects-{{ section.id }}"
data-section="{{ section.id }}"
data-url="{{ product.url }}"
{% if update_url == false %}
data-update-url="false"
{% endif %}
{{ block.shopify_attributes }}
>
{%- for option in product.options_with_values -%}
{%- liquid
assign swatch_count = option.values | map: 'swatch' | compact | size
assign picker_type = block.settings.picker_type

if swatch_count > 0 and block.settings.swatch_shape != 'none'
if block.settings.picker_type == 'dropdown'
assign picker_type = 'swatch_dropdown'
else
assign picker_type = 'swatch'
endif
endif
-%}
{%- if picker_type == 'swatch' -%}
<fieldset class="js product-form__input product-form__input--swatch">
<legend class="form__label">
{{ option.name }}:
<span data-selected-swatch-value="{{ option.name }}">
{{- option.selected_value -}}
</span>
</legend>
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
</fieldset>
{%- elsif picker_type == 'button' -%}
<fieldset class="js product-form__input product-form__input--pill">
<legend class="form__label">{{ option.name }}</legend>
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
</fieldset>
{%- else -%}
<div class="product-form__input product-form__input--dropdown">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
{%- if picker_type == 'swatch_dropdown' -%}
<span
data-selected-dropdown-swatch="options[{{ option.name | escape }}]"
class="dropdown-swatch"
>
{% render 'swatch', swatch: option.selected_value.swatch, shape: block.settings.swatch_shape %}
</span>
{%- endif -%}
<select
id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
>
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endif -%}
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{%- endunless -%}

Sonya_2025
Shopify Partner
168 23 34

Yes, you are right. Dawn theme 14 has removed <variant-radios> tag.

So this solution may not work for you. However, pls refer to the this document

Hope this helps.

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
Motivate me by  PAY ME

oscprofessional
Shopify Partner
15897 2378 3084

Hello @Web_Dev_ 

To correctly add a size chart to the product page, follow the steps below:

Step 1: First, create a page named "Size Chart" and input the size chart information onto the page, as depicted in the screenshots below.

 

oscprofessional_0-1714987298813.png

 

step 2: Go to customization -> product page -> under product information add "pop up" block -> name it size chart ->choose page that's created "size chart" like below image

 

oscprofessional_1-1714987832290.png

result:

oscprofessional_2-1714987917114.png

 

oscprofessional_3-1714987944660.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Web_Dev_
Tourist
10 0 1

I can't use this solution because my size chart is different for every product. So, I created an image metafield, but I can't insert it into normal pages because it's not standard HTML; it's liquid code. Also, I need it to appear near the word 'size,' not underneath it on a separate line.

MRamzan
Shopify Partner
165 1 21

Add a size chart to the Dawn Theme:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112