Change color "follow on shop" button

[lplabranche]

Hello,

I've done some research on the forum... but none of the proposed css code solutions worked for me or seemed to worked for others.

However I've figured it might be easier to create an alternate image with the wanted color to replace the original "follow on shop" button, which I thought might just be a png (why it might not be possible to alter the color with css only).

I've created an assets with the image in the codes, but i am not quite familiar with this process on shopify since i've only did it in squarespace before.

I would like to know if anyone would have a solution for a code to alternate the original button (image) with this image? Would be much appreciated

 

website: www.inprintstore.com pass: shiznitz

[Geist]

The process is the same for any site, just go to where your button is and right click and inspect. This is the dev tools and you need to click the select icon in the top left corner or just use cmd + shift + c and click the button. You will see the css styles on the side and what rules are being applied and from what file. From there it's a matter of going into your site's source code and updating that style. Many answers here on the forum are wrong, you don't need to use "!important" when writing css styles.

[lplabranche]

.follow-icon-wrapper:before {

1. content: '';
2. background: #000000;
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);

}

Following your instruction, I've found out within the inpesct tool that this is one of the the css code used to change the color of the button, found the other one that applies to the border as well. This might seem like a stupid question but is there a way to find quickly where the code is locate din the files? Tried to search .follow on the base.css, theme.liquid and section-footer.css folders but turns out it was unsuccessful.

 

 

[Geist]

In the image you provided the css is in the small panes on the right, you should be able to click <style>. This means that on that page there are inline styles which just means there is css in a set of <style></style> tags. If the css was coming from a css file, there would be a link to that file instead of '<style>' and it would indeed show you in the file where it is. And another tip, when you have dev tools open, you can hit cmd + f to do a search

[lplabranche]

Yes i already got that much, but that didn't answer my question. Where can i find and edit those css codes in a set of <style></style> tags somewhere in the "edit code" then? I've found the .footer__follow-on-shop codes in the section-footer.css folder but nothing i've done there worked. I have very basic knowledge of html and css as you can see..

[WalkYourStyle]

Is the follow on shop button coming from a third party app? If it is then you will need to find the code of that button in your theme's code and change it from there.

[BSSCommerce-HDL]

Hi @lplabranche, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.follow-text {
    background-color: black !important;
    border-radius: 24px;
}
</style>

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍