that’s perfect placement! thank you.
how can i change the alt colour to white? sorry - that’s my last question. i promise!
Topic summary
A Shopify store owner wants to display product image alt-text as an overlay on product images, appearing only when alt-text exists.
Initial Solutions Proposed:
Multiple users suggested editing theme files (main-product.liquid, product-card.liquid) to:
- Wrap images in a container div
- Add a conditional overlay element using Liquid:
{% if image.alt != blank %} - Style the overlay with CSS using absolute positioning and semi-transparent backgrounds
Implementation Challenge:
The original poster couldn’t locate the suggested code snippets in their theme files. They shared their site URL (lephonographe.org) and uploaded theme files to OneDrive for review.
Working Solution:
User tim_1 provided a no-code-edit solution using a Custom Liquid section:
- JavaScript targets all product gallery images with alt attributes
- Dynamically inserts styled overlay badges
- CSS positions badges absolutely with semi-transparent backgrounds
Final Customization:
The poster requested white text color. Tim_1 updated the CSS to use:
color: rgb(var(--color-background))- Added optional text-shadow for contrast
The solution was successfully implemented and resolved.
Ah, use this inside <style>..</style>
position: absolute;
right: max(1.5rem, calc(((var(--aspect-ratio) - var(--preview-ratio)) * 25% + 1.5rem)));
bottom: 1rem;
padding: 0 0.5rem;
color: rgb(var(--color-background));
text-shadow: 0 0 0.35rem rgb(var(--color-foreground));
You can drop the text-shadow line – it’s added for extra contrast.
2 Likes
@tim_1 Thank you Thank you.
You sir, are a star in my eyes. Much appreciated.