Solved

MOTION THEME - Collection page - Remove slow transition of Image Overlay - Opacity

lion_no
Explorer
58 6 19

I'm currently upgrading our website, and I really like the looks of it as of right now - however, there's slight slight perceived visual issue with the Collection page while using Colors - Image Overlay - Opacity.

When the Collection page image loads, even with ALL animations turned off, the Image "Overlay - Opacity" still fades in which ends up looking a bit weird.

Here's how the collection page looks when it has loaded in: 

lion_no_0-1634216223402.png

 

and after a 1-2 seconds it looks like it should:

lion_no_2-1634216287029.png

 

This only occurs on the Collection page image, not the header itself - so there's some form of settings that only regards the collection page image and nowhere else (which is not controlled by the animation settings, which the header is)

Can be reproduced with these COLOR settings

lion_no_3-1634216386407.png

 

All form of help is really appreciated!
It's a bit weird that this setting ignores the animation settings, meanwhile it works fine everywhere else.

 

Accepted Solution (1)
lion_no
Explorer
58 6 19

This is an accepted solution.

@KetanKumar - video has already been shared a few comments back, 
BUT... I've managed to find the solution, by testing and tweaking different settings one by one!


Turns out that there's a configuration in theme.css.liquid called .collection-hero__content:before which refers to transition:opacity 2.5s ease;

lion_no_0-1635273896904.png

 

This setting seems to be causing my issue, and it completely ignores any animation settings!
so changing this to 0s have solved my loading issue! 😄

Documenting this as a comment, incase someone else has the same issue as me in the future!

View solution in original post

Replies 26 (26)

KetanKumar
Shopify Partner
36839 3635 11972

@lion_no 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lion_no
Explorer
58 6 19

Hii @KetanKumar!

Here's a preview link to the URL, please scroll down and click to view the TWIN collection to compare with pictures shown above 🙂
https://ulqp0or1qzy8yyzo-50647859379.shopifypreview.com/

Thanks!

lion_no
Explorer
58 6 19

@KetanKumar hi again!
Were you able to look into it, if you haven't yet - best option based on the current design would be to choose "VIEW PRODUCT ARCHIVE" at the bottom.

If still unable to view it through preview mode (due to whatever reason), you could try to reproduce this error on the motion theme free trial with settings shown in the original post

KetanKumar
Shopify Partner
36839 3635 11972

@lion_no 

you have check theme setting lazyload option?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lion_no
Explorer
58 6 19

@KetanKumar where should I specifically look for this option or configuration, in relation to this issue? 🙂
Thanks!

 

KetanKumar
Shopify Partner
36839 3635 11972

@lion_no 

you have to edite code >>> theme customization >>> theme setting >>> find that option

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lion_no
Explorer
58 6 19

@KetanKumar Unfortunately, there doesn't seem to exist any option to toggle LazyLoad on/off in the Theme settings GUI.
Can only find references in the theme code.

KetanKumar
Shopify Partner
36839 3635 11972

@lion_no 

yes please give me theme code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lion_no
Explorer
58 6 19

@KetanKumar attached is a copy of the current theme.css.liquid code.
(Couldn't insert in message, due to its length)

 

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@lion_no 

thanks for that code but i need full code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lion_no
Explorer
58 6 19

@KetanKumar 

How can I share the full code with you? 
Through downloading and sharing the "Theme file" - or?

KetanKumar
Shopify Partner
36839 3635 11972

@lion_no 

yes current download and share

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lion_no
Explorer
58 6 19

I've now sent it to you on a direct msg! 🙂

lion_no
Explorer
58 6 19

@KetanKumar additionally, here's a direct preview link to the collection that shows the issue (refresh and you can see it)
https://28x38yzbem51frl6-50647859379.shopifypreview.com/collections/archive?sort_by=created-descendi...

 

lion_no
Explorer
58 6 19

Have you found anything yet, @KetanKumar ?
I've updated to the latest theme version of Motion without any access on this issue.


See direct preview link to see the issue: https://t8n43rstgq4tsegu-50647859379.shopifypreview.com/collections/archive?sort_by=created-descendi...

KetanKumar
Shopify Partner
36839 3635 11972

@lion_no 

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lion_no
Explorer
58 6 19

@KetanKumar 

I've checked both on desktop and mobile, multiple browsers such as: Google Chrome, Edge, Firefox.
This does not appear to be a browser issue.

 

lion_no
Explorer
58 6 19

Here's a link to a short video showing the issue: 
http://reactorcloud.diskstation.me:5000/d/s/lw8tAqnPkoBstDrApLl3aocIEon3BCpM/KqmdJULKZyX5KbGYCLK6AcV...

As mentioned, this is only a problem on collection pages. NOT anywhere else.
With configuration:

lion_no_0-1634814136639.png

 

KetanKumar
Shopify Partner
36839 3635 11972

@lion_no 

thanks for update yes i have also check again all work  

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lion_no
Explorer
58 6 19

@KetanKumar in that case, why isn't it working on my shopify site? 

lion_no
Explorer
58 6 19

@KetanKumar if possible, could you also send me a link or preview link to a site where this is working as it should?

KetanKumar
Shopify Partner
36839 3635 11972

@lion_no 

yes i have check motion theme default

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lion_no
Explorer
58 6 19

@KetanKumar I'm not sure if you understand what the issue is.
I've just downloaded the newest motion theme and have **ONLY** made this change:

lion_no_0-1635259924911.png

 

and the issue exists on default theme as well, here is a screenshot of collection page image loading

lion_no_1-1635259985393.png

 

here is image when page loading is complete

lion_no_4-1635260037873.png

 

Exactly the same issue as my custom variant of the Motion theme, so it's still a issue with the theme default...

KetanKumar
Shopify Partner
36839 3635 11972

@lion_no 

oh sorry 

can you please sent new theme url also possible to share video 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lion_no
Explorer
58 6 19

This is an accepted solution.

@KetanKumar - video has already been shared a few comments back, 
BUT... I've managed to find the solution, by testing and tweaking different settings one by one!


Turns out that there's a configuration in theme.css.liquid called .collection-hero__content:before which refers to transition:opacity 2.5s ease;

lion_no_0-1635273896904.png

 

This setting seems to be causing my issue, and it completely ignores any animation settings!
so changing this to 0s have solved my loading issue! 😄

Documenting this as a comment, incase someone else has the same issue as me in the future!

KetanKumar
Shopify Partner
36839 3635 11972

@lion_no 

great thanks for update and share code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing