Solved

Repositioning "SALE" and "SOLD OUT" text on products (BULLET THEME)

taliad998
Tourist
19 0 0

I have 2 enquires, thank you to whoever can help!!!

 

1. I want to reposition the "SALE" and "SOLD OUT" text to be placed on the top left corner of the product image. 

2. I want to box the "SALE" and "SOLD OUT" text, I want the box colour to be white, and the text to be red.

 

 

 

How my page looks like: red circle is where the text is at now, and white rectangle is where I want the text to be. 

 6981708057773_.pic.jpg

 

How I want it to look like: boxed text, but I want the box to be white and the text inside to be red.

6991708057774_.pic.jpg

 

website: link

 

 

Accepted Solution (1)
tim
Shopify Expert
3334 258 1243

This is an accepted solution.

Building on the code above, try this instead:

.card-badge.text-end.text-start-s {
    position: absolute;
    top: 8px;
    left: 8px;
    color: red;
    background: white;
    line-height: normal;
}
@media (max-width: 480px){
  .card-badge.text-end.text-start-s {
    font-size:  0.75em;
  }
}
.card-badge.text-end.text-start-s:empty {
    display: none;
}

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.

View solution in original post

Replies 5 (5)

Zeel-prajapatii
Shopify Partner
138 32 27

Hey @taliad998 please add the below css to app.css file.

 

.card-badge.text-end.text-start-s {
    position: absolute;
    top: 8px;
    left: 8px;
    background: grey;
}

.card-badge.text-end.text-start-s:empty {
    display: none;
}

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
taliad998
Tourist
19 0 0

thank you so much! that worked!

 

I just need to change the box to white background and text to red. Can you please advise on how to do that?Screen Shot 2024-02-17 at 10.06.34 am.png

taliad998
Tourist
19 0 0

Also the dimension of the box is too big on phone. how do I make the box smaller?

 

Thanks!!

tim
Shopify Expert
3334 258 1243

This is an accepted solution.

Building on the code above, try this instead:

.card-badge.text-end.text-start-s {
    position: absolute;
    top: 8px;
    left: 8px;
    color: red;
    background: white;
    line-height: normal;
}
@media (max-width: 480px){
  .card-badge.text-end.text-start-s {
    font-size:  0.75em;
  }
}
.card-badge.text-end.text-start-s:empty {
    display: none;
}

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
taliad998
Tourist
19 0 0

Worked perfect. Thank you so much!