I'd like to add an overlay image on all product images

Store Design
,

Topic summary

A store owner wants to overlay a small USA flag on all product images to indicate American-made goods across collection pages, home page, and product pages.

Solution Provided:

  • Add CSS code to the theme.css file that uses the .productitem__container class
  • The code creates a pseudo-element (:after) positioned absolutely in the top-right corner
  • Uses a USA flag SVG from Wikimedia as the background image
  • Sets dimensions to 32px × 20px with proper z-index layering

Code snippet included showing the complete CSS implementation with positioning, sizing, and background properties.

Status: Resolved - the solution was tested and confirmed working by the original poster.

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

My store only sells american=made goods. I want to add a small usa flag on the top right corner of all product skus. So collection pages; home page; product page etc.. How can I do this? I’ve searched online and someone posted a code for the base css but cant I find that and it wont work on the theme css. thanks

2

Go to your online store → edit code → theme.css file and paste this code in the end of file

.productitem__container {
  position: relative;
}
.productitem__container:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 32px;
    height: 20px;
    background-image: url(https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
}

AsadMahmood_0-1746474534844.png
AsadMahmood_0-1746474534844.png1830×379 497 KB

3

Thank you Asad, that worked out great!

1 Like
4

Glad it worked for you :slightly_smiling_face: