Insert image badge above product image in Brooklyn theme!

Shopify Partner
15 0 0

Hi all!

 

What I want to do I think it's pretty simple but I couldn't do it. I tried many times without success.

My plan is to insert a quality guaranteed badge above the product image on the product page. Is that easy?

 

Thanks!

 

0 Likes
Shopify Staff
Shopify Staff
166 0 25

Hi Felipe,

I believe I have something for you that might suit your needs. I went ahead and managed to do this on my own test store. 

  1. Go to Online Store > Themes > click the 3 dots then click 'Edit HTML/CSS'
  2. Open up the product.liquid file
  3. Locate the following code 
    <div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">

     For me this code is on line 11

  4. Push everything down one line and paste the following code just below that line of code.

    <div class="grid__item text-center">
      <img src=";
    </div>

    Make sure you have a URL to your qulity guranteed image and replace the one that I have in the above code: <img src="https://YourURLhere.com">;. Reminder, you can upload files in Settings > Files and use that URL we give you there. 

  5. Click save

And now on all of your product pages, you should see your image appearing above the product photos in your Brooklyn theme. Here's what it ended up looking like: https://screenshot.click/04-22-qnmmh-mw5m6.jpg

Hope that helps!

Thanks

Phil K
Customer Success Guru
 

0 Likes
New Member
11 0 0

Thanks for the code snippet. Is there any way to have the image float over the corner of the product image instead of pushing it down?

0 Likes