Change opacity of sold out badge and center it - Dawn theme

[petitlaurierco]

Hello. With the new updates, my coding wasn't transfer and I can't seem to be able to get my sold out badge centered on the product and have the opacity of the product lowered.

Here's how it was before the update :

Here's how it is now :

Can you help with the code please?

Thank you

[Made4uo-Ribe]

Hi @petitlaurierco 

Would you mind sharing the updated theme URL? Thanks! 

[petitlaurierco]

@Made4uo-Ribe https://woplddibioxdepxy-60851912952.shopifypreview.com

[Amanda_Fordeer]

Hi @petitlaurierco, 

You can try a Product Labels & Badges app to do this easily.

[TheUntechnickle · Accepted solution]

Hi there!

To center the "Sold Out" badge on your product images, follow these steps:

Step 1: Access your Theme Code

1. In your Shopify Admin, go to Online Store > Themes.
2. Find your current theme, then click Actions > Edit code.

Step 2: Add Custom CSS

1. In the left-hand sidebar, search and click on base.css (or a similarly named file, depending on your theme).
2. Scroll to the bottom of the file and add the following CSS:

/* Center the "Sold Out" badge */
.card__badge.left {
  text-align: center !important;
}

.card__badge.top {
  align-self: flex-end !important;
  justify-self: center !important;
}

Note: To reduce the opacity of sold-out products, you'll need to modify the theme code to add a "sold-out" class (or an equivalent identifier) to the product cards for items that are out of stock. Currently, there isn't an identifier, making it difficult to apply that style.

We can set this up for you! Just share your store URL, and I’ll send over a collaborator access request to assist further.

Let me know if you'd like to proceed or need more guidance!

Thanks,
Shubham | Untechnickle

[petitlaurierco]

@TheUntechnickle it worked to have the badge centered, thank you!

For opacity, the previous code was :

.collection .product-sold-out .card__inner > div:first-of-type {
opacity: 0.5;
}

But it doesn't seem to work anymore. 

Here's the link :  https://woplddibioxdepxy-60851912952.shopifypreview.com

It's on preview mode cause it hasn't been publish yet.

Thank you

[petitlaurierco]

@TheUntechnickle So sorry to bother you. But now, all the badges are centered. I wanted only the ''sold out badge'' to be centered. Is there a way to fix this please?

[TheUntechnickle]

I'm always here to help! 🙂

We'll need to make some theme adjustments, such as adding specific classes for the sold-out product cards, so these changes only apply when the product is marked as sold out.

I can handle those changes for you. Let me send over a collaborator request to access your store and make the necessary updates. Please share your collaborator request code, and I'll get started right away!

Shubham | Untechnickle

[petitlaurierco]

@TheUntechnickle I am not too sure on how to share access to my store. But i am quite comfortable coding if you can advise on adding specific classes for the sold-out product cards, that would be lovely! Thank you ! 🙂 

[TheUntechnickle]

I can understand. Let me try my best to guide you:

To add a 'sold-out' class to your product cards in Shopify's Dawn theme and apply custom CSS for centering the 'Sold Out' badge and lowering the opacity of sold-out products, follow these steps:

Step 1: Modify the card-product.liquid File (or the file that renders your product cards)

1. In your Shopify Admin, go to Online Store > Themes.
2. Find your current theme, click Actions > Edit code.
3. In the left-hand sidebar, search for card-product.liquid.
4. Locate the following block where the 'Sold Out' badge is added:

{%- if card_product.available == false -%}
    <span
        id="Badge-{{ section_id }}-{{ card_product.id }}"
        class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
    >
        {{- 'products.product.sold_out' | t -}}
    </span>
{%- endif -%}

       5. Modify the div wrapping the entire product card to include the class sold-out when the product is unavailable. Here's the updated code:

<div class="card-wrapper product-card-wrapper underline-links-hover {% if card_product.available == false %} sold-out {% endif %}">

This will dynamically add a sold-out class to the product card when the product is unavailable.

Step 2: Add Custom CSS

Now, you can use this sold-out class to center the badge and adjust the opacity. Follow these steps:

1. In the left-hand sidebar, search for base.css (or a similarly named file like theme.css).
2. Scroll to the bottom and add the following CSS:

/* Center the "Sold Out" badge */
.sold-out .card__badge.left {
  text-align: center !important;
}

.sold-out .card__badge.top {
  align-self: flex-end !important;
  justify-self: center !important;
}

.card-wrapper.sold-out .card__inner {
    opacity: 0.5;
}

This should work. If not, then please share the preview link again, I'll take a deeper look.

Thanks,
SV | Untechnickle

[Made4uo-Ribe]

Sorry, the shared preview is already expired. I thought this was solved. Thanks!