How to Create Dynamic Product Cards with Swatches in Shopify

Learn how to display product badges, quantities, variant swatches, and short descriptions using metafields in your Shopify theme.

🧠 What You’ll Learn

• Display custom metafields like badges, short descriptions, and quantity.
• Add variant color swatches that change the image and price on hover.
• Build reusable, responsive product cards using Liquid, CSS, and JS.

🧰 Step 1: Set Up Your Metafields

In your Shopify admin, go to Settings → Custom data → Products and create the following metafields:

Name: Short description  
Namespace and key: custom.short_description  
Type: Single line text  

Name: Badge  
Namespace and key: custom.badge  
Type: Single line text  

Name: Quantity  
Namespace and key: custom.quantity  
Type: Integer  

Name: Swatch color  
Namespace and key: custom.swatch_color  
Type: Color (for Variants)
  

💻 Step 2: Create the Product Card Section

In your theme code editor, go to Sections → Add a new section and name it zhd-product-card.liquid. Then paste this code:

{% raw %}
{% comment %}
  Suggested metafields:
  Short description - custom.short_description - Product
  Badge - custom.badge - Product
  Quantity - custom.quantity - Variant
  Swatch color - custom.swatch_color - Variant
{% endcomment %}




  {% for block in section.blocks %}
    {% assign product = all_products[block.settings.product] %}
    {% assign variant = product.variants.first %}
    

      

        
      
      
{{ product.title }}
      
{{ product.metafields.custom.short_description }}
      

        {{ variant.price | money }}
        {% if variant.compare_at_price > variant.price %}
          {{ variant.compare_at_price | money }}
        {% endif %}
      
      

        {% for v in product.variants %}
          

        {% endfor %}
      
      

        
        Add to Cart
      
    
  {% endfor %}




{% schema %}
{
  "name":"ZHD Product Card",
  "settings":[],
  "blocks":[{"type":"product","name":"Product","settings":[{"type":"product","id":"product","label":"Select Product"}]}],
  "max_blocks":10,
  "presets":[{"name":"ZHD Product Card"}]
}
{% endschema %}
{% endraw %}
  

🎨 Step 3: Add Products to the Section

Open your Theme Editor (Online Store → Customize), add the “ZHD Product Card” section, and select your products in each block. Shopify will automatically show each product’s title, image, and metafields.

✨ Step 4: Test the Variant Swatches

Hover over any color swatch — the main product image and price will instantly update. This creates an interactive browsing experience for customers.

👀 Final Result Preview

And that’s it! You’ve built a fully dynamic product card section that uses metafields, variant swatches, and live price updates — all with just a few lines of Liquid, CSS, and JS. 🎉

Written by Zahidul | Shopify Advanced Tutorials