Dawn theme page text block, slideshow etc. background color

Store Design
,

Topic summary

A user seeks to change the background color of various sections in their Shopify Dawn theme to #f3f3f3. While some sections (header, rich text, featured collection) allow direct color selection via theme settings, others (slideshow, page, product grid, blog posts) do not.

Initial Challenge:

  • Attempted editing component-slideshow.css by replacing --color-foreground with --color-background-2, but this approach failed to produce expected results.
  • User struggled to find a single location to set the background color globally across the site.

Solution Found:
After two days of troubleshooting through CSS, JSON, and Liquid files, the user discovered a simpler method: adding custom CSS (background: #f3f3f3;) directly in the custom CSS box available in any section’s settings.

Follow-up Question:
Another user (bryan76) asks how to change the color of the slideshow’s bottom control strip (containing pause/play buttons), noting that custom CSS attempts haven’t worked and it defaults to background-1.

The original poster offers to help but needs clarification on the desired outcome.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Hi helpful friends :slightly_smiling_face:

I have a website

www.fleshandbloodcards.com

I want every section to have the background color set to #f3f3f3

I have set it in as many places as possible such as header, rich text block, featured collection etc. but there are a number of sections which dont allow you to simply select (background-2) such as Slideshow, Page, Product Grid, Blog Posts.

I understand that I will need to edit the .css for these pages but when I have tried for instance to edit component-slideshow.css, I changed all occurences of (–color-foreground) to (–color-background-2) but to no avail.

Here are all the code blocks in component-slideshow.css with color being set in them

@media screen and (max-width: 749px) {
slideshow-component.page-width .slideshow__text {
border-right: var(–text-boxes-border-width) solid rgba(var(–color-foreground), var(–text-boxes-border-opacity));
border-left: var(–text-boxes-border-width) solid rgba(var(–color-foreground), var(–text-boxes-border-opacity));
}

.slideshow__controls {
border: 0.1rem solid rgba(var(–color-foreground), 0.08);
}

@media screen and (min-width: 750px) {
.slideshow__autoplay.slider-button {
position: inherit;
margin-left: 0.6rem;
padding: 0 0 0 0.6rem;
border-left: 0.1rem solid rgba(var(–color-foreground), 0.08);
}
}

.slideshow__autoplay path {
fill: rgba(var(–color-foreground), 0.75);
}

.slideshow__autoplay:hover path {
fill: rgb(var(–color-foreground));
}

I hoenstly thought I could just change all instances of foreground to background-2 (#f3f3f3) but it doesn’t give the expected (or any!) result.

Please will someone explain to me what I am misunderstanding and how to get the background color everywhere to be the same #f3f3f3? There doesn’t seem to be a single place where I can set this and have it reflected througout the site which is odd because I thought thats what .css files were all about!

Thanks ever so much for your help, friends

Chad

2

Oh my…

After 2 days of digging around in the .css, .json. liquid files it turns out that you can customise, go to any section on any page then just put

{
background: #f3f3f3;
}

in the custom .css box and change the background of everything this simple way…

I wonder if I can undo al th things I did trying to work this out?

Mind you, none of them made any difference so I dont suppose it matters!

3

I am trying to change the color of bottom strip that houses the buttons, pause, etc at the bottom of the slideshow. currently it is set to background-1 as the default. I have tried different code in the customer css field that I thought would work but do not. Any suggestions?

Thanks!

4

What do you want to change it to?