Ecommerce Development
08 min read

a high-performing Shopify size guide should be specific to the product or fit family, visible beside the size selector, usable on mobile, expressed in the shopper’s preferred units, and supported by clear measuring instructions and fit context. Store the data as structured metafields or metaobjects rather than copying charts into descriptions. Connect each product to the correct guide, preserve an accessible fallback, instrument usage and validate whether the guide improves size selection, conversion and size-related returns.
A size guide is not merely a table. It is a decision interface that translates a garment or product specification into a customer choice. A visually polished chart can still fail when it mixes body and garment measurements, omits units, ignores product stretch, appears after the purchase button, or uses one generic chart for categories with different fit logic.
Start with the sizing decision
Write the shopper’s question for each category. Apparel shoppers may need body measurements, garment measurements, fit preference and model context. Footwear shoppers may need foot length, width, regional conversions and style-specific advice. Rings require measurement method and circumference or diameter. Furniture and equipment require space, clearance or body-fit dimensions. Do not force these decisions into one universal template.
Classify products into fit families such as standard tops, oversized tops, tailored bottoms, stretch leggings, footwear or protective equipment. A guide can be shared only when the underlying grading and fit intent are genuinely the same. Assign an owner in merchandising or product development who approves measurements and controls revisions.
What the size guide should contain
Clear measurement type
Label whether values represent body measurements or finished garment measurements. Body measurements help a shopper choose a labelled size; garment measurements help compare ease and fit with an item they own. If both are shown, separate them clearly and explain the relationship rather than placing similar numbers in one ambiguous table.
Units and conversion
Display centimetres and inches through a clear toggle or paired columns. Convert from one canonical dataset rather than maintaining two manually edited tables. Define rounding rules and test every value. Regional size conversions should be presented as guidance, because labels are not perfectly equivalent across brands or product blocks.
How to measure
Use concise steps and a diagram where it improves understanding. Explain tape position, posture, clothing layers and whether measurements should be snug or relaxed. Provide image alt text and equivalent written instructions. A diagram alone is inaccessible and may be unclear on a small screen.
Fit notes
Explain whether the item is slim, regular, relaxed, oversized, compressive or intended for layering. State stretch or construction details when they affect choice. Avoid generic claims such as “true to size” unless supported by a defined fit standard and customer evidence.
Model and sample context
If model information is used, include the model’s relevant body measurements, worn size and intended fit. Height alone rarely explains the decision. Treat model data as one reference, not a guarantee for every body shape.
CTA: Project Supply’s Ecommerce Development team can turn inconsistent sizing content into a structured Shopify system connected to products, markets and measurable customer outcomes.
Placement on the Shopify product page
Place a descriptive “Size guide” or “Find your size” control immediately beside or above the size selector. The customer should not need to search the footer, product description or an FAQ. Keep the trigger available after a variant selection and within sticky purchase interfaces. If size selection is required, validation should return focus to the selector and explain the next action.
On mobile, use a drawer, bottom sheet or full-screen modal with a clear title, close control and scroll behaviour. Avoid a tiny table inside a narrow popup. On desktop, a modal or expandable section can work if focus management, keyboard navigation and screen-reader labelling are correct. Preserve a normal page or inline fallback when scripts fail.
Do not hide critical information
Fit notes and the difference between body and garment measurements should be visible before the table or inside the initially opened view. Important guidance should not be buried behind several tabs. For a product with unusual sizing, surface a short warning beside the selector and link to the complete guide.
Shopify data architecture
Shopify supports metafields for specialised product information and compatible themes can connect metafields through dynamic sources. Metaobjects provide reusable structured entries that can be referenced from products. This makes them suitable for size-guide records shared by a validated fit family.
Recommended metaobject
Create a Size Guide metaobject with fields such as guide name, category, market or locale, measurement type, canonical unit, table data, measuring instructions, diagram, fit notes, revision number, effective date and owner. Use a product metafield containing a metaobject reference to attach the correct guide. Keep guide content separate from size variants: variants represent sellable combinations and inventory; the guide explains how to choose among them.
Structured rows
A rich-text table is fast to launch but harder to validate, translate and render responsively. For a large catalogue, represent measurement rows and values in structured fields or a controlled JSON schema rendered by the theme. Validate required headings, numeric formats, unit conversion and supported size labels during ingestion. Maintain a safe editorial interface so merchandisers do not edit theme code.
Variant and category data
Shopify variants model options such as size and colour, and inventory can be managed for each combination. Shopify also supports connecting variant options to category or product metafields for reusable option data. Use consistent canonical size labels across variants, filters, feeds and guide rows. A guide saying “Medium” should not map ambiguously to variant values “M,” “Med” and “M-Regular.”
Fallback hierarchy
Resolve size-guide content in this order: product-specific guide, fit-family guide, category guide, then no guide with a controlled support message. Do not silently display an unrelated generic chart. Log products that fall through so catalogue teams can correct missing assignments.
Designing the table
Use a real HTML table with header cells, captions or accessible labels and logical reading order. Keep the size column visible when horizontally scrolling wide tables. Avoid placing critical text inside images. Use sufficient colour contrast and do not communicate recommended size through colour alone.
For mobile, first reduce the information rather than immediately adding horizontal scrolling. Let the customer select a measurement group, unit or region. Consider a stacked comparison for two or three key measurements. If horizontal scroll remains necessary, show a visual cue and maintain touch targets that do not interfere with page swiping.
Typography
Use body text large enough to read without zooming and keep labels concise. Align numbers consistently and distinguish ranges from single values. Do not shrink the table to fit. A guide that technically fits but cannot be read is a conversion obstacle.
Responsive testing
Test narrow and wide phones, text zoom, landscape orientation, long translated labels, right-to-left layouts where relevant and devices with browser controls covering the viewport. Verify that the close button remains reachable and that opening the guide does not reset the selected variant.
CTA: If the current theme relies on copied charts or inaccessible popups, contact Project Supply for a Shopify product-page and size-guide implementation review.
Internationalisation and markets
Separate language, unit system and regional label conversion. A shopper may want English text with centimetres or a translated guide with UK labels. Store canonical measurements once, then present verified conversions. Shopify custom data can support storefront access and translations for metaobjects; confirm the exact theme and market implementation.
Do not automatically convert a brand size into a regional label without merchandising approval. A US 8, UK 12 and EU 40 may be treated as approximate equivalents in some categories but grading varies. Display the brand’s primary size and explain the conversion as a reference where needed.
Fit recommendation tools
A questionnaire or recommendation app can reduce decision effort when it uses relevant inputs and communicates uncertainty. It should not replace the underlying guide. Explain what data is collected, why it is needed and how the recommendation is produced at an appropriate level. Provide a manual route for shoppers who do not want to share body or purchase-history data.
Evaluate third-party tools for theme performance, privacy, accessibility, international support, failure fallback, data export, pricing and lock-in. Test whether the tool improves confirmed-fit purchases rather than only interaction rate. Do not present a recommendation as a guarantee.
Performance engineering
Load essential guide text and data with the product page or through a small deferred payload. Optimise diagrams, specify dimensions and avoid a large app bundle for a simple table. Opening the guide should not wait on a slow third-party request. If the tool fails, the shopper must retain a usable guide or support path.
Measure theme impact with realistic mobile devices and networks. Monitor page responsiveness, layout movement and interaction delay around the size selector. A conversion feature that degrades the entire product page can create more harm than it removes.
Analytics and experimentation
Event model
Track guide opened, unit changed, measurement instructions viewed, recommendation started, recommendation completed, size selected, add to cart and purchase. Include product, fit family, market, device and selected size without collecting unnecessary body data. Define events consistently in the analytics specification.
Outcome measures
Review product-page conversion, add-to-cart completion after guide use, time to size selection, support contacts, exchanges and size-related return reasons. Segment by category and market. Guide users may naturally be more uncertain, so a simple comparison between users and non-users does not prove causation.
Experiments
Test placement, trigger wording, condensed versus detailed guidance and product-specific fit notes. Keep measurement accuracy fixed; do not experiment with conflicting size values. Define guardrails for returns, accessibility and page performance. Allow enough time for purchases and returns to mature before declaring an outcome.
Operational governance
Create one controlled workflow from product specification to storefront. Record source, approver, revision and affected products. Validate a guide during product setup and again when supplier, fabric, grading, manufacturing location or fit block changes. A copied chart can remain live long after the product changes unless ownership is explicit.
Run catalogue checks for missing guide references, orphaned guides, variant labels absent from the guide, empty required values and unit-conversion differences. Preview a representative product in every theme and market before publishing a revised shared guide. Because one metaobject can affect many products, use drafts or staged review where supported.
Implementation sequence
Phase 1: audit
Inventory product categories, current guides, duplicate charts, return reasons, variant labels and theme placements. Identify the highest-volume or highest-uncertainty fit families.
Phase 2: content model
Agree body versus garment measurements, canonical units, fit terminology, metaobject fields, product references and fallback rules. Clean size labels before migration.
Phase 3: component
Build an accessible responsive component with unit switching, measuring instructions, script-free fallback and analytics. Test with long tables and translations.
Phase 4: controlled migration
Migrate one fit family, compare old and new values, assign products and obtain merchandising approval. Monitor guide use, selection and customer feedback.
Phase 5: scale and optimise
Expand by commercial priority, automate catalogue QA and test placement or concise fit guidance. Review results after the return window matures.
CTA: Project Supply can design the size-guide content model, Shopify theme component and analytics through its Ecommerce Development services.
FAQs
Web Personalisation
Framer is a design tool that allows you to design websites on a freeform canvas, and then publish them as websites with a single click.
UI and UX Design
Framer is a design tool that allows you to design websites on a freeform canvas, and then publish them as websites with a single click.
Search Engine Optimisation
Framer is a design tool that allows you to design websites on a freeform canvas, and then publish them as websites with a single click.
CRM and ERP Solutions
Framer is a design tool that allows you to design websites on a freeform canvas, and then publish them as websites with a single click.
Ecommerce
Framer is a design tool that allows you to design websites on a freeform canvas, and then publish them as websites with a single click.
Email Marketing
Framer is a design tool that allows you to design websites on a freeform canvas, and then publish them as websites with a single click.
Marketing Automation
Framer is a design tool that allows you to design websites on a freeform canvas, and then publish them as websites with a single click.
Chatbots and Conversational AI
Framer is a design tool that allows you to design websites on a freeform canvas, and then publish them as websites with a single click.
Chatbots and Conversational AI
Framer is a design tool that allows you to design websites on a freeform canvas, and then publish them as websites with a single click.
Related Blogs
We know your space
Explore our latest UI/UX Case Studies that showcase how our process-driven creativity transforms complex ideas into real, measurable business results, step by step.



