How to add a size chart to the Dawn Theme?

Store Design
, ,
1

Screenshot 2024-05-06 at 3.42.10 AM.png
Screenshot 2024-05-06 at 3.42.10 AM.png1510×1268 111 KB

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/ )

2

Hey @Web_Dev_1

You can find the code here

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

Hope this helps

1 Like
3

Hello @Web_Dev_1

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
oscprofessional_0-1714987298813.png1921×844 89.7 KB

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
oscprofessional_1-1714987832290.png1921×844 275 KB

result:

oscprofessional_2-1714987917114.png
oscprofessional_2-1714987917114.png1921×844 208 KB

oscprofessional_3-1714987944660.png
oscprofessional_3-1714987944660.png1921×844 49.4 KB

4

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.

5

{% 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’ -%}

{{ option.name }}: {{- option.selected_value -}} {% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %} {%- elsif picker_type == 'button' -%} {%- 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 -%} {{ option.name }}: {{ option.selected_value }} {% render 'color-option', product: product, option: option, block: block %} {%- else -%} {{ option.name }} {% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %} {%- endif -%} {%- else -%}
{{ option.name }}
{%- if picker_type == 'swatch_dropdown' -%} {% render 'swatch', swatch: option.selected_value.swatch, shape: block.settings.swatch_shape %} {%- endif -%} {% render 'icon-caret' %}
{%- endif -%} {%- endfor -%} {%- endunless -%}

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

6

Yes, your code missing 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

7

This is a completely new theme without any modifications, and it still doesn’t have the .

{% 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’ -%}

{{ option.name }}: {{- option.selected_value -}} {% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %} {%- elsif picker_type == 'button' -%} {{ option.name }} {% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %} {%- else -%}
{{ option.name }}
{%- if picker_type == 'swatch_dropdown' -%} {% render 'swatch', swatch: option.selected_value.swatch, shape: block.settings.swatch_shape %} {%- endif -%} {% render 'icon-caret' %}
{%- endif -%} {%- endfor -%} {%- endunless -%}
8

Yes, you are right. Dawn theme 14 has removed tag.

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

Hope this helps.

9

Add a size chart to the Dawn Theme:

10

Looking for the same solution. Did you find any?