Edit "In Shop folgen" button in footer section (css, Taste theme)

Edit "In Shop folgen" button in footer section (css, Taste theme)

medicus-serpens
Tourist
10 0 4

Hi there,
I am busy building our webshop and I know my way around code a bit, even if Shopify's liquid structure is new to me. I am getting the hang of the liquid coding, but I can't seem to solve the this issue, so far.
I am trying to edit the design of the "In Shop folgen" button next to the socials icons in the footer section (see screenshot).

Screenshot 2024-12-09 at 17.10.05.jpg

It is currently styled in a uglyish purple color and I would like it to match our CI/CD.
I tried searching for the respective css in Assets/section-footer.css but no luck.
I would like to make the button look and behave something like the following code:

 

.footer_RESPECTIVE CLASS {
    background-color: #fdb400; 
    color: black;      
    border-radius: 8px;           
    font-size: 16px;              
    padding: 10px 20px;           
    border: 2px solid black; 
    transition: all 0.3s ease;    
}

.footer_RESPECTIVE CLASS:hover {
    background-color: black; 
    color: #fdb400;       
    border-color: #fdb400; 
}

 

I also found code using Firefox's Inspector tool but I can't seem to find any way to edit it in Shopifys backend.

Inspector-screenshot.jpg


Website is still not fully published, so password = medicus.
URL to main page: https://www.medicusserpens.de
Website language is German, so don't be afraid. 😉
Thanks a bunch!
Help is much appreciated!

 

Replies 2 (2)

Asad-Mahmood
Navigator
300 51 56

paste the below css in base.css file

.follow-text{
   background-color: #fdb400;
    color: black;
    border-radius: 8px;
    font-size: 16px;
    border: 2px solid black;
    transition: all 0.3s ease;
}

 

AsadMahmood_0-1733770975392.png

 

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp





medicus-serpens
Tourist
10 0 4

Hi there,
thanks for your reply but sadly it somehow doesn't work.
When I try and modify the .follow-text class in Firefox Inspector tool directy: it works.
But adding it to the base.css file and also trying via the Shopify shop editor UI doesn't work, for some reason.
Any further suggestions?
Cheers!
Max