How can I modify 'Sold Out' labels in the Symmetry theme?

[Emmalouuise]

I have recently purchased the Symmetry theme and I'm currently trying to get it all ready to publish on my website in the next few weeks, however I want to change how the "Sold Out" label is shown. 
On the theme it is shown as small black text beside the product price.  

However in my last theme it made the product image slightly opaque and had the Label over the top of the image, so you could clearly see it was sold out.  

Does anyone know how to change this in my new theme?

I have attached a screenshot of how i am hoping to have it.

Thanks

Site: Darlingbunshop.co.uk 

Theme is unpublished. Preview Link is:  https://9eixdzckwix87j9u-66506883287.shopifypreview.com

[PageFly-Richard · Accepted solution]

Hi @Emmalouuise ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/styles.css->paste below code at the bottom of the file:

.product-block .product-link {
    position: static;
}
.product-block .price-label--sold-out {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 100%;
    margin: 0;
    color: transparent;
}
.product-block .price-label--sold-out:before {
    content: "Sold Out";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: #ba4e68;
    color: #fff;
    text-align: center;
    line-height: 1;
    padding-top: 10px;
    border-radius: 50%;
    z-index: 1;
}
.product-block .price-label--sold-out:after {
    content: "";
    background: #fff;
    opacity: 0.4;
    width: 100%;
    padding-top: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

I hope it would help you
Best regards,

Richard | PageFly

[PageFly-Richard · Accepted solution]

Hi @Emmalouuise ,

You can replace previous my code by below code:

.product-block .product-link {
    position: static;
}
.product-block .price-label--sold-out {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 100%;
    margin: 0;
    color: transparent;
}
.product-block .price-label--sold-out:before {
    content: "Sold Out";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    line-height: 80px;
    background: #ba4e68;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    z-index: 1;
}
.product-block .price-label--sold-out:after {
    content: "";
    background: #fff;
    opacity: 0.4;
    width: 100%;
    padding-top: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

I hope it would help you
Best regards,

Richard | PageFly

[PageFly-Richard · Accepted solution]

Hi @Emmalouuise 

You can add below code in styles.css file:

@media screen and (max-width: 749px) {
.product-block .price-label--sold-out:before {
    height: 60px;
    width: 60px;
    line-height: 60px;
}
}

I hope it would help you
Best regards,

Richard | PageFly

[PageFly-Richard · Accepted solution]

Hi @Emmalouuise ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/styles.css->paste below code at the bottom of the file:

.product-block .product-link {
    position: static;
}
.product-block .price-label--sold-out {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 100%;
    margin: 0;
    color: transparent;
}
.product-block .price-label--sold-out:before {
    content: "Sold Out";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: #ba4e68;
    color: #fff;
    text-align: center;
    line-height: 1;
    padding-top: 10px;
    border-radius: 50%;
    z-index: 1;
}
.product-block .price-label--sold-out:after {
    content: "";
    background: #fff;
    opacity: 0.4;
    width: 100%;
    padding-top: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

I hope it would help you
Best regards,

Richard | PageFly

[Emmalouuise]

Hi @PageFly-Richard 

Thank you! This is exactly what i was wanting, however 1 little thing Im trying to change, Is The Size, Ideally trying to make it a bit bigger, I tried changing myself and changed the height and width to 80px which seems like the perfect size, but I cant seem to get both the label and the text to be centre of the product image and the text to be slightly larger.

Also do you know if it is possible to have the size different on mobile? So it to be 60px instead of 80 for example?

Thanks again

[PageFly-Richard · Accepted solution]

Hi @Emmalouuise ,

You can replace previous my code by below code:

.product-block .product-link {
    position: static;
}
.product-block .price-label--sold-out {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 100%;
    margin: 0;
    color: transparent;
}
.product-block .price-label--sold-out:before {
    content: "Sold Out";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    line-height: 80px;
    background: #ba4e68;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    z-index: 1;
}
.product-block .price-label--sold-out:after {
    content: "";
    background: #fff;
    opacity: 0.4;
    width: 100%;
    padding-top: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

I hope it would help you
Best regards,

Richard | PageFly

[Emmalouuise]

@PageFly-Richard  Thank you again, Thats perfect.

Not sure if you missed the end part, but do you know if its possible to have the sizing slightly smaller at about 60px only on mobile, but keeping 80px on desktop? 

[PageFly-Richard · Accepted solution]

Hi @Emmalouuise 

You can add below code in styles.css file:

@media screen and (max-width: 749px) {
.product-block .price-label--sold-out:before {
    height: 60px;
    width: 60px;
    line-height: 60px;
}
}

I hope it would help you
Best regards,

Richard | PageFly

[Emmalouuise]

@PageFly-Richard  Sorry I am probably a pain, but honestly thank you so much for all your help, You are amazing.

But one last small thing, Is it possible to make the text just slightly smaller on mobile? 😂

Once that is done, Everything is perfect and again Thank you so much!

[PageFly-Richard · Accepted solution]

Hi @Emmalouuise ,

You can try below code:

@media screen and (max-width: 749px) {
.product-block .price-label--sold-out:before {
    font-size: 12px;
}
}

NOTE: You can change 12px to fit your website

I hope it would help you
Best regards,

Richard | PageFly

[Emmalouuise]

Hi @PageFly-Richard 

Thank you so much for all your help!
This is exactly what i needed.

[ModStageApparel]

Hi Richard, 

Quick question - 

I added your code to my Symmetry theme. Link here - https://thrivesociete.com/collections/shop-all?page=8

I made some color adjustments to better fit my theme. But I'm wondering if there is a way to make the opacity cover the entire product photo versus only a part of it? Thanks in advance!

[ModStageApparel]

I think I got it for the desktop version by adding placement percentages - 

But this didn't quite work for Mobile. it actually distorted the overlay and made it come out of the box. If you have any suggestions, they'd be greatly appreciated! 

.product-block .product-link {
    position: static;
}
.product-block .price-label--sold-out {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;  
    bottom: 7.5%;
    width: 100%;
    padding-top: 100%;
    margin: 0;
    color: transparent;
}
.product-block .price-label--sold-out:before {
    content: "Sold Out";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    line-height: 90px;
    background: #000000;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    z-index: 1;
}
.product-block .price-label--sold-out:after {
    content: "";
    background: #000;
    opacity: 0.1;
    width: 100%;
    padding-top: 100%;
    left: 0;
    top: 0;
    right: 0;  
    bottom: 7.5%;
    position: absolute;
}
@media screen and (max-width: 749px) {
.product-block .price-label--sold-out:before {
    height: 60px;
    width: 60px;
    line-height: 60px;
    font-size: 12px;

[Derek_S]

Thank you - this solution worked for me too. I'm trying to make the "sold out" label more obvious in my store as well. Running the symmetry 7.2.0

In your code, the label is a circle.
Is it possible to make it a rectangle instead? 

Thank you again!

[ModStageApparel]

Hi Richard, 

I tried your code but it didn't quite work the same. The overlay doesn't cover the whole product photo. See photo attached. 

Website: thrivesociete.com

 

Thanks 

[ModStageApparel]

Hi @PageFly-Richard, 

Any suggestions? 

Thank you!

[PageFly-Victor]

Hi @ModStageApparel ,
I checked your site But I can't see the same as your screenshots. 
you can give me the URL of this image so I can check it carefully. Thanks

[ModStageApparel]

Hi @PageFly-Victor, 

I removed the code when it didn't appear how I would like it to. 

Here is a product page with sold out product for your reference - https://thrivesociete.com/collections/shabby-x-thrive

[PageFly-Victor]

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at bottom of the file -> Save

<style>
    .product-block .product-link {
    position: static;
}
.product-block .price-label--sold-out {
   position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 19.5%;
    width: 100%;
    padding-top: 90%;
    margin: 0;
    color: transparent;
    height: var(--height);
}
.product-block .price-label--sold-out:before {
    content: "Sold Out";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    line-height: 90px;
    background: #000000;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    z-index: 1;
}
.product-block .price-label--sold-out:after {
    content: "";
    background: #000;
    opacity: 0.1;
    width: 100%;
    padding-top: 100%;
    left: 0;
    top: 0;
    right: 0;  
    bottom: 7.5%;
    position: absolute;
    height: 100%;
}
@media screen and (max-width: 749px) {
.product-block .price-label--sold-out:before {
    height: 60px;
    width: 60px;
    line-height: 60px;
    font-size: 12px;
</style>
<script>
window.addEventListener('DOMContentLoaded',(event)=>{
const getHeight =()=>{
return document.documentElement.style.setProperty('--height', `${document.querySelector('.rimage-wrapper  img').offsetHeight}px`);
}
getHeight()
window.onresize=()=>getHeight()
});
</script>

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

[ModStageApparel]

@PageFly-Victor It worked!! Thanks so much!! 

Mobile Version: 

Desktop Version:

  

[PageFly-Victor]

You're welcome @ModStageApparel . I'm so glad that it can be your solution 😊

[CDRess]

I need to save this so I can add it to my new Symmetry coding!! ❤️

[Marissao6]

Hi @PageFly-Victor,

I got the same problem as @ModStageApparel.

Only the problem is that my product grid is portrait 4:5 instead of portrait 2:3 like @ModStageApparel. Can you help me with this one?

I used this code in styles.css.liquid:

.product-block .product-link {
    position: static;
}
.product-block .price-label--sold-out {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 100%;
    margin: 0;
    color: transparent;
    height: var(--height);
}
.product-block .price-label--sold-out:before {
    content: "Sold out";
    font-size: {{ font_size_base_int | minus: 3 }}px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
   /* height: 50px;*/
    background: #000;
    color: #E1DED3;
    text-align: center;
    line-height: 1;
    padding-top: 8px;
    padding-bottom: 8px;
    z-index: 1;
}
.product-block .price-label--sold-out:after {
    content: "";
    background: #000000;
    opacity: 0.4;
    width: 100%;
    padding-top: 100%;
    left: 0;
    top: 0;
    right: 0;
    position: absolute;
    height: 100%;
}

[wattsmork]

Hi @Emmalouuise,

Here is the solution for your problem.

Please add below code to css file

.image-cont {
  position: relative;
}

.badge {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    text-transform: uppercase;
    text-align: center;
    z-index: 10;
}

.badge--sold-out {
    background-color: #ba4e68;
    color: #fff;
}

And add below code to the product item snippet

<div class="image-cont">
    {%- unless product.available -%}
        <span class="badge badge--sold-out">
          <span class="badge__text">Sold Out</span>
        </span>
    {%- endunless -%}

    ...
</div>

Hope it helps you

Please contact me if you have questions or need more help

Regards