Enable the size chart on product pages

Maison has a built-in size chart feature that displays a "Size chart" link (with a ruler icon) right next to the Add to Cart button. When a customer clicks it, a modal popup opens with your sizing information — without leaving the product page.

The setup takes two steps: create a page with your size chart content, then turn on the toggle in the Theme Editor.

Important: The size chart link only appears on products that have a variant option containing the word "Size" (or the equivalent in your store's language). Products without a size-type option won't show the link, even when the feature is enabled. This is by design — a size chart on a candle or a vase wouldn't make sense.

On this page

1. How it works
2. How the size trigger works
3. Step 1 — Create a size chart page
4. Step 2 — Enable the size chart in the Theme Editor
5. Step 3 — Verify on the storefront
6. Using different size charts for different products
7. Tips for a great size chart

1. How it works

The size chart feature lives inside the Buy buttons block on the product page — the same block that holds the Add to Cart button. It uses two settings:

• Enable size chart — a toggle (off by default).
• Page — a picker that lets you select a Shopline CMS page containing your size chart.

When both are set, the theme checks whether the current product has a variant option whose name contains the word "Size". If it does, a "Size chart" link with a ruler icon appears in the buy buttons area. Clicking the link opens a modal popup that displays the title and body of the selected page.

The theme automatically styles any HTML table inside the popup with clean borders, equal-width columns, and a subtle hover effect on rows — you don't need to format anything yourself.

2. How the size trigger works

The theme doesn't show the size chart link on every product — it checks whether the product has a variant option whose name contains a specific keyword. The match is case-insensitive.

In English, the keyword is "Size". So all of these option names would trigger the size chart: "Size", "size", "Shoe Size", "Frame Size", "Size / Fit", etc.

For stores in other languages, the trigger word changes automatically:

Language	Trigger keyword
English	Size
Vietnamese	Kích thước
Chinese (Simplified)	尺寸
Chinese (Traditional)	尺寸
Japanese	サイズ
Thai	ขนาด
Malay	Saiz
Indonesian	Ukuran

Customize the trigger keyword

Instead of renaming your variant options, you can change the trigger keyword itself — or add more keywords — from the theme's language editor.

1. From your Shopline admin, go to Online Store > Design.
2. On your Maison theme, click ··· > Edit languages (or Edit default theme content).
3. Search for "size_trigger" (or look under Products > General).
4. You'll see the current value — by default it's Size for English stores.
5. Edit the value. You can add multiple keywords separated by commas — for example:
   • Size, Fit — triggers on options named "Size", "Fit", "Slim Fit", etc.
   • Size, Dimensions — triggers on "Size", "Dimensions", "Product Dimensions", etc.
6. Click Save.

Each keyword is matched independently and case-insensitively using a "contains" check. So Size, Fit means: show the size chart if any variant option name contains "size" or contains "fit".

3. Step 1 — Create a size chart page

Before touching the Theme Editor, you need a page with your sizing data. This is a regular Shopline CMS page — the same kind you'd use for "About us" or "Shipping policy".

1. From your Shopline admin, go to Online Store > Pages.
2. Click Add page.
3. Give the page a clear title — for example, "Size Chart" or "Sizing Guide". This title will appear as the heading of the popup modal on the storefront.

4. In the page body, create a table with your measurements. A typical layout has sizes as column headers and measurement types as rows:

   Size	Chest (cm)	Waist (cm)	Hips (cm)	Length (cm)
   S	88	72	94	66
   M	92	76	98	68
   L	96	80	102	70
   XL	100	84	106	72

5. Click Save.

4. Step 2 — Enable the size chart in the Theme Editor

Now link the page you just created to the product template.

1. Open the Theme Editor (from Shopline admin: Online Store > Design > Customize).
2. Use the page selector at the top to navigate to a product page (e.g., "Products > Default product").
3. In the sidebar, expand the main-product section → Product main → Product info.
4. Click on the Buy buttons block.
5. Scroll down in the settings panel until you see the Size chart group header.
6. Turn on the Enable size chart toggle.
7. A new field appears: Page. Click it and select the size chart page you created in Step 1.
8. Click Save.

5. Step 3 — Verify on the storefront

1. Still in the Theme Editor, navigate to a product that has a "Size" variant option (e.g., a clothing item with S / M / L / XL).
2. Look for the "Size chart" link with a ruler icon in the buy buttons area (near the Add to Cart button).
3. Click it. A modal popup should open, displaying the title and content of the page you linked.
4. Check that your table looks correct and all measurements are accurate.
5. Close the popup by clicking the X button, clicking outside the modal, or pressing Escape.
6. Now navigate to a product that does not have a "Size" option (e.g., a candle or a decorative object) — the size chart link should not appear. This confirms the automatic trigger is working.

6. Using different size charts for different products

Since the size chart setting is per template, you can use multiple product templates to show different charts for different categories.

1. In the Shopline admin, go to Online Store > Design > Customize.
2. Create or open a specific product template (e.g., product.tops, product.pants, product.shoes).
3. In each template's Buy buttons block, enable the size chart and select the appropriate page — "Tops Size Chart" for the tops template, "Shoe Size Chart" for the shoes template, etc.
4. Assign each product to its matching template from the product editor (under the "Theme template" field).

This way, a customer looking at a T-shirt sees your clothing measurements, while a customer looking at sneakers sees your shoe sizing — all automatic once set up.

7. Tips for a great size chart

Use a clear table structure. Put sizes across the top as column headers and measurement types down the left side (or vice versa). Avoid merging cells — it breaks the clean formatting the theme applies.

Include units of measurement. Always specify cm or inches. For international customers, consider both: "Chest: 92 cm / 36 in".

Add a "How to measure" note. In the page body, above or below the table, briefly explain where to measure (e.g., "Chest: measure around the fullest part, keeping the tape level"). This reduces returns caused by size mismatches.

Keep the page title short. The title appears as the modal heading. "Size Chart" or "Sizing Guide" works better than "Complete Clothing Measurement Reference Table for All Products".

Create separate pages per category. T-shirts, pants, and shoes have very different sizing. One generic chart causes confusion. Create a page per category and link each to its own product template.

---

Need Further Assistance

If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our website for assistance.