This tutorial shows you how to place your product title and price directly on top of the product image on collection pages. This creates a modern, clean, and visually appealing layout similar to large ecommerce brands.

No app required — only small edits to Liquid, CSS, and your collection template.

✨ What You’ll Achieve

• Product title & price appear as an overlay on hover (or always visible)
• Fully responsive on mobile & desktop
• Works on almost all Shopify themes

📌 Step 1 — Locate Your Product Card Template

Go to:

Online Store → Themes → Edit Code

Find one of these files (depending on your theme):

• snippets/product-card.liquid
• snippets/card-product.liquid
• snippets/product-grid-item.liquid
• sections/main-collection-product-grid.liquid

Inside this file, look for the product image container:

<div class="card__media">
  {{ product.featured_image | image_url: width: 600 | image_tag }}
</div>

📌 Step 2 — Add the Overlay HTML

Below the image tag, add this overlay:

<div class="product-overlay">
  <span class="overlay-title">{{ product.title }}</span>
  <span class="overlay-price">{{ product.price | money }}</span>
</div>

Final structure example:

<div class="card__media">
  {{ product.featured_image | image_url: width: 600 | image_tag }}

  <div class="product-overlay">
    <span class="overlay-title">{{ product.title }}</span>
    <span class="overlay-price">{{ product.price | money }}</span>
  </div>
</div>

📌 Step 3 — Add Overlay Styling (CSS)

Open:

assets/base.css

or

assets/theme.css

Then add this CSS:

/* Product image overlay */
.card__media, .product-grid-item, .card-wrapper {
  position: relative;
}

/* Overlay container */
.product-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 12px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show overlay on hover (desktop) */
.card__media:hover .product-overlay {
  opacity: 1;
}

/* Always visible on mobile */
@media (max-width: 768px) {
  .product-overlay {
    opacity: 1;
  }
}

/* Title styling */
.overlay-title {
  display: block;
  font-size: 16px;
  font-weight: bold;
}

/* Price styling */
.overlay-price {
  display: block;
  margin-top: 4px;
  font-size: 14px;
}

📌 Step 4 — Optional: Make Overlay Always Visible

If you want it visible all the time, change:

opacity: 0;

to:

opacity: 1;

📌 Step 5 — Optional: Fade Image When Hovered

.card__media:hover img {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

🎉 You’re Done!

Your Shopify collection page now displays product titles and prices directly on top of the product images — clean, modern, and great for conversions.