Change Hover Colour on Buttons and Images on Broadcast Theme

SUNSEASOL
Tourist
11 0 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?

Replies 6 (6)

Moeed
Shopify Partner
3795 958 1190

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

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
SUNSEASOL
Tourist
11 0 1

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

Moeed
Shopify Partner
3795 958 1190

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 </body> tag.

<style>
.btn--large:hover {
    color: black !important;
    --btn-bg-hover: white !important;
}
</style>

RESULT:

Moeed_0-1714648030338.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

techlyser_web
Shopify Partner
1503 278 298

Hello @SUNSEASOL 
Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
SUNSEASOL
Tourist
11 0 1

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

Made4uo-Ribe
Shopify Partner
6035 1448 1785

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

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

Example. 

Made4uoRibe_1-1714647891119.png

And Save. 

Result:

Made4uoRibe_2-1714647915859.png

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com