How to setup Size Chart Popup?
What is the Size Chart Popup?
The Size Chart Popup displays detailed sizing information in an elegant modal popup, helping customers choose the right size with confidence. Perfect for clothing, footwear, or any products requiring size selection, it features a responsive design with customizable measurement tables and user-friendly instructions.
Step 1: Create Metafield Definition
Creation Instructions
- Go to Shopify Admin → Settings → Metafields → Products
- Click "Add definition"
- Create each metafield with the specifications below
- Set Type to "JSON" or create a Metaobject.
- No validation required
Required Metafield (1 total)
Step 2: Set Metafield Values
How to Set Values
- Navigate to Products → Select Product → Metafields section
- Find "Jhango Size Chart" field
- Enter JSON data following the recommended structure
- Test the popup to ensure data displays correctly
- Save product
Key Features
Usage Notes
- Displays as clickable trigger button/link
- Opens modal popup with size chart table
- Includes measurement instructions
- Fully customizable styling through block settings
- Responsive design for mobile devices
- Falls back gracefully if no data provided
- Professional table layout with proper spacing
- Click outside or ESC key to close modal
Visual Guide: Setting Up Metafields
Step-by-Step Screenshots
Here's exactly how the metafields look when you're setting them up in Shopify:
Product Metafields View: This shows how the size chart metafield appears in your product's metafields section. You can see the JSON data entered in the structured format.
Creating Size Chart Metafield: This screenshot shows the metafield definition setup for JSON type. Note the "JSON" type selection and the namespace "custom.jhango_size_chart".
Frequently Asked Questions
A size chart popup is an interactive modal that displays detailed sizing information when customers click a trigger button. It helps reduce returns by providing accurate measurement data in a professional, easy-to-read table format that works seamlessly across all devices.
No coding experience is required for basic implementation. The tutorial guides you through creating the JSON metafield using Shopify's admin interface and setting values for each product. However, adding the snippet to your theme templates may require basic HTML knowledge or developer assistance.
Yes, absolutely! Each product can have its own unique size chart data. You can set different measurements, sizes, and values through the product's metafields section. This allows you to accommodate different product categories like shirts, pants, shoes, or accessories with their specific sizing requirements.
Yes, you can include as many measurement types as needed. The JSON structure supports multiple measurement objects, allowing you to include chest, waist, hip, inseam, sleeve length, or any other relevant measurements for your products.
If no size chart data is provided in the metafield, the popup trigger won't display on the product page. This allows you to selectively show size charts only for products that need them, without affecting products that don't require sizing information.
