Shopify themes, liquid, logos, and UX
Hi @diego_ezfy
Looking for a solution to fadeout products once they become out of stock.
Currently on Debut theme, there is a box that say "Sold Out", I want to keep it but still have the product image faded out.
Please can you help me find a solution for this.
Appreciate your help,
Thank you,
Alia
Solved! Go to the solution
This is an accepted solution.
Do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
.grid-view-item--sold-out .product-card__image-with-placeholder-wrapper{
opacity: 0.1 !important;
}
You can adjust the 0.1 value as per your wish. It goes from 0.01 to 1.00
Please let me know whether it works.
Kind regards,
Diego
Looks like it is already faded out based on the theme code
.is-sold-out .product--image {
opacity: 0.5;
}
if you like it to be more faded out, you can lower the opacity.
Hello @DeepCode
If you take a look at this screenshot from the website, below, the opacity doesn't seem to be applied, please can you tell where should I see this code?
We are using Debut 16.5.4
Thanks,
Alia
This is an accepted solution.
Do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
.grid-view-item--sold-out .product-card__image-with-placeholder-wrapper{
opacity: 0.1 !important;
}
You can adjust the 0.1 value as per your wish. It goes from 0.01 to 1.00
Please let me know whether it works.
Kind regards,
Diego
Hi! Any suggestions of how to accomplish this overlay/tint on the Symmetry theme? Have been playing around in the CSS but having no luck 😞
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024