How can I reposition the discount badge above product name?

Solved

How can I reposition the discount badge above product name?

IntechCarl
Shopify Partner
196 1 22

Hi everyone,

 

I want to change the position of the discount badge, instead of inside of the product card I want it to be place outside the photo and place it above the product name. Anyone knows how to do it?
See the photo for reference.

IntechCarl_0-1700115937868.png

 

Accepted Solution (1)
Moeed
Shopify Partner
7553 2037 2508

This is an accepted solution.

Hey @IntechCarl 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.card__badge.right {
    justify-self: flex-start !important;
    align-self: self-end !important;
    grid-row-start: none !important;
    top: 25px;
    position: relative;
    right: 10px;
}
</style>

RESULT:

Moeed_0-1700121259391.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

 

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 4 (4)

Moeed
Shopify Partner
7553 2037 2508

Hey @IntechCarl 

 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Dan-From-Ryviu
Shopify Partner
11754 2306 2488

Hi @IntechCarl 

Could you share your store link to check?

- Helpful? Like & Accept solution! - Support me: Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

IntechCarl
Shopify Partner
196 1 22

Here is the link https://yywy1ulr838gm-13830324282.shopifypreview.com

Just add the letters (a)(p)(k) between 8(here)38gm 

Moeed
Shopify Partner
7553 2037 2508

This is an accepted solution.

Hey @IntechCarl 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.card__badge.right {
    justify-self: flex-start !important;
    align-self: self-end !important;
    grid-row-start: none !important;
    top: 25px;
    position: relative;
    right: 10px;
}
</style>

RESULT:

Moeed_0-1700121259391.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

 

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications