How to place watermark below image on Shopify Store

Hi,

I need to add watermark “FDA Class II Medical Device” to all my images in Shopify. I used watermark app in Shopify but it leaves alot of space. 1st photo

I want to the watermark to appear just below the image like the 2nd photo with slightly smaller font. Is there code that can be added to theme do this?

Here are the photos:

1st image with watermark at bottom of photo

2nd image with watermark just slightly below image. (This is how i want)

1 Like

Hi @Allen6224

Theme code CANNOT EDIT image data, binary data, themes only serve images and do things like resizing.
The most theme code could do here is overlay a text element ; :notebook: this in no way applies the text into the image itself so people could download the image without this overlayed text.

If you have specific placement requirements you really need to work out the process do this prior to uploading with bulk image editing tools.
There’s also batching this in photoshop with a macro if you have it, or the free GIMP editor with the batch plugin.
irfanview is another tool but a bit more complicated for the non-technical.
for the command line savvy use imagemagick

Otherwise continue to research apps and hope one has price& capabilities to match needs.
Or reach out if you need a custom app built if there’s a budget and a lot of custom business rules needed for the watermark.

1 Like

Hi @Allen6224

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.

Best regards,
Devcoder :laptop:

Hi,

The name of my site is: www.liftchairheaven.com

1 Like

Hi @Allen6224

Can you please tell me whether you’ve already added the watermark or want to add it?
Also, please send me a screenshot along with the URL of that page.

You’re absolutely right — theme code can only overlay a watermark visually, not embed it in the image file.

Hi @Allen6224,

You can try this code

Go to:
Online Store → Themes → Edit code
Open base.css (or theme.css) and paste this at the bottom:

.product-media--image img {
  display: block;
}

.product-media--image::after {
  content: "FDA Class II Medical Device";
  display: block;
  text-align: center;
  font-size: 12px; /* adjust size */
  margin-top: 4px; /* adjust space */
  color: #333; /* adjust color */
  font-weight: 600;
  opacity: 0.85;
}

This will Display watermark text under every product image
Keep spacing minimal like your 2nd example
Not distort or resize images
Work on product page + zoom pop-up


Important Notes

  • This adds text overlay, not embedded watermark — image quality & SEO stay safe

  • The text is controlled globally → no need to edit 100s of images

  • If you ever change label (for compliance), you update one line

  • For collection pages too? Just let me know — I can apply it there as well.


If you’d like, I can:
Match exact typography style
Add a small icon (registered/certified mark)
Apply only on selected product types
Ensure mobile alignment is perfect

Feel free to reply — happy to help! :blush:
— Hammad | Shopify Developer (Theme Customization Specialist)

I added a watermark in the screenshot in original message. I wanted to see if i could place it right below the image. The photo with the beige image is an example of what i want. Might have to do code overlay but i’m not sure how to do that.

Hi @Allen6224

Dear, the watermark is attached to the image itself. You’ll need to check in the app you used to add the watermark — there should be an option there to adjust its position.


Best regards,
Devcoder :laptop: