In the Shopify site customizer, I found the options for editing slideshows were limited. The slideshow navigation icons did not respond to changes in theme colors, and were hard to see on my theme's background.
First navigate to the Online Store/Themes page from your side-menu, and select the three-dots menu next to the "customize" button. Select "Edit code."
These icons are called the "slider buttons" and are part of the "slider counter" so you need to find your assets/component-slider.css file.
You can customize the slideshow slider feature in this file. The colors #000000 and rgb(0,0,0) are a placeholder for your color preference.
If you have the slideshow style COUNTER
- Insert the final line into this section: .slider-counter {
display: flex;
justify-content: center;
min-width: 4.4rem;
color: rgb(0,0,0); < insert this line
}
If you have the slideshow style NUMBERS
-
To change the color of the selected number, find: .slider-counter__link--active.slider-counter__link--numbers {
text-decoration: underline;
color: rgb(var(--color-foreground)); < replace line with color: rgb(0,0,0);
} - To change the color of the unselected numbers, find: .slider-counter__link--numbers {
color: rgba(var(--color-foreground), 0.5); < replace line with color: rgb(0,0,0);
text-decoration: none;
} - To change the color of the unselected numbers when you hover over them, find: .slider-counter__link--numbers:hover {
color: rgb(var(--color-foreground)); < replace line with color: rgb(0,0,0);
}
If you have the slideshow style DOTS
- To change the fill color of the selected dot, find: .slider-counter__link--active.slider-counter__link--dots .dot {background-color: #000000;}
- To change the border color of the unselected dots, find: .slider-counter__link--dots .dot {
width: 1rem;
height: 1rem;
transform: scale(1.5); < I added this line to make them more visible!
border-radius: 50%;
border: 0.1rem solid rgb(0,0,0);
padding: 0;
display: block;
} - To change the border color of the unselected dots when you hover over them, find: .slider-counter__link--dots:not(.slider-counter__link--active):hover .dot {border-color: #000000;}
Left/right 'caret' buttons
-
Find: .slider-button {
color: rgba(var(--color-foreground), 0.75); < replace line with color: rgb(0,0,0);
background: transparent;
border: none;
cursor: pointer;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
transform: scale(1.5); < I added this line to make them more visible!
}
How to find this if your template is different
If you are using a different Shopify template, the same code tricks should work but these elements may have different names or be hidden in different files. First right-click a page with a slideshow on it and select "View Page Source."
CTRL + F "slideshow" to find the section of code for the slideshow. For me, the answer was in the line below the first instance of "slideshow" in the code. The file assets/component-slider.css is identified in line 2469; in the code library I was able to find the file "component-slider" under the folder "assets." (The file identified in line 2470 is similarly where you want to look to edit slideshow features).
