MOTION THEME - "Collection Callout" remove shadow effect

Solved
lion_no
Explorer
55 5 18

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
3561 416 807

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. & Want to know more .Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Designing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Zworthkey
Shopify Partner
3561 416 807

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. & Want to know more .Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Designing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 12 (12)
Zworthkey
Shopify Partner
3561 416 807

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. & Want to know more .Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Designing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lion_no
Explorer
55 5 18

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
3561 416 807

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. & Want to know more .Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Designing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

lion_no
Explorer
55 5 18

@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
3561 416 807

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. & Want to know more .Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Designing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lion_no
Explorer
55 5 18

@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
3561 416 807

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. & Want to know more .Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Designing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lion_no
Explorer
55 5 18

@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
3561 416 807

Use transparent image.
FULLBUNDLE_SHOPIFY_560x.png

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. & Want to know more .Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Designing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing