Change colour of slideshow button background and text (sense theme)

Store Design
1

IMG_8049.png
IMG_8049.png1284×2778 623 KB

Hello, can someone help me? I want to change the colour of my slideshow button, along with the button text. My buttons in my entire shop is in green and cream colour except my slideshow. It’s in this awful black and white, and the actual colour i chose will only show up if i select “show container” but i dont want to have the container.

I have tried codes from other people asking the same question, but somehow i can only change either the background or the text, shopify wouldn’t change both of it.

1 Like
2
  1. Inside the “theme.scss.liquid” file, scroll down or use the search function (Ctrl + F or Command + F) to find the section that contains the CSS rules for the slideshow button. Look for a code block that resembles the following:
.slideshow__button {
  /* Styles for the button background */
}

.slideshow__button-text {
  /* Styles for the button text */
}

To change the background color of the button, add or modify the CSS property background-color within the .slideshow__button rule. For example, to set the background color to red, you can use the following code:

.slideshow__button {
  background-color: red;
}

// To change the text color of the button, add or modify the CSS property color within the .slideshow__button-text rule. For example, to set the text color to white, you can use the following code

.slideshow__button-text {
  color: white;
}
3

  1. Identify the class or ID of the slideshow button element. You can inspect the button element using your browser’s developer tools to find the appropriate selector.

  2. Once you have the selector, add the following code to your theme’s CSS file or the CSS editor in the Shopify admin:

/* Change the background color of the slideshow button */
.slideshow-button-selector {
  background-color: #your-color;
}

/* Change the text color of the slideshow button */
.slideshow-button-selector span {
  color: #your-color;
}

Replace .slideshow-button-selector with the actual class or ID selector of the slideshow button element in your theme.

Replace #your-color with the desired color value in hexadecimal, RGB, or color name format.

4

Hi @afternoonscent ,

I underdstand that you want to change the colour of your slideshow button, along with the button text. Here is some code that may help you.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “theme.scss.liquid” or “styles.scss.liquid” file, depending on which file your theme uses to store its CSS styles.
  4. At the bottom of the file, add the following CSS code:
  5. And Save.
.slideshow__text-wrapper.banner__content.banner__content--bottom-center.page-width.banner--desktop-transparent a {
    color: #c49c6e;
    background-color: springgreen;
}

NOTE: You can change the color you like just don’t delete the ;

Result:

Rose_Dim_0-1684332135015.png
Rose_Dim_0-1684332135015.png462×311 202 KB

Rose_Dim_1-1684332179484.png
Rose_Dim_1-1684332179484.png370×279 170 KB

I hope it help.

1 Like
5

image.jpg
image.jpg3024×4032 2.06 MB

I can’t find theme.scss.liquid or style.scss.liquid file. I only managed to find theme-editor.js under assests.

6

Can you check the base.css file?

Thanks!

7

i have added the code , but only my background changed. the text remained black )-,:

image.jpg
image.jpg3024×4032 1.84 MB

8

Can you check this code. Thanks!

slideshow-component.slider-mobile-gutter a {
    color: brown;
}
9

do i put it under the code you’ve given without changing anything?

10

omg! i rechecked my code, and realised i added an extra # before the colour on the first code you gave me. it works! thank you so much!

11

You can change the color you want. And you can delete the color code on the first code that I give. If the background color is working on that selector then its good. Please delete this only

color: #c49c6e;

1 Like
12

oh! that may cause the problem.. Well codes are sensitive if they missing or you put more they wont work. Good to hear that. Happy to help. :blush:

1 Like