Boundless theme: Adding opacity for sold out products

Solved
Highlighted
Tourist
4 0 0

Hi guys, 
I am launching a new site soon (going from Debut to the Boundless theme) and all i really miss from the old theme is the opacity on sold out products. In the Boundless theme everything looks like it's in stock - Perhaps a little confusing for some customers. 

Also, is it possible to hide the price on sold out products as well?

Any help is appreciated. Thanks

Ras

0 Likes
Highlighted
Shopify Partner
2296 503 651

Hey @Rockhopper 

Can you please provide me your webshop URL?

I will check and provide you solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
4 0 0
Highlighted
Astronaut
1085 178 213

This is an accepted solution.

Hey, @Rockhopper , absolutely!

I coded something specifically for your case.

Follow the steps below to fix it in 20 seconds:

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:


<script>
function addSoldOut(){
var soldout = document.querySelectorAll(`.product-item__sold-out`);

if (!soldout) return;

for (var each of soldout){
each.closest('.product-item').classList.add('product-item--sold-out');
}

}

addSoldOut();
</script>

<style>
.product-item--sold-out{
    opacity: 0.5;
}

.product-item--sold-out .product-item__price-wrapper{
    display: none;
}
</style>


You can change the opacity by changing the 0.5 value. It goes from 0.00 to 1.00.

examples: 

0.2 = very little opacity, almost invisible
1 = no opacity at all


Please let me know whether it works.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
Shopify Partner
2296 503 651

Hello @Rockhopper 

please share sold out product page URL and also send a screenshot .

I will check and provide you solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
4 0 0

That works just perfect! Thanks Diego! 
Would you happen to know how to make images smaller on the product pages? Boundless has the massive images! 

Ras

0 Likes
Highlighted
Astronaut
1085 178 213

This is an accepted solution.

@Rockhopper You're welcome!

Well, in this theme it's tricky to make the images per se smaller, but you can do something like this:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:


 

@media (min-width: 767px){
    [data-section-id="product-template"]{
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    display: block;
}
}

 

 

The 1000px value is adjustable, using something like 800px will make them even smaller.

Please let me know whether it works.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
Tourist
4 0 0

Diego you are the man! It works just perfect! 
I am just about to launch the new site will these awesome adjustments

I have one last question for you if you have the time... 
Is there a way to hide the prices for sold out products - in the product pages? 

Thanks so much, you've been such a help! 
Ras

0 Likes
Highlighted
Astronaut
1085 178 213

@Rockhopper You're welcome!

For the page itself it'd be more tricky, I'm afraid that there is no copy-paste solution for this one otherwise I'd happily guide you through.
I'd need to be added onto your store as a developer and code an unique algorithm for it.

If that is something you'd like to do feel free to contact me personally whenever you wish.

Wishing you a great day!

Kind regards,
Diego.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like