In this customization, we’re going to add a size chart to your shopify store. We have a few different ways to approach this, but they’re all pretty straightforward so if you’re new to customizing your shopify store this is a great one to learn with.
Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).
Same size chart for all products (static method)
In line size chart Custom Liquid Block code
You can replace “size-chart” with the handle of your page
{% assign my_page = pages['size-chart'] %}
<div class="custom-page-content">
{{ my_page.content }}
</div>
<style>
.custom-page-content {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.custom-page-content img {
max-width: 100%;
height: auto;
}
</style>
Size chart in Collapsible Row
- Add Collapsible Row block
- Select size chart page
Pop-up
- Add Pop-Up block
- Select size chart page
Size chart changes per product (dynamic method)
Edit main-product.liquid with your choice of size chart type
In line size chart with a custom Page Block
Add Page Block option
{%- when 'page_block' -%}
{% if block.settings.page != blank %}
{% assign selected_page = pages[block.settings.page] %}
<div class="custom-page-block">
{% if block.settings.hide_page_title != true %}
<h2>{{ selected_page.title }}</h2>
{% endif %}
<div>{{ selected_page.content }}</div>
</div>
<style>
.custom-page-block {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.custom-page-block img {
max-width: 100%;
height: auto;
}
</style>
{% endif %}
Add schema code
{
"type": "page_block",
"name": "Page Block",
"settings": [
{
"id": "page",
"type": "page",
"label": "t:sections.main-product.blocks.popup.settings.page.label"
},
{
"type": "checkbox",
"id": "hide_page_title",
"label": "Hide Page title",
"default": false
}
]
},
Size chart in Collapsible Row
Add code for the collapsible row under {%- when 'collapsible_tab' -%}
{%- assign collapsible_content_exists = false -%}
{%- if block.settings.content != blank or block.settings.page.content != blank -%}
{%- assign collapsible_content_exists = true -%}
{%- endif -%}
{%- if collapsible_content_exists or block.settings.hide_empty_collapsible_tab == false -%}
.... existing code ...
{%- endif -%}
Add settings in the schema for the collapsible tab
{
"type": "checkbox",
"id": "hide_empty_collapsible_tab",
"label": "Hide empty collapsible tab",
"default": false
}
Pop-up
Add code for the popup block under {%- when 'popup' -%}
{%- assign popup_content_exists = false -%}
{%- if block.settings.page.content != blank -%}
{%- assign popup_content_exists = true -%}
{%- endif -%}
{%- if popup_content_exists or block.settings.hide_empty_popup == false -%}
.... existing code ...
{%- endif -%}
Add if statement under {%- for block in popups -%}
{% if block.settings.hide_popup_title != true %}
... page title code...
{% endif %}
Add settings in the schema for the popup
{
"type": "checkbox",
"id": "hide_empty_popup",
"label": "Hide empty Pop-up",
"default": false
},
{
"type": "checkbox",
"id": "hide_popup_title",
"label": "Hide Pop-up page title",
"default": false
}