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

Store Design

Topic summary

A user sought help repositioning “SALE” and “SOLD OUT” badges on product images in the Bullet theme, wanting them moved to the top-left corner with specific styling.

Initial Requirements:

  • Move badges from current position to top-left corner of product images
  • Add white background box with red text
  • Reduce box dimensions for mobile display

Solution Provided:
Two community members provided CSS code modifications to the app.css file:

  1. Initial code repositioned the badges using position: absolute with top: 8px and left: 8px
  2. Enhanced code added:
    • color: red for text
    • background: white for box
    • font-size: 0.75em within a media query (max-width: 480px) to reduce size on mobile

Outcome:
The solution successfully resolved all requirements. The user confirmed the code worked perfectly for both desktop and mobile displays.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

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
6981708057773_.pic.jpg1170×2532 163 KB

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
6991708057774_.pic.jpg1170×910 36.9 KB

website: link

2

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

3

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
Screen Shot 2024-02-17 at 10.06.34 am.png540×316 3.49 KB

4

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

Thanks!!

5

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;
}
6

Worked perfect. Thank you so much!