Size guide

This feature allows you to add a Size Guide that opens in a modal window when customers click a "Size Guide" button near the size variant selector. This enhances the user experience and reduces returns due to sizing issues.

Step 1: Create the Size Guide Page

  1. Go to your Shopify Admin → Online Store → Pages.

  2. Click Add Page.

  3. Title it something like Size Guide.

  4. In the content area, insert either:

    • A table with your size data,

    • Or an image containing a sizing chart.

    To insert custom HTML code:

In the content editor toolbar, click the “Show HTML” icon (it looks like <>). Paste your HTML code directly into the editor or from our example.

  1. Click Save.

Step 2: Assign the Page in the Theme Editor

Now link this page to the product section where the size guide should appear.

You can use any of the following sections:

Option 1: On the Product Page

  1. Open the Theme Editor (Customize).

  2. Navigate to a product page.

  3. Select the Product information section.

  4. In the Size guide page setting, choose the page you created (e.g., Size Guide).

Option 2: Featured Product Section

  1. Navigate to any section using Featured Product.

  2. Locate the Size guide page setting.

  3. Select your Size Guide page.

Option 3: Quick View Modal

  1. In the Quick View section settings (if implemented), find Size guide page.

  2. Choose your previously created size guide.

Best Practices

  • You can create multiple size guide pages if needed (e.g., Men’s, Women’s, Kids’) and assign them dynamically via metafields or custom logic if implemented.

  • You can use our sizing table template to save time and keep a consistent theme style.

Optional: Use Metafields for Dynamic Size Guides

If you have multiple product types with different size guides (e.g., Men’s, Women’s, Shoes), you can use product metafields to assign a different guide per product.

How to Set It Up

  1. In your Shopify Admin, go to Settings → Custom data → Products.

  2. Click Add definition and create a metafield:

    • Name: Size guide

    • Namespace and key: custom.size_guide

    • Type: Page

  3. Save the definition.

  4. Go to a product and assign a page to the new Size guide metafield.

Shopify Documentation

Add custom product metafields

How It Works

  • After selecting a Size Guide page and saving:

    • If a product has a variant named "Size", the standard “Size” label is replaced with a “Size Guide” button.

    • When users click the Size Guide button, a modal window opens displaying the content of your selected page.

    • If a metafield is assigned to the product, it overrides the manually set guide in the section.

This works both with tables and images inside the selected page.

PreviousCustom CSSNextSize guide table