One of the key components to having a high-performing fashion and apparel store is enabling your customers to find the right fit when they order a product from you.
When you don’t, it’s only a matter of time before you start getting returns. In fact, 30% of online purchases are returned compared to 8.89% of products purchased from brick-and-mortar stores. Some of the main reasons for this, particularly in the clothing and apparel industry, are product fit and quality.
If you’re looking to make your store successful long-term (which we’re sure you are), then you’re already selling the highest quality products you can for the price point you’re charging at. And on the product fit side, there are a variety of ways to solve the potential issue of having customers return your products because something doesn’t fit.
Some stores have started enabling virtual try-ons with tools like EyeFitU and Wair, while others have taken the route of allowing customers to order multiple items, try them on at home, and return the ones that don’t fit, only paying for what they keep.
The simplest method, though, is an oldie but goody. It’s your friend the size chart.
Since you’re reading this, we’re going to assume you’re interested in making sure your customers get the right fit the first time they order something, rather than the second, third, or even fourth time, because third time’s the charm doesn’t work in the apparel industry. Customers are more likely to request a refund and just take their business somewhere else when nothing seems to fit how they expect.
So here’s the low-down on what it takes to add a size chart to product pages on your website.
How to Create a Size Chart for Shopify
There are three ways to add a size chart to Shopify. Two involve heavy coding, while the third involves using a Size Chart App from the Shopify App Store.
If you have coding experience, you can definitely do the first two methods on your own. If you don’t have any coding experience or are just a beginner, though, then the final method is where we’d recommend spending your time if you want to learn how to add size charts to Shopify.
To that end, here’s the first method:
Method 1: Add a size chart to product pages
This method will involve directly editing your theme with the coding skills we mentioned earlier. If you don’t have coding skills or aren’t working closely with a developer, we’d recommend skipping ahead to Method 3 and finding a size chart app that best fits your needs.
Your first step with this method will be to duplicate your theme. That way, if anything’s done incorrectly, there won’t be any issue recovering what was lost. We’ve also found that tools like Rewind Backups are great for helping prevent data loss when making changes like this on your own. For this method, though, we’ll assume you don’t have Rewind and suggest making a copy of the theme you want to work on.
Next, you’ll need to create size variations for all of the products you want to reference with the size chart.
From there, you’ll create a table with your different size options using the following steps:
- Login to your Shopify backend
- Open “Online Store > Pages”
- Click “Add Page”
- Create a table using the Content Box
- Set the page to “visible” using the “visibility section”
- Click “save”
- Open “Themes” under the “Online Store” option
- Find the theme you’re editing, then click “Actions > Edit Code”
- Find the “Section” directory, then click to open your product-template.liquid
- Add a size chart section and your written code below your “add to cart” form.
Once you’ve saved your code, you’re good to go! All of the products you’ve assigned sizes to will display the size chart you’ve just created on their product pages, below the “add to cart” button.
Method 2: Create a Size Chart Popup
This second method is going to be a lot more coding heavy than the first and will require you to write three sets of code.
First, you’ll want to add a pop-up trigger within your “Section” directory.
Then, you’ll want to add specific code for how your size chart looks to your “Layout” directory.
Finally, you’ll add a new asset to your “Assets” directory.
Here are the steps in detail:
- Open “Online Store > Themes”
- Find the theme you’re editing and click “Actions > Edit Code”
- Open your product-template.liquid and add a pop-up trigger within the “Section” directory (Code Set 1).
- Open your theme.liquid file in the “Layout” directory
- Add the code for your size chart popup before </body> (Code Set 2).
- Find the “Assets” directory and paste in Code Set 3 to add a new asset popup.js
After you’ve completed these steps, your popup will appear on all of the product pages you indicated in your code.
Method 3: Use a Shopify Size Chart App
There are hundreds of app options in the Shopify App store that can help you add size charts to your website. Our favorite, though, is Clean Size Charts.
With this app, you have six clothing size chart templates to choose from, or you can design your own. Each template is customizable, so you can add images, change the colors and layout, and choose between three ways of showcasing your size charts:
- As a pop-up or floating size chart
- As an inline link
- As an inline table
You can also assign your size charts to entire collections and individual products, or offer international sizes, making it easy for your customers to find the right size, regardless of what items they’re looking at or where they’re located.
This app has two pricing tiers to choose from. The first is free and gets you the following:
- Basic Style Customization
- 6 Preset Size Chart/size guide Templates
- Up to 2 size charts/size guides
- Up to 10,000 product page views/month
With the free version, each of your size charts will have a “powered by” watermark. If you’d prefer to not have that watermark, though, you can upgrade to the Premium plan for just $6.99 per month.
Premium unlocks extra benefits, including no watermark, unlimited size charts, and even a Google Analytics integration so you can use click and impressions data to continuously improve and optimize your size charts.
Where to Place Your Size Chart
With all of these methods, it’s important to pay special attention to where you place your sizing chart.
For instance, creating a separate page for your size chart can actually hurt conversions because it takes customers away from your product pages, and thus limits their ability to add the item they were looking at to their cart.
You also want to make sure your size chart is easy to find, so we’d recommend placing it above the fold on each product page or creating a “floating” size chart that stays in the same place when users scroll.
Now, you can easily place your product size chart anywhere on the page, but we’ve found that the most clicked location for a size chart is right next to the size variant options. Something like what you see here:
In doing this, you make it really easy for your customers to find the size chart quickly.
With that in mind, Method 1 results in what we’d call an “Inline Table” size chart. It shows up just below the “add to cart” button. This is a great option if your customers are prone to scrolling rather than wanting to click, or if you want to enable customers to select a size while looking over your size chart at the same time.
On the downside, though, is how it can look on mobile. The text in these types of size charts don’t always dynamically resize themselves, which means you’d likely need to create a separate version of each page just for mobile.
With method 2, you’re able to place the trigger for your popup anywhere on the product page. But with great power comes great responsibility. Like everyone’s favorite friendly neighborhood superhero, you need to be careful where you place your focus if you want to stick the landing.
In the context of size charts for Shopify, that means paying attention to what your data tells you. We’ve already mentioned that placing your size chart right next to the size variant option yields the most clicks and conversions, but that might differ for your store. Using a popup enables you to test various trigger locations over time and see which works best with your customers.
Finally, method 3 combines the pros and cons of both methods above to give you the best of both worlds. With a size chart app like Clean Size Charts, you can add any type of size chart you want, whether it’s inline like option one or a popup like option two. Meaning, it’ll be easier for you to adjust your tactics as data streams in about how your size chart performs.
Final Thoughts
Each of the methods we’ve described can give you beautiful, working size charts for your Shopify store. What the decision comes down to, then, is your coding experience, your time, and your budget for adding a size chart to your product pages.
If options one or two sound like the best fit for you, but you don’t have coding experience, then hiring a developer would be your best bet.
For those of you who would prefer to add and design a size chart yourself, option three is the way to go, regardless of whether you choose to use Clean Size Charts or another size chart app from the Shopify store.
No matter which option you choose, make sure you pay special attention to where you place your chart, and don’t be afraid to tweak it as data comes in.
Ultimately, the decision is up to you. If you have questions, though, we’re happy to help however we can.