Shopify themes, liquid, logos, and UX
Hi
I want to change the color and size of certain buttons instead of only having the option to bulk change them.
I looked at previous posts about changing buttons in the code editor but I can't seem to figure it out.
I want to change the SHOP NOW button on the top and bottom of the home page, the LEARN MORE on the middle, and VIEW ALL just underneath that.
In the shop, the ADD TO CART button is white so it is barely visible, which needs to change.
If I could be pointed to where to change the numbers for the size, location, and color code for each button, I can figure out the rest.
My website is: https://perfectexo.com
Please advise
Thanks!
Solved! Go to the solution
This is an accepted solution.
Please check the following screenshot. You have to correct your closing brackets. First, you have to add a single closing bracket and with the second arrow, you have to close 2 curly closing brackets.
After correcting this add the following code at the bottom in your theme.css file.
.btn, .shopify-payment-button .shopify-payment-button__button--unbranded{
background-color: #000 !important;
color: #fff !important;
}
.btn.hero__btn{
background-color: #fff !important;
color: #000 !important;
}
.template-product button.btn.product-form__cart-submit {
background-color: #000 !important;
color: #fff !important;
}
Hope this works.
Thanks!
This is an accepted solution.
Please add the following separate code for both buttons. I commented there for the first and 2nd shop now button.
/* For the first shop now button */
#shopify-section-hero-1 .btn.hero__btn{
background-color: #fff !important;
color: #000 !important;
}
/* For the 2nd shop now button */
#shopify-section-1617403904121da62d .btn.hero__btn{
background-color: #fff !important;
color: #000 !important;
}
You can change colors as per your need.
Thanks!
This is an accepted solution.
Please check the following screenshot. You have to correct your closing brackets. First, you have to add a single closing bracket and with the second arrow, you have to close 2 curly closing brackets.
After correcting this add the following code at the bottom in your theme.css file.
.btn, .shopify-payment-button .shopify-payment-button__button--unbranded{
background-color: #000 !important;
color: #fff !important;
}
.btn.hero__btn{
background-color: #fff !important;
color: #000 !important;
}
.template-product button.btn.product-form__cart-submit {
background-color: #000 !important;
color: #fff !important;
}
Hope this works.
Thanks!
Thanks, exactly what I needed.
Worked like a charm.
If possible, can you also provide a way to isolate the changes?
For example, when I change
.btn.hero__btn{
It applies to both of my Hero banner buttons (I have 2 hero banner sections for my homepage, and I want to customize each button separately)
Is that possible to do?
Thanks again!
This is an accepted solution.
Please add the following separate code for both buttons. I commented there for the first and 2nd shop now button.
/* For the first shop now button */
#shopify-section-hero-1 .btn.hero__btn{
background-color: #fff !important;
color: #000 !important;
}
/* For the 2nd shop now button */
#shopify-section-1617403904121da62d .btn.hero__btn{
background-color: #fff !important;
color: #000 !important;
}
You can change colors as per your need.
Thanks!
Thanks! Worked perfectly after I deleted the initial hero button coding. You're a lifesaver!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024