Dynamic Size Guides: Overlaying Metafields on Product Images for Shopify Stores

Hey everyone,

Ever found yourself scratching your head trying to display detailed product measurements in a visually appealing, yet super easy-to-update way on your Shopify store? You know, beyond just a simple table? It’s a common challenge, especially for products with specific dimensions like apparel, furniture, or in the case of a recent community discussion, sunglasses!

I recently stumbled upon a fantastic thread in the Shopify Community that perfectly illustrates a clever solution to this very problem. Our friend Lloyd_Varju kicked things off, asking for help on how to overlay multiple dynamic fields – specifically sunglasses frame dimensions – onto an image within an accordion dropdown on a product page. He had a great diagram ready to go and needed a way to dynamically populate those numbers.

The core of Lloyd’s question was about managing multiple dynamic data points over an image. If it were just one, it might be simpler, but with several measurements like frame width, lens height, and bridge size, things get a bit trickier.

The Elegant Solution: Metafields + CSS Overlays

Thankfully, our expert community member, @rajweb, stepped in with a brilliant and comprehensive solution that Lloyd later confirmed was "incredibly helpful" and "exactly what I was trying to wrap my head around." It really is a fantastic example of how to leverage Shopify's built-in flexibility. The key insight? Treat your diagram image as a background layer and then dynamically position your metafield values on top of it using CSS.

Here’s a breakdown of how you can implement this for your own store, based on Rajat’s excellent advice:

Step 1: Set Up Your Product Metafields

First things first, you need a place to store all those specific measurements for each product. Metafields are perfect for this. They allow you to add custom data fields to your products (or collections, orders, etc.) that aren't part of the standard Shopify fields.

Go to your Shopify Admin:

1. Navigate to Settings > Custom data > Products.
2. Click Add definition.
3. Create individual metafields for each dimension you want to display. For sunglasses, Rajat recommended fields like:
   • Frame Width
   • Lens Width
   • Lens Height
   • Bridge
   • Temple Length
4. Make sure to choose the appropriate content type for each (e.g., "Single line text" or "Dimension" if you need units).
5. Once created, you can fill in these values for each product directly from its product edit page in your admin.

Step 2: Implement the Liquid Code for Image & Overlays

Next, you’ll need to add some code to your theme to display the image and pull in those metafield values. This typically goes into your product template file, often main-product.liquid, or a custom section within an accordion element on your product page where you want the size guide to appear.

Rajat provided a clean structure for this. The idea is to have a parent div that contains both your diagram image and individual span elements for each dimension. Each span will fetch its corresponding metafield value.

  

  
    {{ product.metafields.custom.frame_width }}
  

  
    {{ product.metafields.custom.lens_width }}
  

  
    {{ product.metafields.custom.lens_height }}
  

  
    {{ product.metafields.custom.bridge }}
  

  
    {{ product.metafields.custom.temple_length }}
  

A quick note on the image source: {{ 'frame-diagram.png' | asset_url }} assumes you've uploaded your diagram image to your theme's assets folder (Online Store > Themes > Actions > Edit code > Assets). If your image is hosted elsewhere, adjust the src accordingly.

Step 3: Style with CSS for Precise Positioning

This is where the magic of overlaying happens! You'll use CSS to position the metafield values (the span elements) precisely over your diagram image. You can add this CSS to your theme's stylesheet (e.g., theme.css or base.css) or directly within a