Can I customize button colors on my Shopify product and contact pages?

Tia34
Excursionist
17 0 7

Hello,

I would like the buttons on my product page, as well as the submit button on my Contact page to be styled with the colours I've outlined as my "secondary button" colour choices.

Is anyone able to help?

Secondary Button Background: #414042
Secondary Button Text: #FFFFFF
Secondary Button Background Hover: #DEDBD0
Secondary Button Text Hover:#414042

Product Page
https://ie7ji1dvxi859q3y-26037026838.shopifypreview.com

Contact Page
https://ie7ji1dvxi859q3y-26037026838.shopifypreview.com

Replies 9 (9)

KetanKumar
Shopify Partner
36839 3635 11972

@Tia34 

yes please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.mini.css ->paste below code at the bottom of the file.

form#contact_form .contact-form--submit-button .btn {
background: #414042;
color: #FFFFFF;
}
form#contact_form .contact-form--submit-button .btn:hover {
    background: #DEDBD0;
    color: #414042;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tia34
Excursionist
17 0 7

Thank you!

This did work for the contact page, do you happen to know how I can do the same on the product page as well?

Tia

KetanKumar
Shopify Partner
36839 3635 11972

@Tia34 

yes its work as well give me product url if  doesn't work so i will check

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tia34
Excursionist
17 0 7

Here it is!

Will this make sure to change the button styling whenever the product is shown?

Thank you

 

https://hd2rcjyq2gez0fz1-26037026838.shopifypreview.com

KetanKumar
Shopify Partner
36839 3635 11972

@Tia34 

yes i can see this look

KetanKumar_0-1635270130043.png

 

i have check same color code as per your code let me know what do you need this part?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tia34
Excursionist
17 0 7

Hello,

I think we are talking about a different section. I am referring to the buttons located underneath the products here.

Screen Shot 2021-10-26 at 3.08.06 PM.png

KetanKumar
Shopify Partner
36839 3635 11972

@Tia34 

oh i see yes please add this code 

1. Go to Online Store->Theme->Edit code
2. Asset->/custom.css ->paste below code at the bottom of the file.

a.quick-add-button-variants {
background: #414042;
color: #FFFFFF;
}
a.quick-add-button-variants:hover {
    background: #DEDBD0;
    color: #414042;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tia34
Excursionist
17 0 7

Hi Ketan,

Unfortunately it doesn't seem like that code is working.

Tia

KetanKumar
Shopify Partner
36839 3635 11972

@Tia34 

yes please try this code

a.quick-add-button-variants {
background: #414042 !important;
color: #FFFFFF !important;
}

a.quick-add-button-variants:hover {
    background: #DEDBD0 !important;
    color: #414042 !important;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing