Dawn theme – cannot change slideshow color (linear gradient + arrow and dot colors)

Store Design
, , , ,

Topic summary

A user is trying to customize the slideshow section background in Shopify’s Dawn theme but faces two main issues:

Primary Problem:

  • Solid background colors work via custom CSS (background-color: #000)
  • Cannot apply linear gradients despite finding gradient definitions in the theme’s source code
  • The theme’s color scheme settings don’t allow direct modification

Secondary Issue:

  • Wants to change the colors of slideshow navigation elements (dots and arrows)

Current Status:

  • User shared store credentials and included a screenshot showing the slideshow section
  • A helper offered to access the store as a collaborator to implement the gradient background fix
  • Discussion remains open, awaiting the user’s response to grant collaborative access
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi, I need some help with changing the background color of the slideshow section in the “DAWN” theme.

When I use

{ background-color: #000; }

in the custom CSS field, the background changes to black as expected. However, I have no idea how to set a linear gradient for this section, since the theme doesn’t allow me to change the color scheme at all.

Here’s the definition of the scheme I found in the source code:

"scheme-c787bb51-a6ea-4710-8eed-7dd5aaae2797": {
  "settings": {
    "background": "#333333",
    "background_gradient": "linear-gradient(46deg, rgba(33, 43, 54, 1) 13%, rgba(0, 0, 0, 1) 85%)",
    "text": "#f8f8f8",
    "button": "#83858c",
    "button_label": "#f3f3f3",
    "secondary_button_label": "#f3f3f3",
    "shadow": "#121212"
  }
}

I’d also like to change the color of the dots and arrows used to navigate between the slideshow images.

Can anyone please help me with this?
Thanks a lot for any advice!

www.sh1ik6-eu.myshopify.com
pass: sockaw

image
image2156×790 95.8 KB

1 Like
3

Hey @Ondrej12,

If you could add me as a collaborative then I can take a look and fix this to ensure that you can set the gradient background color too.

Waiting to hear back from you.

Thanks

4

Hi @Ondrej12

Here’s a clean, step-by-step solution you can use in the Dawn theme to add a custom gradient background and change dot + arrow colors for your slideshow section — all without breaking theme settings

Step 1: Add custom CSS in base.css

Go to
Online Store → Themes → Edit code → assets/base.css
and add this at the bottom of the file:

/* === Custom Slideshow Gradient Background === */
#shopify-section-template--YOUR_SECTION_ID__slideshow .slideshow {
  background: linear-gradient(46deg, rgba(33, 43, 54, 1) 13%, rgba(0, 0, 0, 1) 85%) !important;
}

/* === Optional: Slideshow Navigation Colors === */
.slideshow__controls .slider-button {
  color: #ffffff !important; /* Arrows */
}

.slider-counter__link {
  background-color: rgba(255, 255, 255, 0.5) !important; /* Dots */
}

.slider-counter__link--active {
  background-color: #ffffff !important; /* Active dot */
}

Step 2: Find your section ID

In theme editor, open the slideshow section →
Right-click → Inspect → find a tag like:

<section id="shopify-section-template--12345678901234__slideshow">

Copy that whole ID and replace:

YOUR_SECTION_ID

in the CSS above.

If my assistance was helpful to you, please like and accept all my solutions. :white_check_mark:
Best regards,
Devcoder :laptop:

1 Like
5

Hi, thank you very much for your response.

I followed your instructions.
The arrows and dots are working—they already have a different color.

The problem is with the area around the slideshow.
I opened the webpage, pressed F12, found the section with the slideshow (see the image), copied “26981874663769” and replaced YOUR_SECTION_ID with it, which gave me:

#shopify-section-template--26981874663769__slideshow .slideshow {
  background: linear-gradient(46deg, rgba(33, 43, 54, 1) 13%, rgba(0, 0, 0, 1) 85%) !important;
}

I saved everything, but unfortunately the area around the slideshow (the white part) didn’t change at all.

If you want, I can also help explain why the background didn’t change and how to fix it. Do you want me to do that?

PS:
I noticed that the identifier also contains _xBWJfX at the end after __slideshow.

image
image917×102 10.2 KB

6

Hi @Ondrej12

Can you please send me your store’s preview link, dear?

7

@devcoders

pass: sockaw

8

@Ondrej12

You want like this.

image
image1334×546 76.8 KB

9

@devcoders
Yes, sir, exactly like that.

1 Like
10

Paste this code in the end of base.css file.

section#shopify-section-template--26981874663769__slideshow_xBWJfX {
    background: linear-gradient(46deg, rgba(33, 43, 54, 1) 13%, rgba(0, 0, 0, 1) 85%) !important;
}
11 
section#shopify-section-template--26981874663769__slideshow_xBWJfX {
    background: linear-gradient(46deg, rgba(33, 43, 54, 1) 13%, rgba(0, 0, 0, 1) 85%) !important;
}
1 Like
12

That’s amazing, you’re a god. Thank you so much for your help!!! :slight_smile:

1 Like
13

Hi @Ondrej12

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts. :white_check_mark:

Best regards,
Devcoder :laptop: