Every time one of your customers returns an order, you can expect to lose about $30 on average. This is due to all the time and money it takes to have items sent back to you, restock them, and then ship them out again. In total, the cost of online returns now exceeds $200 billion per year in the United States.
Want to reduce this expense? Try adding size charts to your Shopify store.
Indeed, a recent survey found that whenever an order is returned, 75% of the time it’s at least partly because the item doesn’t fit. Size charts will help prevent this from happening, leading to fewer returns (and, therefore, fewer expenses) that you need to deal with.
Below, we’ll show you multiple ways to implement this feature:
For the most common types of product information, such as titles, prices, and descriptions, Shopify themes will typically provide pre-built fields that allow you to simply plug in whatever information you want to display.
But that’s not the case for everything. Sometimes, you may not be able to find a field already available for a particular piece of product data that you need to show to your customers. For example, most themes don’t offer any such field for size charts.
Thankfully, Shopify has a feature called metafields that gives you the ability to create your own custom fields for your storefront.
There are a fair number of steps involved in setting up a size chart with a metafield on Shopify, but don’t worry — we’ll walk you through every part of the process. First, you need to add a new metafield definition, which will specify what part of your store the metafield applies to and what values it can have:
You can now add an image of a size chart to each product that needs it through the Shopify admin:
Finally, you’ll need to use a bit of Shopify Liquid code in order to get your size chart to actually show up:
Here’s the code that you will need to insert into the “Custom liquid” field:
{% if product.metafields.custom.size_chart.value != blank %}{{ product.metafields.custom.size_chart | image_url: width: 350 | image_tag }} {% endif %}
Take note of how the namespace and key of “custom.size_chart” are referenced in this code — if you used a different namespace and key for your size chart metafield, you’ll need to edit the code accordingly. Also, you may need to adjust the “width” part of your code for the desired size of your image.
The beauty of this particular piece of code is that, with the help of the “if” statement, your new size chart section will only show up if you have uploaded a size chart for a product. That means there won’t be any awkward blank fields on your site — if a size chart doesn’t exist for a product, the entire size chart section will automatically be removed.
The previous section went over how to add images of size charts to your Shopify store.
What if you want to custom-code your size charts instead?
In that case, you will likely find Shogun’s Custom Elements and CMS Collections features to be quite useful.
CMS Collections allow you to build your own custom data models for your Shopify store. To create a CMS Collection for size chart data:
Enter a name for your collection, then use properties to define each individual item in the collection. For example, to create a CMS Collection for a jacket’s size chart, you could create a “Plain Text” property for each of the chest, sleeve, and waist measurements for your small, medium, and large sizes.
Once your CMS Collection has been created, go back to the “CMS” section of the Shogun app and select the new collection. Then, click on the “Add entry” button to enter your data for each property.
CMS Collections make it easy to keep track of all the different types of data that you’re displaying on your store. Also, they make the process of updating content much more efficient. Whenever you make a change to the data, this update will automatically be reflected on every page where the CMS Collection is deployed — that means there’s no need to go in and edit every single page that features your size chart manually.
Let’s now go over how you can use a CMS Collection to help build a customer-facing feature for your storefront. This is done by combining your CMS Collection with a Custom Element.
Shogun offers a wide range of pre-built, customizable elements that you can add to your Shopify pages with just a couple clicks. But despite the variety of pre-built elements available, you sometimes might not be able to find exactly what you want for your store. In that case, you can use the Custom Elements feature to add your own code whenever you feel the need to do so. And CMS Collections can be assigned to variables in the code for your Custom Element.
To create a Custom Element based on the CMS Collection you just built for your size chart:
For reference, we added the following Liquid/HTML code for this example:
<h1>Size Chart</h1>
<table class="sizeChart" border="0" cellpadding="10" cellspacing="0" width="100%">
<thead>
<tr>
<td></td>
<td>Small</td>
<td>Medium</td>
<td>Large</td>
</tr>
</thead>
<tbody>
<tr>
<td>Chest</td>
<td>{{jacket.small_chest}}</td>
<td>{{jacket.medium_chest}}</td>
<td>{{jacket.large_chest}}</td>
</tr>
<tr>
<td>Sleeve</td>
<td>{{jacket.small_sleeve}}</td>
<td>{{jacket.medium_sleeve}}</td>
<td>{{jacket.large_sleeve}}</td>
</tr>
<tr>
<td>Waist</td>
<td>{{jacket.small_waist}}</td>
<td>{{jacket.medium_waist}}</td>
<td>{{jacket.large_waist}}</td>
</tr>
</tbody>
</table>
As you can see, properties can be referenced in your code using the following format: {{collection_name.property_name}}
We also added some CSS code to spruce up the styling:
.sizeChart{
color: #10173A;
font-weight: 700;
text-transform: uppercase;
}
.sizeChart thead{
background: #10173A;
color: #f16021;
}
.sizeChart tr:nth-child(even){
background: #777C8C;
}
.sizeChart tbody tr td:first-child{
font-size: 20px;
}
Once your Custom Element has been saved, you’ll be able to access it in Shogun’s visual editor:
The live version of the page will always display the most recent size chart data from your CMS Collection.
As mentioned above, Shogun offers plenty of pre-built elements for easy ecommerce content creation. If you’d prefer, you can certainly use these tools to build a size chart instead of uploading an image or messing with any code.
First, you’ll need to import the page you want to edit from Shopify into Shogun:
You can now use Shogun’s visual editor to make your edits to the page:
After adding the table for your size chart, save and publish your changes to the page.
With Shogun, you can quickly whip up size charts for any product page that needs it, helping you achieve a higher conversion rate and ultimately generate more sales.
