How to Create a Custom Product Card Section in Shopify (ZHD Product Card)

In this tutorial, you’ll learn how to build a fully customizable Product Card Grid Section for your Shopify store — called the ZHD Product Card. This section will display your products beautifully with title, price, image, description, and buttons like Buy Now, Live Preview, and View Details.

We’ll walk through each step so you can add this section to your theme and control it directly from the Shopify theme editor.

🧰 What You’ll Need

• A Shopify theme (e.g., Dawn, Sense, or any Online Store 2.0 theme)
• Access to Edit Code in your theme
• A few products added to your store

⚙️ Step 1: Create the Section File

1. Go to Online Store → Themes → Edit Code.
2. In the Sections folder, click Add a new section.
3. Name it:

   zhd-product-card.liquid

💻 Step 2: Paste the Full Section Code

Copy and paste the entire code below into your new section file. This includes the HTML structure, CSS styling, JavaScript logic, and JSON schema.

  

    {% for block in section.blocks %}
      {%- assign product = all_products[block.settings.card_product] -%}
      

        

          
.

          
{{ product.title | truncatewords: 4 }}

          {% if block.settings.price_show %}
            

              {{ product.compare_at_price | money }}
              {% if product.price == 0 %}
                Free
              {% else %}
                {{ product.price | money_without_trailing_zeros }}
              {% endif %}
            
          {% endif %}

          {% if block.settings.productDescription_show %}
            
{{ product.description | truncatewords: 13 }}
          {% endif %}

          {% if block.settings.livebtn_show %}
            
Live Preview
          {% endif %}

          {% if block.settings.viewbtn_show %}
            
View Details
          {% endif %}

          

            
            {% if product.price == 0 %}
              Download
            {% else %}
              Buy
            {% endif %}
          
        
      
    {% endfor %}
  




{% schema %}
{
  "name": "ZHD product card",
  "settings": [],
  "blocks": [
    {
      "type": "product-card",
      "name": "product card",
      "limit": 20,
      "settings": [
          {"type": "checkbox","id": "price_show","label": "Show Price?","default": true},
          {"type": "checkbox","id": "productDescription_show","label": "Show Description?","default": true},
          {"type": "checkbox","id": "livebtn_show","label": "Live Btn Show?","default": true},
          {"type": "checkbox","id": "viewbtn_show","label": "View Btn Show?","default": true},
          {"type": "product","id": "card_product","label": "Product"},
          {"type": "text","id": "live_url","label": "Store Link"}
      ]
    }
  ],
  "presets": [
    {"name": "ZHD product card","blocks": [{"type": "product-card"}]}
  ]
}
{% endschema %}

🎨 Step 3: Add the Section in Theme Editor

1. Go back to your Theme Editor → click Add Section.
2. Find and add ZHD Product Card.
3. Under Block Settings, select your products and toggle:
   • Show Price / Description
   • Show Buttons (Live Preview, View Details, Buy)
   • Add custom Live URL (e.g., demo link)

🧲 Step 4: Preview and Test

Click Save → Preview. You’ll see a responsive grid of product cards — with scrolling images, blinking “Free” tags, and quick checkout buttons.

When you click Buy or Download, it automatically redirects users to checkout.

💡 Bonus Ideas

• Change card shadow or hover animations.
• Add ratings or badges with metafields.
• Make “Live Preview” button open a modal or embedded demo.

✅ Final Result

You’ve now built a professional Shopify Product Card Section — reusable, dynamic, and fully editable without touching code again. It’s perfect for showcasing featured products, digital downloads, or portfolio items.

Pro Tip: Combine this section with Shopify’s metafields or dynamic sources for advanced automation!

Written by Zahidul Islam | Shopify Custom Design Tutorials