Shopify themes, liquid, logos, and UX
Hello!
I am currently having an issue with product grid images. There is a high opacity overlay (similar to what occurs when products are sold out) that seems to occur on some browsers. All products are in-stock and listed as such, but I haven't been able to adjust code to remove the overlay, which I'd rather do permanently even when Sold Out status is active.
Individual product pages do not currently show any issues as all images are displaying normally. It seems to be on the "...collections/all" page that is the sole problem.
Is there an easy code fix for this?
Thanks,
DC
Solved! Go to the solution
This is an accepted solution.
Thanks for it
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.grid-link__image--loading { -webkit-animation: none; animation: none;}
.grid-link:hover .grid-link__image, .grid-link:active .grid-link__image, .grid-link--focus:hover .grid-link__image, .grid-link--focus:active .grid-link__image {
opacity: 1;
}
Hello, @thesauce101
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
This is an accepted solution.
Thanks for it
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.grid-link__image--loading { -webkit-animation: none; animation: none;}
.grid-link:hover .grid-link__image, .grid-link:active .grid-link__image, .grid-link--focus:hover .grid-link__image, .grid-link--focus:active .grid-link__image {
opacity: 1;
}
Perfect! Thank you so much, your help is greatly appreciated.
DC
Thanks for update and support
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024