Free international shipping on orders over $99

Product Metafield Size Guides

Author: Kate Hoang 141 views

How do I know which size of the product to buy? A size guide is a document that reflects the measurements for your size range within your brand. Typically, your public size chart is characterized by 4 main measurements, bust, waist, hip, and height for clothes. Determine how to select the right shoe size by using Shoe size charts.

The Kalles theme allows you to add 2 types of Size Guide content for your product: A custom page and a custom image. If you wanna add a Size Guide for a specific product, you can configure the Metafield Size Guide following the steps below.

1. Configure Metafield in Shopify Dashboard

In Shopify backend, go to Settings > Metafield option to create a Metafield definition.

Shopify backend > Settings option
Metafields option > Choose Products definitions

Choose Products option and then click the Add definition button to add Metafield definition.

Metafields option > Choose Products definitions

1.1. Add Metafield Size Guide – Image

You need to configure some options below:

  • Name: You can add the name that you wanna show for the Metafield Size Guide – Image here. Example: I added the field Name is: Size Guides.
  • Namespace and key: You can add any keyword here. Example: You can add the key: theme.size_guide or any words you want.
  • Description: You can add the Description for the Metafield Size Guide – Image here. In addition, this is not a required option, so you can choose to add a Description or not.
  • Select Content Type: Please choose the content type is File. This is a required option, if you do not choose the content type is File here, the Metafield Size Guide cannot work correctly.

You guys can configure following my image below:

You can add any key for Size Guide, ex: theme.size_guide

After add all information for definition, please click Select content type button to add a type for Size Guides metafield.

Content type: Files

Then click Save button to save all changes, we will got the metafield definition as image below:

1.2. Add Metafield Size Guide – Page

You need to configure some options below:

  • Name: You can add the name that you wanna show for the Metafield Size Guide – Page here. Example: I added the field Name is: Size Guides Page.
  • Namespace and key: You can add any keyword here. Example: You can add the key: theme.size_guide2 or any words you want.
  • Description: You can add the Description for the Metafield Size Guide – Page here. In addition, this is not a required option, so you can choose to add a Description or not.
  • Select Content Type: Please choose the content type is Reference Page. This is a required option, if you do not choose the content type is Reference Page here, the Metafield Size Guide cannot work correctly.

Actually, you guys can configure following my image below: 

You can add any key for Size Guide, ex: theme.size_guide

After add all information for definition, please click Select content type button to add a type for Size Guides metafield.

Content type: Files

Then click Save button to save all changes, we will got the metafield definition as image below:

2. Configure Metafield in Shopify Dashboard > Products

In Shopify backend, go to Products > All Products option and open the product that you wanna add the Size Guide. Example: I open the Trays and Dishes product:

In the product, please scroll down to the bottom of the page, you will see the Size Guide metafield option. Kindly follow the video below:

3. Configure Metafield Size Guide in Theme Customize

In Shopify backend, click the Customize button to go to Theme backend:

Go to Product page > Choose the product that you wanna configure the Size Guide here:

In Product main, click on Product Form option, on the right side, scroll to bottom of Setting sidebar, you will see the option to choose Metafield here:

Please follow the video below to know how to configure the metafield Size Guide:

4. Configure Size Guide for all products

If you guys don’t wanna configure the Size Guide for a specific product, you can choose a static page/static image for all products without using Metafield. Please follow the instruction below:

4.1. Choose a static page for Size Guide

First one, choose Size Chart type: HTML. Then, in the HTML Size Chart option > Click the Select page button to choose a page for Size Guide.

Example: I wanna choose the Size Guide page > Tick on that page > Click the Select button.

The Size Guide page has been selected to show for all products.

Then the Size Guide page that you selected in the Product page will show on all products or products that have the Size variant.

4.2. Choose a static image for Size Guide

You can configure same with Size Chart type: Image. First one, choose Size Chart type: IMAGE. Then, in the IMAGE Size Chart option > Click the Select Image button to choose an image for Size Guide.

Example: I uploaded a Size Guide image > Tick on that image to pick it > Click the Select button.

The Size Guide image has been selected to show for all products.

On this page

JOIN OUR MAILING LIST AND

Enjoy 10% Off

Your First Order