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

[ColossalBird]

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:

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!

[devcoders]

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.

[ColossalBird]

Hi @devcoders 

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

[TheUntechnickle · Accepted solution]

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

[ColossalBird]

It works great, many thanks!!