Adding discount badge on all product page just above the product title

[Lalvikas]

My current store URL - https://nexorxtreme.com/

I would like to add the discount badge which I have already added on my product page, on my all product page just above the product title.

I have added a reference photo to refer.

I need help adding this, not sure where to add the code for this all product page and featured product.

[Tech_Coding]

Hello @Lalvikas

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (min-width: 750px) { .collection .card__badge.top { align-self: flex-end !important; position: absolute; bottom: -29px; left: 47px; } .collection .card__information { padding-top: 4rem !important; } }

RESULT:

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Lalvikas]

Is this possible to show that 50% on the product image and also “CHRISTMAS SALE | 50%” just below the product image?

Just like the image below, I want to keep both

[Lalvikas]

Also, I can’t find any theme.liquid. I am using dawn theme, let me know the correct file.

Update - my bad, I can find the theme.liquid file

[DaisyVo]

Hi @Lalvikas

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Edit code > card-product.liquid
2. Paste the code provided into this position https://prnt.sc/AE7CwMnkZaXt

            Christmas sale | 50% off
          

Here is the result: https://prnt.sc/tqb-vtT376kA

I hope this helps

Best,

Daisy

[Lalvikas]

It’s working. Thank you so much.

One more question, can you help me change this 50% off color to Red? I want to change on this color. Check image below

[DaisyVo]

@Lalvikas

To change to red please try this code

50% off

Best,

Daisy

[Lalvikas]

Hi Daisy,

Thank you for the codes. I also made some adjustments on the mobile but design is messed up. Check the current design below -

Can you help me adjust this to make the design look like this below -

I think this design issue is due to the product grid alignment, but not sure