Change Hover Colour on Buttons and Images on Broadcast Theme

Store Design
, , , ,
1

There is no option on Broadcast theme colors to change the hover colour on both buttons and images throughout my website.

The only option is to code. I spoke to an advisor but was confused by what I had to do.

Shopify Advisor said to:

  1. Look for a file named [theme.scss.liquid] or [styles.scss.liquid]

  2. dd the following CSS at the bottom of the file to change the hover colors for buttons and images:

    .button-class:hover, .image-class:hover { color: #FFFFFF; /* Changes text color on hover / background-color: #FABD60; / Changes background color on hover */ }

    Note: Replace .button-class and .image-class with the actual CSS classes used in your theme for buttons and images. If you’re not sure, I can help you find these.

I don’t understand what button-class and image-class is?

Please advise what to do?

2

Hey @SUNSEASOL

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hello @SUNSEASOL
Can you share store URL?

4

hey i dont think it’s password protected : https://madsunsea.myshopify.com/

5

hey i don’t think it’s password protected : https://madsunsea.myshopify.com/

6

Hi @SUNSEASOL

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

Loacte the Asset folder and look for the file theme.css.

Open the file and look the code Or ctrl F to find same selector the one colored blue in the picture below.

Made4uoRibe_0-1714647715173.png
Made4uoRibe_0-1714647715173.png778Ă—235 7.98 KB

Now change the --btn-bg-hover: to color you like to use.

Example.

Made4uoRibe_1-1714647891119.png
Made4uoRibe_1-1714647891119.png740Ă—210 6.89 KB

And Save.

Result:

Made4uoRibe_2-1714647915859.png
Made4uoRibe_2-1714647915859.png375Ă—317 9.97 KB

Note: this will change all the hover color in the store. Also, I just like to clarify about the image. Background hover on Image? Some f your image zoom when hover but most of it dont change at all when hover.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

7

Hey @SUNSEASOL

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

RESULT:

Moeed_0-1714648030338.png
Moeed_0-1714648030338.png1889Ă—647 163 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed