Dawn theme: How to add text overlays to product images on collection pages?

Store Design
, ,

Topic summary

A Dawn theme user seeks to add text overlays displaying metafield data (like country of origin) on product images within collection pages, similar to a reference example showing labels in the bottom-left corner.

Solution Provided:

  • Locate the product card file (typically snippets/product-card.liquid)
  • Insert Liquid code to create overlay divs that conditionally display metafield values
  • Add CSS styling to position the overlay absolutely in the bottom-left corner with semi-transparent background
  • Configure metafields in Settings > Metafields > Products using “custom” namespace

Key Technical Details:

  • Uses position: absolute on overlay with position: relative on parent container
  • Styling includes dark background (rgba(0, 0, 0, 0.75)), white text, padding, and border-radius
  • Metafields are accessed via product.metafields.custom.field_name

Outcome:
The original poster confirmed the solution works successfully after implementation.

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

Hi everyone,

I’m pretty new to Shopify and currently using the Dawn theme.
I’d like to add text overlays to my product images on collection pages—something simple like showing one or two metafields (e.g. country of origin) on the bottom-left corner of each image like here:

ColossalBird_0-1749989186444.png
ColossalBird_0-1749989186444.png902×472 412 KB

I don’t need to display the product title, just the custom text from those metafields.

Any help would be greatly appreciated.

Thanks in advance!

1 Like
2

Hello @ColossalBird
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

3

Hey @ColossalBird ,

I can definitely help you with this! Adding text overlays to your product images in Dawn is totally doable and will look great on your collection pages.

Here’s what you’ll need to do:

First, find your product card file - it’s usually in snippets/product-card.liquid or sometimes in the collection template. Look for where the product images are being displayed.

Then add your overlay code right after the image container:

<div class="product-overlay">
  {% if product.metafields.custom.country_of_origin %}
    <span class="overlay-text">{{ product.metafields.custom.country_of_origin }}</span>
  {% endif %}
  {% if product.metafields.custom.another_field %}
    <span class="overlay-text">{{ product.metafields.custom.another_field }}</span>
  {% endif %}
</div>

And add this CSS to make it look nice (probably in your base.css file):

.card__media {
  position: relative;
}

.product-overlay {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
}

.overlay-text {
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 6px 10px;
  font-size: 11px;
  border-radius: 3px;
  display: block;
  margin-bottom: 4px;
}

Don’t forget to set up your metafields! Go to Settings > Metafields > Products and create the custom fields you want to display. The namespace should be “custom” and the key would be something like “country_of_origin”.

This should give you exactly what you’re looking for - those nice little text overlays in the bottom corner just like in your example images!

Let me know if you run into any issues or need help tweaking the styling. Happy to help troubleshoot!

Cheers!

Shubham | Untechnickle

1 Like
4

Hi @devcoders

Thanks for your quick response, here is my store URL.
Here is my store, you can access it without password.

1 Like
5

It works great, many thanks!!

1 Like