Change written form sold out in the image

[Jhon16]

Hi, I would like to ask for information.
How can I change this shape of the “Sold Out” slide?
For example, I would like a red sign at the top of the image, and not the writing so what can I do?
The theme I’m using is: Be Yours
Thank you

P.S. I would only like to change this in the images and not inside the product

[Abdosamer]

Can you share your store url?

[Jhon16]

Hi, yes here is the link:

https://a3cd78.myshopify.com/

You can find the sold out item on the Shop page, it’s just one product shown in the photo.

Thank you

[Abdosamer]

Go to Component-card.css and add the following code :

.product-grid .card-information .button--soldout {
    pointer-events: none;
    display: inline-flex;
    transform: none;
    box-shadow: none;
    border: none;
    opacity: 1;
    background-color: red !important;
    color: rgb(var(--color-background));
    border-radius: var(--button-radius);
    text-indent: unset;
    width: 50% !important;
    padding: .6rem 2rem;
    padding-top: calc(.6rem + var(--font-button-baseline));
    position: absolute !important;
    left: 0 !important;
}

[Jhon16]

ok I tried the code but it always says “sold out”, I would really like to remove the writing and put the red string as in the photo I saw earlier

[Abdosamer]

I do not have access to the theme files but you need to change the text from the theme files or theme editor.

[Dan-From-Ryviu]

Hi @Jhon16

You can try to add this code at the bottom of component-product-grid.css

.card-wrapper:has(.badge--soldout) .card--product:before {
    height: 6px;
    width: 16px;
    content: '';
    background: red;
    display: block;
    z-index: 9;
    position: absolute;
    border-radius: 4px;
    top: 4px;
    left: 4px;
}
.product-grid .card-information .button--soldout { display: none !important; }

[Jhon16]

Thanks so much Dan

[Dan-From-Ryviu]

You are very welcome