Metafields - Display a size chart on product pages

[JasonH]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

You can add a dynamic metafield to your product pages by adding a Custom liquid block to your product template. Different metafield content types will require different liquid code for them to display. 

To begin, create your size chart metafield, if this is your first time creating a metafield please follow our help document Adding metafield definitions. For this example, we will be using a metafield with the default Namespace of “my_fields” and a Key named “size_chart”. This metafield is set up with the content type File with the additional rule that only image files are accepted in this metafield. 

After your metafield is set up, you will need to upload your size guide image files to each of your respective products’ details page in the admin. The Metafields section is found at the bottom of this page in the admin.

Linking the metafield to your Online Store 2.0 theme:

Now that you have products with size charts uploaded in your admin, you are ready to create a new block within your default product template in your theme. Open up your theme editor and head to your default product page. To add this block:

1. Add a “Custom liquid” block found in the Product information section
2. Add your metafield definition
   For example
   

   {{ product.metafields.my_fields.size_chart }}

   wrapped in curly brackets just like a liquid object
3. Apply the image_url filter and assign a width
4. Add the Image tag
5. In the case that not all your products have a size chart, this field will still appear as a blank space on products using the default template. We need to account for this by filtering with a condition in the liquid code. This is where the metafield.value object comes into play, the block will only execute if the metafield value is present for the product displayed.

The finished product should look like this: 

{% if product.metafields.my_fields.size_chart.value != blank %}{{ product.metafields.my_fields.size_chart | image_url: width: 350 | image_tag  }} {% endif %}}

You can also use HTML in the Custom liquid block to add some context and styling to the size chart image

{% if product.metafields.my_fields.size_chart.value != blank %} <p>Size chart {{ product.metafields.my_fields.size_chart | image_url: width: 350 | image_tag  }} </p> {% endif %}

Note: Because every theme is different, when you make these changes, the styling might not appear as expected. This guide uses the Dawn theme as an example.

This custom block will now appear only on products that contain a size chart, the file you uploaded to your custom metafield on the backend of the product.

[meo_me]

@JasonH Hi Jasoh,

where I can find the location to add the code in the code editor for dawn theme? is it base.css? thanks 

[JasonH]

@meo_me 

Thanks for running with our tutorial. I've updated the steps with a screenshot and it should be helpful to guide the setup through. 

Let me know if you have any questions along the way.

[MrL22]

Thank you for this, I was looking for a very similar thing and ended up developing this free tool which can be implemented easily into your theme. https://webforward.github.io/shopify-tables/ 

[Sharon15]

Hi, I am updating my shop with one of the new themes and need to do this.  My concern here is that the image file has no alt text that I can see, which is really important for ADA compliance.  Can you address that, or suggest an alternative way to get sizing charts into the theme in an attractive/readable way?

[danloomer]

Hi @Sharon15 , you can add alt text to an image through the Shopify admin. Either by clicking on the thumbnail on the metafield file reference row:

Or by going to settings -> files and clicking on the row with the file you want to add alt text to. 

When you render it in liquid using the `image_tag` filter (as shown in this tutorial)  it should include the alt text automatically for you.