Solved

brooklyn - change shop button design on homepage

vanessaliew
Explorer
52 0 19

Hi I would to change the "SHOP" button on homepage to white color background with black border and round corner, like the apple pay logo border. is it possible? I also want to reduce the height and width of the border, please help.

6.PNG

7.PNG

 

 

Accepted Solution (1)

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@vanessaliew,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
[id*='section'] [class*='feature-row__item'] .btn{

    background: #ffffff !important;
    color: #202020 !important;
    border-color: #202020 !important; 
}
</style>

 

You can change the colors as per your wish:

#ffffff = background color
#202020 = text color
#202020 (last one) - border color


Please let me know whether it works.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 3 (3)

Zworthkey
Shopify Partner
5581 642 1565

hii, @vanessaliew 
Kindly share your store URL so,
I can solve your problem.
Thank You.

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@vanessaliew,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
[id*='section'] [class*='feature-row__item'] .btn{

    background: #ffffff !important;
    color: #202020 !important;
    border-color: #202020 !important; 
}
</style>

 

You can change the colors as per your wish:

#ffffff = background color
#202020 = text color
#202020 (last one) - border color


Please let me know whether it works.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

vanessaliew
Explorer
52 0 19

@diego_ezfy thanks solved.