How Can I Replace the Sold Out Display? (Dawn Theme)

Store Design
, , , , ,
1

Hi my site is litmeup.us , the password is lit (all the product images are just placeholders for the most part). I am using the Dawn Theme.

What I want to do is go from this: (where the Sold Out tag is a box in a corner of the product image)

ttttt.png
ttttt.png1028×907 146 KB

to at least one of these (not all at once):

ttttt1.png
ttttt1.png1028×907 171 KB

This could be an image overlay like the first 3, or text that appears over the product image, or something that replaces the Price text with “SOLD OUT” instead or even just centering the box that would be in the corner. Any of these are better than what I currently have. If anyone has any ideas let me know, I’d prefer the image overlay like this site but either way will work for now.

2

Multiple Options can be done for this feature, I recommend the one with the text only in your image first image in the left 2nd row or as in the image below

NatashaSaed_1-1693848044072.png
NatashaSaed_1-1693848044072.png1342×885 201 KB

NatashaSaed_0-1693847833751.png
NatashaSaed_0-1693847833751.png1405×850 187 KB

3

Hi @ilistentoemo

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.card__badge.right {
    justify-self: center !important;
}
.card__badge {
    grid-row-start: 2 !important;
}

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

If you like another design to choose. So youll be cofuse which one youll choose :rofl: .

Try this. Same Instruction.

Result:

Made4uoRibe_0-1693849177378.png
Made4uoRibe_0-1693849177378.png1149×501 348 KB

Code:

.badge {
    background: red;
    border: none;
    font-size: 40px;
    color: black;
    transform: rotate(-25deg);
}

And Save.
Another Design.

Code:

Made4uoRibe_1-1693849634301.png
Made4uoRibe_1-1693849634301.png1088×495 328 KB

.badge {
    background: red;
    border: none;
    font-size: 30px;
    color: black;
    border-radius: 50%;
    padding: 16px 10px; 
    font-weight: bold;
    width: 100px;
    word-wrap: break-word;
}

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Oh these are great! I decided to go with the round one. One more question: Is there a way to change the font being displayed? I can play with the padding and sizing myself, but I’m unsure of that.

6

Oh thanks! This was good but someone else posted something closer to what I was looking for. Have a nice one :slightly_smiling_face: