I have two slides in my slideshow. First one has all elements like text, outline button, etc in Black. For the second slide I want to make all elements in White. I’ve tried creating a new color scheme, but it doesn’t work. Why is it not changing? So then I thought, maybe I can add code, but I have no idea where or how or what to add.
Can anyone help?
Thanks, Jenni
I believe your theme is Dawn and unless there are some custom CSS applied, the color of textual content on the slide should be controlled by Slide block setting Layout-> Color Scheme.
However, you do seem to have this in the slidehsow section Custom CSS:
h2.banner__heading.inline-richtext {
color: black;
}
.banner__text.rte {
color: black;
}
These rules apply to both slides and override whatever you have in Color setting.
I’d try to undo this “Custom CSS” and try using the “Color Scheme” setting.
If this does not work, you can try to modify your “Custom CSS” like this:
.slideshow__slide:nth-of-type(1) .banner__text,
.slideshow__slide:nth-of-type(1) .banner__heading{
color: black;
}
.slideshow__slide:nth-of-type(2) .banner__text,
.slideshow__slide:nth-of-type(2) .banner__heading{
color: white;
}
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
Hi @JCaloBC ,
This happens because most Shopify slideshow sections use ONE color scheme for the entire section, not per slide.
So even if you create a new color scheme, the slideshow doesn’t apply it slide-by-slide - it only reads the section’s scheme once.
That’s why your second slide stays black.
Add a conditional class to the slide:
<div class="slideshow__slide {% if forloop.index == 2 %}slide--white{% endif %}">
Then add CSS:
.slide--white {
--color-foreground: #ffffff;
--color-button: #ffffff;
--color-button-text: #000000;
}