Product Cards

The product-card.liquid snippet is a reusable component for displaying products across the theme. It supports multiple card styles, hover effects, badges, quick view, and color swatches.

Basic Usage

{% render 'product-card', product: product %}

Collection Grid

<div class="product-grid">
  {% for product in collection.products %}
    {% render 'product-card',
      product: product,
      card_style: 'standard',
      show_second_image: true,
      lazy_load: true
    %}
  {% endfor %}
</div>

Featured Collection with Quick View

<div class="featured-products">
  {% for product in collections['featured'].products limit: 4 %}
    {% render 'product-card',
      product: product,
      card_style: 'overlay',
      show_quick_view: true,
      show_vendor: true,
      show_swatches: true,
      image_ratio: 'square'
    %}
  {% endfor %}
</div>

Search Results

{% if search.performed %}
  <div class="search-results">
    {% for item in search.results %}
      {% if item.object_type == 'product' %}
        {% render 'product-card',
          product: item,
          card_style: 'minimal',
          show_vendor: true,
          show_second_image: false,
          image_ratio: 'landscape'
        %}
      {% endif %}
    {% endfor %}
  </div>
{% endif %}

Parameters

Parameter	Type	Default	Description
product	Object	Required	The product object
card_style	String	standard	Card style: standard, overlay, minimal
show_second_image	Boolean	false	Show second image on hover
show_quick_view	Boolean	false	Show quick view button
show_vendor	Boolean	false	Display product vendor
show_swatches	Boolean	false	Display color swatches
image_ratio	String	portrait	Image ratio: portrait, square, landscape
lazy_load	Boolean	true	Lazy load images

Card Styles

Standard

Default card with image, title, price, and optional elements. Best for most collection grids.

Overlay

Image with text overlaid on hover. Best for featured products and visual-heavy layouts.

Minimal

Clean, text-focused design with small image. Best for search results and sidebar displays.

Related Products

{% for related_product in related_collection.products limit: 4 %}
  {% if related_product.id != product.id %}
    {% render 'product-card',
      product: related_product,
      card_style: 'standard',
      show_second_image: true,
      show_swatches: false,
      image_ratio: 'portrait'
    %}
  {% endif %}
{% endfor %}