How to setup size chart for products

Prerequisites:

Install meta field editor from Shopify app store - Metafields Guru (You can use your preferred app to manage meta fields)

- Common size chart for all products that have a size option

    Creating a single image size-chart

  1. Navigate Shop admin -> Online Store -> Pages and then create a new page.
  2. Input page name, select Paragraph, and then insert an image.
  3. Select page.size-chart from template dropdown settings.
  4. Save the page and then go to the products page from admin.
  5. Select one of the products that have size variations.
  6. Create size variations. In the option name add a suffix [size] so that our theme can understand this is a size option.
    So for example in English, add/rename the size option from Size to Size[size]. In French, you can name the size option like La Taille[size]
  7. Go to theme customization window and then go to Theme Settings -> Product -> Product Page Configuration. Enable Show general size chart for all products and select Size Chart Page with the one we created in the above steps.


    Adding more images and enable carousel

  1. Navigate Shop admin -> Online Store -> Pages and then open the size chart page.
  2. Move the caret next to the first image and then brake to a new line. By adding images in a new line, we are telling the theme it is a separate image. Insert another image and then save.


    Adding size tables

  1. Navigate Shop admin -> Apps -> Megafields Guru and then open the size chart page.
  2. Create a meta field and input values.
    Key: Input name of the content. e.g Size Guide or How to measure
    Namespace: tab_size_guide (this must be always tab_size_guide)
    Value type: String
    Value: Input any string or HTML to show in your size chart
  3. You can add multiple tables in one meta field.


    Adding more tabs in the size chart

  1. You can add more meta fields to show switchable tabs.
  2. Create a new meta field and then input values
    Key: Input name of the content. e.g Size Guide or How to measure
    Namespace: tab_size_guide (this must be always tab_size_guide)
    Value type: String
  3. Input text and style. You can use Visual Editor to do this.


- Special size chart for individual products

  1. Create a new size chart as we did in the earlier steps.
  2. Click Edit Website SEO at the bottom of the page. You will see an expanded panel. At the end of this block, there is a field URL and handle.
  3. Copy page handle (editable part of this field).
  4. Go to Online Store -> Apps -> Metafields Guru.
  5. Open a product to show the special size chart.
  6. Create a meta field and input values:
    Key: size_chart (Should be always size_chart)
    Namespace: tab_size_guide (Should be always tab_size_guide)
    Value: Paste the copied page handle
  7. Save changes


Video Tutorial



Did this solve your problem?