How to add a "Product Badge" to the image on the Product Page?

Store Design
, ,

Topic summary

Goal: show a “1+1” product badge on the main product image (it already appears on collection/grid images).

Key points and approach:

  • Theme doesn’t support product-page badges by default; custom Liquid (Shopify’s templating language) and CSS are required.
  • Suggested method: render the badge snippet inside the product media wrapper in sections/main-product.liquid (or within the product-media-gallery), and add CSS to position it in a corner. Images/code snippets are central to understanding placement.

Implementation updates:

  • A collaborator request was shared and accepted. One helper added code in snippets/slideshow.liquid (lines 57–65) to display the badge on the product page. OP confirmed it looks good.
  • Another contributor provided step-by-step file locations and example CSS for absolute positioning, plus ensuring the media wrapper is positioned relatively.

Follow-up requirement (multiple badges):

  • OP wants both “1+1 FREE” and a standard SALE badge, depending on the product.
  • Solution: keep the default SALE badge; show “1+1 FREE” only when a specific product tag is present (tag specified as ‘11-free’). Code was added to implement this logic.

Status:

  • Resolved. Action for OP: tag products with ‘11-free’ to show the 1+1 badge; otherwise SALE works as normal.
Summarized with AI on December 10. AI used: gpt-5.
1

Hii Shopify Partner hero’s,

Can someone be so kind to help me with this problem.

I want to add the “1+1” product badge that you see here in the corner of the images also to the image on the product page image.

Scherm­afbeelding 2025-12-10 om 09.09.12
Scherm­afbeelding 2025-12-10 om 09.09.12419×718 71.1 KB

Can someone code this for me? or help me do this myself?

2

As you can see down here, the product badge does not show on the product page image

Scherm­afbeelding 2025-12-10 om 09.09.22
Scherm­afbeelding 2025-12-10 om 09.09.22398×800 67.9 KB

1 Like
3

You will need to add custom code to display that badge on the product page.

4

Hey @nuevemira

It looks like your theme doesn’t supports to add custom badges on product page by default.

Can you share your collaborator request code in my private messages and I’ll be happy to sort that out for you?

Cheers,
Moeed

5

@nuevemira it will need a code editing, are you familiar with the liquid coding? if no then I can do it for you

6

Yes can you help me with this?

7

Please share the collab request code

8

How can i send it private to you?

9

The collab code is 5577

10

Hi, I have sent a request!

1 Like
11

Hi,

Hope this will help

If you already have the badge showing on the collection or grid images, you can definitely pull it into the product page image too-it just depends on how your theme is setup.

Most Shopify themes treat product page images differently from collection images. The badge you’re seeing is likely added through a Liquid snippet inside the product card (like product-card-grid.liquid or a similar snippet), but not included on the main product media component.

Add that snippet inside the product media section and make sure the CSS positions it correctly

Code example

<div class="product__media-wrapper">
  {{ media | image }}
  {% render 'product-badge' %}
</div>
12

Accepted, are you working in it?

13

At what line do i need to add the code? i am not really an expert in it haha

14

I got it. Please wait for a whilr

1 Like
15

Hi @nuevemira ,
To show the badge on the product page (main image)

1. Go to:

Online Store → Themes → Edit code

2. Open this file (varies by theme):

sections/main-product.liquid

3. Find the main product image wrapper

Look for something like:

<div class="product__media-wrapper">

or:

{%- render 'product-media-gallery', ... -%}

4. Insert your badge code inside the wrapper

Example:

<div class="product__media-wrapper">

  {% if product.tags contains '1+1' %}
    <div class="badge-1plus1">1 + 1 FREE</div>
  {% endif %}

  {%- render 'product-media-gallery', section: section, product: product -%}
</div>

5. Add CSS so it appears in the corner of the image

Add this under Assets → base.css (or theme.css):

.badge-1plus1 {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #e5322d;
  color: #fff;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  z-index: 10;
}
.product__media-wrapper {
  position: relative;
}
1 Like
16

Hi, Im done. Code is added in snippets > slideshow.liquid file lines from 57 to 65

1 Like
17

Thank you so much!

Really appreciate it. Looks so good!

18

I have another question, maybe you can help me with that also…

Now i have the sale badge re-named to “1+1 FREE” but the problem is i have a few items that are not in the “1+1 FREE” deal but i want to do them in the sale. But of course when i do that the “1+1 FREE” badge shows up. But actually in that case i want that a “SALE” badge shows up.

How can i instal this? or can you code this? Maybe with a tag or something that i can add

19

@nuevemira looks like you want more than 1 badges then you will need a tag and custom code, right now it seems like you renamed sale to 1+1 free, but you will need to add code for sale tag based on tag

20

Yes that is exactly the case

1 Like