Size Chart Pro

Size Chart Pro - User Manual

Table of Contents

  1. Overview
  2. Installation & Setup
  3. Installing Metafield Definitions
  4. Pinning Fields
  5. Adding Values to Product Variants
  6. Custom Labels
  7. Theme Editor Configuration
  8. How Size Charts Work
  9. Troubleshooting


Overview

Size Chart Pro is a Shopify app that automatically generates dynamic size charts for your products based on variant metafield data. The app reads measurement data from product variants and displays it in customizable size charts that adapt to your data.

Key Features

  • Dynamic Data Reading: Automatically reads measurement data from product variant metafields
  • Smart Display Logic: Only shows fields that have values, hides empty fields
  • Unit Conversion: Automatically shows unit selector (cm/in) when both measurements exist
  • Customizable Labels: Replace default field names with your own custom labels
  • Multiple Display Modes: Table, Collapsible, or Modal popup
  • Theme Integration: Easy to add to any theme via theme editor


Installation & Setup

1. Install the App

  1. Go to your Shopify Admin
  2. Navigate to Apps
  3. Search for "Size Chart Pro" and install it
  4. The app will be added to your admin navigation

2. Initial Setup

  1. Open the Size Chart Pro app from your admin navigation
  2. You'll see the main setup page with metafield definitions
  3. Follow the steps below to configure your measurement fields


Installing Metafield Definitions

What are Metafield Definitions?

Metafield definitions create the data structure for storing measurement information on your product variants. Size Chart Pro comes with 30+ pre-configured measurement fields.

Available Measurement Fields

The app includes these measurement types:

  • Circumference (cm/in)
  • Height (cm/in)
  • Total Leg Length (cm/in)
  • Tight (cm/in)
  • Waist (cm/in)
  • Strap Length (cm/in)
  • Length (cm/in)
  • Width (cm/in)
  • Sleeve Length (cm/in)
  • Body Length (cm/in)
  • Bust (cm/in)
  • Half Chest (cm/in)
  • Circumference (mm)
  • Diameter (mm)
  • EU, USA, UK, CM sizing

How to Install Fields

  1. Open the App
  • Go to your Shopify Admin
  • Click on "Size Chart Pro" in the navigation
  1. Select Fields to Install
  • Check the boxes next to the measurement fields you want to use
  • You can select all fields or just the ones relevant to your products
  • Fields are organized by measurement type
  1. Install Selected Fields
  • Click the "Install Selected Fields" button
  • The app will create metafield definitions for any new fields
  • Existing fields will be automatically detected
  1. Confirmation
  • You'll see a success message showing how many fields were created
  • Any fields that already existed will be noted


Pinning Fields

What is Pinning?

Pinning makes metafield definitions appear at the top of the variant metafields section in your product editor, making them easier to find and use.

How to Pin Fields

  1. Individual Pinning
  • On the main setup page, find the field you want to pin
  • Click the pin button (●) next to the field name
  • The button will change to show it's pinned
  • Pinned fields appear at the top of variant metafields
  1. Unpinning Fields
  • Click the unpin button (○) next to a pinned field
  • The field will be unpinned and move to the regular metafields list
  1. Bulk Pinning
  • Select multiple fields using checkboxes
  • Click "Install Selected Fields" to pin all selected fields

Pin Limit

  • You can pin up to 20 fields
  • Additional fields will be available when you click "View all" in variant metafields


Adding Values to Product Variants

Method 1: Individual Product Editing

  1. Open a Product
  • Go to Products in your Shopify Admin
  • Click on the product you want to add measurements to
  1. Navigate to Variants
  • Scroll down to the "Variants" section
  • Click on a specific variant to edit it
  1. Find Metafields
  • Scroll down to the "Metafields" section
  • Look for your pinned measurement fields at the top
  • Or click "View all" to see all metafields
  1. Add Measurement Values
  • Enter values for each measurement field
  • Use decimal numbers (e.g., 25.5, 12.0)
  • Add both cm and in values if you have both measurements

Method 2: Bulk Edit (Recommended for Multiple Products)

  1. Select Products
  • Go to Products in your Shopify Admin
  • Select multiple products using checkboxes
  1. Bulk Edit
  • Click "Bulk actions" → "Edit variants"
  • This opens the bulk variant editor
  1. Add Metafield Values
  • In the bulk editor, you'll see columns for your measurement metafields
  • Enter values for each variant
  • You can copy/paste values across multiple variants
  1. Save Changes
  • Click "Save" to apply all changes at once

Best Practices for Data Entry

  • Use Consistent Units: Enter all measurements in the same unit (cm or in)
  • Decimal Precision: Use decimal numbers for accuracy (e.g., 25.5 instead of 25)
  • Complete Data: Fill in all relevant measurements for each variant
  • Both Units: If you have both cm and in measurements, enter both for automatic unit switching


Custom Labels

What are Custom Labels?

Custom labels let you replace the default field names (like "Circumference (cm)") with your own custom text (like "Chest Measurement").

How to Set Custom Labels

  1. Open Custom Labels Page
  • In the Size Chart Pro app, click on "Custom Labels" in the navigation
  1. Edit Field Labels
  • You'll see all available measurement fields
  • Each field has a text input for custom labels
  • Enter your custom label text
  1. Save Labels
  • Click "Save labels" to save your custom labels
  • Labels are saved to your shop's metafields
  1. Clear Labels
  • Click "Clear All Fields" to remove all custom labels
  • This will restore default field names

Example Custom Labels

  • "Circumference (cm)" → "Chest Measurement"
  • "Height (cm)" → "Length"
  • "Waist (cm)" → "Waist Size"
  • "EU" → "European Size"


Theme Editor Configuration

Adding the Size Chart to Your Theme

  1. Open Theme Editor
  • Go to Online Store → Themes
  • Click "Customize" on your active theme
  1. Add the App Block
  • Navigate to a product page
  • Click "Add block" or "+" to add a new section
  • Look for "Size Chart Pro" in the app blocks
  • Click to add it to your page
  1. Position the Block
  • Drag the Size Chart Pro block to your desired location
  • Common positions: After product description, before reviews, in product tabs

Configuration Options

Display Settings

  • Title: Customize the size chart title (default: "Size Chart")
  • Hide Icon: Toggle the ruler icon on/off
  • Display Mode: Choose how the chart appears
  • Table: Always visible table
  • Collapsible: Expandable/collapsible section
  • Modal: Pop-up window (click to open)

Styling Options

  • Font Size: Adjust text size (10-24px)
  • Text Transform: None, Lowercase, Uppercase, Capitalize
  • Lock First Column: Keep size column visible when scrolling

Color Customization

  • Icon and Text Color: Color of the size chart trigger
  • Title Background: Background color of the chart title
  • Table Header: Background and text colors for headers
  • Row Colors: Different colors for odd/even rows
  • Hover Effects: Colors when hovering over rows

Table Styling

  • Title Margin: Spacing around the title
  • Table Borders: Show/hide borders and adjust width
  • Border Color: Color of table borders
  • Border Radius: Roundness of table corners
  • Cell Padding: Internal spacing of table cells
  • Container Padding: Spacing around the entire table
  • Container Background: Background color of the table container


How Size Charts Work

Dynamic Data Reading

Size Chart Pro automatically reads measurement data from your product variants and displays it in a size chart. Here's how it works:

  1. Data Detection: The app scans all product variants for measurement metafields
  2. Field Filtering: Only fields with actual values are displayed
  3. Smart Grouping: Related measurements (cm/in pairs) are grouped together
  4. Unit Detection: If both cm and in values exist, a unit selector appears

Display Logic

What Gets Displayed

  • Size Variants: If your product has size options (S, M, L, etc.), these become the rows
  • Measurement Columns: Only measurement fields with values are shown as columns
  • Unit Selector: Appears automatically when both cm and in measurements exist

What Gets Hidden

  • Empty Fields: Fields without values are automatically hidden
  • Zero Values: Fields with 0 or 0.0 values are treated as empty
  • Unavailable Variants: Only available variants are shown

Unit Conversion

When you have both centimeter and inch measurements for the same field:

  • A unit selector (cm/in) appears at the top of the chart
  • Customers can switch between units
  • The chart updates to show the selected unit
  • Default unit is centimeters

Size Chart Types

1. Size-Based Charts

For products with size variants (S, M, L, XL, etc.):

  • Each size becomes a row
  • Measurements become columns
  • Most common for clothing and accessories

2. Color-Based Charts

For products with only color variants:

  • Each color becomes a row
  • Measurements become columns
  • Useful for products where size is consistent

3. Mixed Charts

For products with both size and color variants:

  • Combines both size and color information
  • Shows measurements for each size/color combination


Troubleshooting

Common Issues

Size Chart Not Appearing

Problem: Size chart doesn't show up on product pages

Solutions:

  1. Check that you've added the Size Chart Pro block in theme editor
  2. Verify that product variants have measurement data
  3. Ensure the block is positioned correctly on the product page

Missing Measurement Fields

Problem: Some measurements don't appear in the chart

Solutions:

  1. Check that the metafield definitions are installed
  2. Verify that variants have values for those fields
  3. Make sure fields are pinned for easy access

Unit Selector Not Showing

Problem: No unit selector appears even with cm and in data

Solutions:

  1. Ensure you have both cm and in values for the same measurement type
  2. Check that values are not zero or empty
  3. Verify field names match exactly (e.g., "circumference_cm" and "circumference_in")

Custom Labels Not Working

Problem: Custom labels don't appear in the size chart

Solutions:

  1. Check that labels are saved in the Custom Labels page
  2. Clear browser cache and refresh the page
  3. Verify that the labels are saved to the correct metafield namespace

Styling Issues

Problem: Size chart doesn't match your theme

Solutions:

  1. Use theme editor to adjust colors and styling
  2. Check that custom CSS isn't conflicting
  3. Try different display modes (table, collapsible, modal)

Getting Help

If you encounter issues not covered in this manual:

  1. Check the app's built-in error messages
  2. Verify your metafield data is correct
  3. Test with a simple product first
  4. Contact support with specific error details


Quick Start Checklist

  • [ ] Install Size Chart Pro app
  • [ ] Select and install measurement fields
  • [ ] Pin important fields for easy access
  • [ ] Add measurement data to product variants
  • [ ] Set up custom labels (optional)
  • [ ] Add Size Chart Pro block to theme
  • [ ] Configure display and styling options
  • [ ] Test on a product page


This manual covers the main features of Size Chart Pro. For advanced customization or specific use cases, refer to the app's built-in help or contact support.