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.
21

You can add a tag then I will add customize code to display 1+1 free badge if thats product has tag

22

Can someone make and add that code for me?

1 Like
23

I added code so you can use default sale badge and 1+1 FREE badges will appear if you add tag ‘11-free’ to a product only

2 Likes