How to Add Product Descriptions to Product Cards in Shopify

This customization works across all Shopify themes and can help customers better understand your products at a glance. There are three options for Shopify owners to work on it.

Option 1: Use Metafields for Short Descriptions

This approach works for ALL Shopify themes and persists even if you change themes:

1. Set up a product metafield:
   • Go to Settings → Custom data
   • Select “Products” under Metafield definitions
   • Click “Add definition”
   • Fill in the required details:
     • Name: “Short Description”
     • Description: “Brief product description for collection cards”
     • Type: “Single line text” or “Multi line text”
     • Save your new definition
2. Add metafields to your products:
   • Edit each product
   • Scroll down to Metafields section
   • Add your short descriptions to the “Short Description” field
   • For bulk editing, use the Products page and select multiple products to edit at once
3. Connect metafields to your theme:
   • For Online Store 2.0 themes (like Dawn, Refresh, Sense, etc.):
     • Go to Online Store → Themes → Customize
     • Select “Product pages” template
     • Click “Add block” → “Product information” → “Short description”
     • For collection pages, customize the collection template similarly
   • For older themes, you’ll need to edit theme code (see Option 2)

Connecting Metafields to Product Cards

If you chose the metafields approach and need to display them on product cards:

1. Find the product card snippet file for your theme (as described in Option 2)
2. Add this code below the product title (replacing [VARIABLE] with your theme’s variable name):

{% if [VARIABLE].metafields.product.short_description != blank %}
  <div class="card-product-description">
    {{ [VARIABLE].metafields.product.short_description }}
  </div>
{% endif %}

Option 2: Edit the Product Card Snippet (Theme-Specific Method)

For this approach, you’ll need to adapt the code based on your specific theme:

1. Access your theme code:
   • Go to Online Store → Themes
   • Click “Actions” → “Edit code” on your theme
2. Locate the product card snippet:
   • Common filenames to look for:
     • Dawn theme: snippets/product-card.liquid
     • Debut theme: snippets/product-card-grid.liquid
     • Brooklyn theme: snippets/product-grid-item.liquid
     • Other themes: Search for files containing “product” and “card” or “grid”
3. Identify the variable name used in your theme:
   • Look at the existing code to see the variable used for products:
     • If you see {{ product.title }} then use product
     • If you see {{ card_product.title }} then use card_product
     • Other themes might use variables like product_item or similar
4. Add the description code:
   • Find the product title section (typically inside a card information div)
   • Add this code below the product title (replacing [VARIABLE] with your theme’s variable name):

{% if [VARIABLE].description != blank %}
  <div class="card-product-description">
    {{ [VARIABLE].description | strip_html | truncatewords: 10 }}
  </div>
{% endif %}

5. Add custom CSS:
   • Go to Assets → theme.css or your theme’s main CSS file
   • Add styling:

.card-product-description {
  font-size: 0.85rem;
  line-height: 1.2;
  color: #6b7280;
  margin-top: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

Option 3: Use a Shopify App (No-Code Universal Solution)

These apps work with ANY Shopify theme (as of 2025):

• Metafields Guru – All-in-one metafields editor with display features without coding
• Accentuate Custom Fields – Define custom fields for any Shopify object with native theme integration
• Instant – Visual no-code builder that supports dynamic product information

Important Considerations for All Themes

• Full product descriptions are often too long for cards – use truncating or dedicated short descriptions
• Test on different screen sizes to ensure your descriptions look good on mobile
• If using code customization, keep notes of your changes for future theme updates
• Metafields approach is more “future-proof” if you plan to change themes later
• Most themes get regular updates, so be prepared to reapply customizations after updates

This approach will help enhance your product cards with useful descriptions across any Shopify theme, improving the shopping experience for your customers.