change the follow on shop button color + hover to black

Store Design
, , , , ,
1

the title says it all,

Please let me know if you have a solution

www.inprintstore.com

pass: shiznitz

2

Hi @lplabranche ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1724746243506.png
BSSCommerceB2B_0-1724746243506.png400×195 26.3 KB

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

.button:not(.button--following):hover .follow-icon-wrapper:before {
    background: black !important;
    border-color: black !important;
}

Step 3: Save and reload home page.

=>> The result:

BSSCommerceB2B_1-1724746370603.png
BSSCommerceB2B_1-1724746370603.png1239×482 12.5 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

3

Unfortunately did not work. When I do the inspect tool I can see that the code in under tag, but i can not find where it is located in the files. All css codes I have tried so far didn’t affect the button (only worked within the inspect preview).

4

@BSS-TekLabs

Still the one problem I encounter that I can resolve is changing the “follow on shop” button color to black in the footer. Seems like it is embedded as a tag, but I cannot figure out how to change the color. No matter what i’ve tried it remains purple

5
  • Here is the solution for you @lplabranche
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.
  • Here is the result you will achieve:

BSSTekLabs_0-1724769463354.png
BSSTekLabs_0-1724769463354.png403×134 3.04 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
6

Didn’t work, When I inspect it, these are all the codes I see that needs to be modified:

.button:not(.button–following):hover .follow-icon-wrapper:before {

  1. background: #7f68e9;
  2. border-color: var(–border-hover-color);

}

.follow-icon-wrapper:before {

  1. content: ‘’;
  2. background: #5433EB;
  3. border-radius: 48px;
  4. width: 100%;
  5. height: 100%;
  6. top: 0;
  7. left: 0;
  8. position: absolute;
  9. z-index: -1;
  10. transform-origin: center;
  11. box-sizing: border-box;
  12. border: 1px solid var(–border-color);

:host {

  1. display: inline-block;
  2. line-height: normal;
  3. –following-text-color: #000000;
  4. –border-color: #5433EB;
  5. –border-hover-color: #7f68e9;
  6. –parent-width: var(–reserved-width, 177px);
  7. width: var(–parent-width);

}

I don’t know if that helps

7

Please take a photo of the code you added to the theme.liquid file for me to check.

8

These are from the inspected tools, I’ve added no code to the theme file as we speak. When I did change the color to black within these in the inspected tools, it displayed what I wanted, but I could never find where to modify it in the “edit code”

9

I found the reason why. On your theme this part is coded with “shadow-root” which prevents css from being coded from outside. To be able to css for this element you need to find its exact location and add css there to be able to apply.