FROM CACHE - en_header

MOTION THEME - "Collection Callout" remove shadow effect

Solved
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 Callout".
Please see image below:

lion_no_0-1634215737782.png

 

Pref. solution would not have a shadow effect, so items could rather blend into each other and look stacked on top of each other!

All help is appreciated!

Accepted Solutions (2)

Accepted Solutions
Zworthkey
Shopify Partner
5581 642 1523

This is an accepted solution.

Hii, @lion_no 
Paste this code on top of the theme.scss file.

img.callout-image.lazyautosizes.lazyloaded {
    box-shadow: none !important;
}

Thank You.

View solution in original post

Zworthkey
Shopify Partner
5581 642 1523

This is an accepted solution.

Hii, @lion_no 
Paste this code on top of the theme.css file.

.callout-image {
    background-color: transparent !important;
}

Thank You.

View solution in original post

Replies 12 (12)
Zworthkey
Shopify Partner
5581 642 1523

Hii, @lion_no 
Kindly share your store URL so,
I can solve your problem and give you a proper solution.
Thank You.

lion_no
Explorer
58 6 19

Hey, @Zworthkey - Here's a preview link to the URL, showcasing the issue at the top:
https://ulqp0or1qzy8yyzo-50647859379.shopifypreview.com/

Appreciated the help! 🙂

Zworthkey
Shopify Partner
5581 642 1523

This is an accepted solution.

Hii, @lion_no 
Paste this code on top of the theme.scss file.

img.callout-image.lazyautosizes.lazyloaded {
    box-shadow: none !important;
}

Thank You.

lion_no
Explorer
58 6 19

@Zworthkey hi again!
Sorry for the late response, had to delay the work on the new page to priorities other tasks.

I can verify that the snippet you sent has removed the shadow effect, but I stumbled upon an additional thing that would be neat to combine with this.
Originally the product pictures on the collection are transparent, however in "Collection Callout" suddenly have a background and are no longer transparent png files.

Might be due to a conversion from .jpg to .png, what would be the easiest way to change this? Pref. globally for the entire store 🙂

Thanks a lot for the help so far though, so I appreciate your help - even if you aren't able to help with the next bit mentioned above ~

Zworthkey
Shopify Partner
5581 642 1523

@lion_no 
Go to the Customization;
and theme setting their will be the option to remove the Shadow from All images.

lion_no
Explorer
58 6 19

@Zworthkey 
I might be going blind, because I can't find any reference to it under the theme customization,
Unless you refer to 

lion_no_0-1634560911522.png

Which unfortunately wouldn't solve my issue, as I would have to pick a image background color (and what I'm looking for is to have a transparent option, aka no background color)

If there's a specific option for "Shadow from all images", I must be blind - as I can't find it hehe 🙂

Zworthkey
Shopify Partner
5581 642 1523

mention your Site URL and screenshot where the Shadow is occurring. So i can help you to get rid of this.

lion_no
Explorer
58 6 19

@Zworthkey sorry! I might not have been clear enough - your snippit code worked to remove the shadow, but now I noticed that the pictures are also using a background effect based on:

lion_no_0-1634561220916.png

 

Though the original product pictures are .png and transparent, so this is an additional question if you know how to tell the theme to use transparent .png pictures instead of .jpg (if possible)
Here's an example on shadows being gone, but image using a background instead of being transparent which creates a box appearance. 

lion_no_1-1634561302215.png


Here's a preview link - so you can see it yourself: https://28x38yzbem51frl6-50647859379.shopifypreview.com

 

Zworthkey
Shopify Partner
5581 642 1523

Use transparent image.
FULLBUNDLE_SHOPIFY_560x.png

lion_no
Explorer
58 6 19

@Zworthkey as seen in the product list (in Shopify admin)

lion_no_0-1634562556509.png

 

The product is using a transparent image, .png file.
However the MOTION theme seems to convert it to non-transparent, which would be neat to turn off for us - so I'm curious to how we could do this?

Zworthkey
Shopify Partner
5581 642 1523

This is an accepted solution.

Hii, @lion_no 
Paste this code on top of the theme.css file.

.callout-image {
    background-color: transparent !important;
}

Thank You.

lion_no
Explorer
58 6 19

That worked perfectly!

Thank you so much for all the help!! 😄

If possible - would love your view on this issue (read the description of the issue, as it includes how to reproduce it on your own)
https://community.shopify.com/c/shopify-design/motion-theme-collection-page-remove-slow-transition-o...