How to create a product size chart

A size chart is an important feature, especially for fashion sellers, to help visitors select the best fit.

There are two ways to add a product size chart - using the Image or the Liquid element. Let's dive in!

Use an image element

Step 1: From the GemPages dashboard, open the page you want to edit. You can quickly find the Image element on the left sidebar of the Editor. Next, drag & drop the element to any position you prefer.

Step 2: Click on the element to reveal the configuration options in the left sidebar. Upload the image of the size chart under the Settings tab's Image section.

 

Use a Liquid element

This method involves coding - but you don't actually need to write it yourself! Simply follow the steps below:

 

Step 1: From your Shopify Admin > Products > All Products, select your preferred product.

Step 2: Under the Description section, create a size chart with the Table function. Hit “Save” when finished. 

 

 

Step 3: Get the code of the size chart by clicking on the "Show HTML" button in the top right corner of the description. 

Next, copy all code lines.

 



 



Step 4: From the GemPages dashboard, open the page you want to edit. You can quickly find the Liquid element on the left sidebar of the Editor. Next, drag & drop the element to any position you prefer.

 

 

Step 5: Right-click on the Liquid element, then select “Edit” to open the code panel.

 

 

Paste the code you copied earlier to the Template panel. Hit “Save” when finished. 

 

 

Please be noted that the size chart will not be displayed in the Editor. After everything is in place, hit “Save” and check how the size chart looks like with the "Preview" button.

 

 

 

If you're satisfied with the result, click "Publish" to bring the size chart to your live store.

 

If you're interested in learning more about the powerful and user-friendly features of GemPages, check out more articles here or reach our GemPages Support Team via email or live chat .


Was this helpful?