How to Add Shopify Size Chart

Nov 19, 2020

116 Dmitriy Parhomenko

How to Add Shopify Size Chart

In this article, you will learn about three ways to add a Shopify size chart to your online shop. First of all, you can add it by editing the theme code. Another way is to implement the size chart popup by adjusting theme code and one more way is to use the Shopify App Store. This article will help you to make up your mind regarding the best choice for your ecommerce website. After reading it, you can choose the one that works best for you.

How to add the Shopify size chart by editing the theme code
How to add the Shopify size chart pop-up by editing the theme code
How to add the Shopify size chart pop-up using the Shopify App Store

Why do you need size charts?

Did you know that the majority of returns of apparel from the ecommerce websites happen because the customer is not satisfied with the product size? High return rates resulting in lost revenue can be traced directly to sizing issues. Uncertainty about the product size is why a lot of online customers choose brick-and-mortar shops. According to the statistics, 30% of all products ordered online are returned as compared to 8.89% in brick-and-mortar stores

The problem is that there is no decent size chart on the ecommerce websites which leads to the sizing issues. For instance, 65% of the returns occur because the clothing fits poorly. So, if you sell items that require customers to specify their size before they make a purchase, you can add a special custom size chart to your product page. It will help you increase customer trust, boost sales, and reduce the rate of return.

Sizing charts on the Shopify platform can be of 2 types: they are either placed on the product page or are presented in the pop-up form. You can create a size guide pop-up on Shopify by editing the code or by installing an app from the Shopify App Store.

ecommerce development

Build custom Shopify solutions with BelVG

Let your customers use Shopify size chart

Contact us

How to add the Shopify size chart by editing the theme code

All products that require reference to the size chart must have a Size option. First of all, you need to create size variations:

shopify-chart-1

 

To create a table with sizes, you need to do the following:

  1. First of all, you should open Online Store > Pages
  2. Then, you should click Add page
  3. Enter Size chart for the page title
  4. You should create a table that contains your size chart information in the Content box

 

shopify-size-chart-2

 

5. In the Visibility section, make sure the page is set to Visible
6. Do not forget to click Save
7. Then, go to Online Store > Themes
8. Find the theme you want to edit, and then you should click Actions > Edit code
9. In the Sections directory, you need to click to open your product-template.liquid file
10. Then, add a Size chart section with the following code below the Add to cart form:


 

shopify-size-chart-3

 

11. Do not forget to click Save

If the product has size, the size chart section will be displayed like this:

 

shopify-size-chart-4

How to add the Shopify size chart popup by editing the theme code

Let’s consider how to create a new page with a size chart.

  1. To open a popup in the product-template.liquid, you need to add the following trigger to the Section directory:


shopify-size-chart

 

           2. Click the Layout directory to open your theme.liquid file

           3. Paste the following code before </body> to add a size chart popup:


shopify-size-chart-popup-modal

 

4. Enter the following code to add a new asset popup.js in the Assets directory:


shopify-size-chart-assets-directory

 

5. Click the Assets directory to open your theme.css file
6. At the bottom of the file add styles for the popup:


 

Now the size chart popup is ready:

 

shopify-size-chart-11

How to add the Shopify size chart popup using the Shopify App Store

1. BF ‑ Size Charts & Size Guides

You can create size charts with a wide range of options:

  • Add custom titles, descriptions and images
  • Create custom size charts
  • Select the products, collections, or vendors to implement the size chart
  • A link to your size chart will be displayed near the relevant product

View example store

2. Size Chart ‑ Clothes Fit Guide

The application has the following characteristics:

  • Simple install with no coding required
  • Easy size guide setup
  • A pack of templates for clothes, shoes sizes, lingerie that allows you to start from scratch or use presets of sizing guides
  • Powerful tools for finding perfect match size charts for products. Moreover, you can save time with a match in bulk option
  • Auto conversion of the units of measurements (US/UK sizing) with geo detection
  • Fresh and beautiful design which allows you to display the size chart popup directly on the product page
  • Customizable widget button which you can place near floating or Add to Cart button. Besides, you can easily edit colors and styles
  • A partner-friendly app that you can test in your store under development

If you face any problems or need some help, we are always here for you to provide timely support!

Comparison of the two applications

BF ‑ Size Charts & Size Guides is simpler and has a modest design for the admin and frontend parts.

 

shopify-size-chart-gif

 

One of the advantages is a responsive design, but the size table is not easy to read:

 

shopify-size-chart-gif-mobile

 

This app has settings for the pop-up button display:

 

shopify-size-chart-button-icon

 

Size Chart ‑ Clothes Fit Guide has a beautiful design in the admin part with the preview Size Guide: 

 

shopify-size-chart-preview-size-guide

 

 

 

shopify-size-chart-button-title

 

This app has a fixed size chart opening button and a beautiful readable responsive design:

 

shopify-size-chart-responsive-design

 

There are settings for the widget size guide:

 

shopify-size-chart-widget-size-guide

 

These apps perform their function well. You can choose any of them depending on the situation.

Good sales to you!

Vlad Yunusov

Partner With Us

Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Vlad

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *