Dawn theme: Insert a thumbnail image into product image

Store Design
, , , , ,

Topic summary

A user wants to add a thumbnail overlay image to product cards in their Dawn theme collection pages, similar to a reference image they provided.

Proposed Solution:
A Shopify expert provided step-by-step instructions:

  • Modify card-product.liquid to display a second product image as a thumbnail overlay
  • Add CSS styling in base.css to position the thumbnail in the bottom-right corner with hover effects
  • The thumbnail would use the product’s second image if available

Current Status:
The original poster is having difficulty locating the first code snippet mentioned in the instructions. The implementation remains incomplete and requires further clarification on finding the correct code section in the theme files.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I was wondering if we can insert a thumbnail image into a product image or collections as this one:

Alliance_0-1742259878300.png
Alliance_0-1742259878300.png1920×1080 317 KB

Appreciated your feedback on this matter,

Best regards,

1 Like
2

Hi @Alliance

I am from Mageplaza - Shopify solution expert.

Follow these steps to add a thumbnail image to each product in the collection.

  1. Go to Online Store → Themes → Dawn → Edit Code.

  2. Open the card-product.liquid File

  • This file is responsible for displaying each product in the collection list.
  1. Add a Thumbnail Image to Each Product
  • Find the code that displays the product image, usually:

    {{ product.featured_image | image_url: width: 500 | image_tag: class: 'card__img' }}
  • Modify it to display an additional thumbnail image:

    {{ product.featured_image | image_url: width: 500 | image_tag: class: 'card__img' }}

    {% if product.images.size > 1 %}
        

            {{ product.images[1] | image_url: width: 80 | image_tag: class: 'thumbnail-overlay' }}
        

    {% endif %}
  1. Add CSS to Style the Thumbnail
  • Open the base.css file in the Assets folder and add the following CSS:
.custom-thumbnail {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 50px; /* Adjust size */
    height: auto;
    border: 2px solid #fff;
    background: rgba(255, 255, 255, 0.8);
    padding: 3px;
    border-radius: 5px;
    transition: transform 0.2s ease-in-out;
}

.custom-thumbnail:hover {
    transform: scale(1.1);
}

.card__media {
    position: relative;
}
  1. Save and Check the Result
  • Save your changes.
  • Open a collection page to see if the products now display a thumbnail image.

Please let me know if it works as expected!

Best regards

3

Hi,

Can’t find the first code.

Best regards,