Solved

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

Emmalouuise
Tourist
35 0 2

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

 

Screenshot 2023-03-01 at 12.52.28.png

Accepted Solutions (4)

PageFly-Richard
Shopify Partner
4322 980 1639

This is an 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;
}

PageFlyRichard_0-1677676994838.png

 

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

PageFly-Richard
Shopify Partner
4322 980 1639

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

PageFly-Richard
Shopify Partner
4322 980 1639

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

PageFly-Richard
Shopify Partner
4322 980 1639

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 20 (20)

PageFly-Richard
Shopify Partner
4322 980 1639

This is an 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;
}

PageFlyRichard_0-1677676994838.png

 

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Emmalouuise
Tourist
35 0 2

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
Shopify Partner
4322 980 1639

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Emmalouuise
Tourist
35 0 2

@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
Shopify Partner
4322 980 1639

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Emmalouuise
Tourist
35 0 2

@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
Shopify Partner
4322 980 1639

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Emmalouuise
Tourist
35 0 2

Hi @PageFly-Richard 

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

ModStageApparel
Tourist
14 0 3

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!

Screenshot 2023-03-24 174522.png

ModStageApparel
Tourist
14 0 3

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
Visitor
1 0 0

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
Tourist
14 0 3

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

Screenshot 2023-03-24 174522.png

Thanks 

ModStageApparel
Tourist
14 0 3

Hi @PageFly-Richard

 

Any suggestions? 

 

Thank you!

PageFly-Victor
Shopify Partner
7865 1785 3071

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
Tourist
14 0 3

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
Shopify Partner
7865 1785 3071

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
Tourist
14 0 3

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

 

Mobile Version: 

Screenshot 2023-04-10 121841.jpg

 

Desktop Version:

Screenshot 2023-04-10 121812.jpg

  

PageFly-Victor
Shopify Partner
7865 1785 3071

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

CDRess
Shopify Partner
29 0 25

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

 

wattsmork
Shopify Partner
26 8 7

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