Hey, so I was working on my draft theme, and I wanna change the logo as the slide changes because the color of slider is matching with my logo which is hiding the logo so I wanna make it like as soon as the slide changes the logo changes as well
My Draft theme link: https://mz0uaagiy81q931m-18450743360.shopifypreview.com
Topic summary
A user is attempting to modify their Shopify Draft theme so the logo changes dynamically as slider images transition. The issue stems from the logo becoming hidden when slider colors match the logo color.
Proposed Solution:
PageFly-Kate suggests adding CSS code to custom-style.scss.css that applies a drop-shadow filter to the logo element, making it visible against varying backgrounds:
.wrapper_header_03.header-bottom.logo-img.logo-parallax {
filter: drop-shadow(2px 4px 6px black);
}
Current Status:
The user inquired about implementing a JavaScript-based solution for dynamic logo switching per slide. PageFly-Kate acknowledged this would require JavaScript knowledge and be complex, declining to provide JS assistance as it falls outside their support scope. The user was advised to contact Shopify support or seek a specialist for JavaScript implementation.
The discussion remains unresolved regarding the dynamic logo-switching functionality.
Hi @Moeed ,
This is Kate from PageFly - Landing page builder,
If you want to customize the logo differently for each slider, you need to know about JS. But it will also be very complicated
I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/custom-style.scss.css->paste below code at the bottom of the file:
.wrapper_header_03 .header-bottom .logo-img .logo-parallax {
filter: drop-shadow(2px 4px 6px black);
}
I hope it would help you
Best regards,
Kate | PageFly
Are you able to help me with JS?
Hi @Moeed ,
Sorry for late reply.
I’m sorry but this is out of my scope. You may try contacting Shopify support or finding another expert regarding this issue.
Best regards,
Kate | PageFly