How to change button colors (Sense theme)

Store Design
, ,
1

Hi,

Need your help changing button colors on Product page (Sense theme)

  1. How can I change ‘Quantity #’ button to White background?

  2. How can I change Hover state color on ‘Add to cart’ button?

  3. How can I change Hover state color on ‘Buy now’ button?

Screenshot attached.

Screenshot 2023-02-28 at 6.14.01 PM.png
Screenshot 2023-02-28 at 6.14.01 PM.png1102×1328 94.7 KB

2

www.discotail.com

pw: jk810

3

Hi @jk888 ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

  1. Change ‘Quantity #’ button to White background
quantity-input.quantity {
    background: white
}
.quantity__button:not(:focus-visible):not(.focused) {
    background-color: unset;
}
  1. change Hover state color on ‘Add to cart’ and ‘Buy now’ button. You can change color value to match your store
button#ProductSubmitButton-template--14925730807891__main:hover {
    background: red;
}

button.shopify-payment-button__button.shopify-payment-button__button--unbranded.BUz42FHpSPncCPJ4Pr_f.jjzYeefyWpPZLH9pIgyw.RWJ0IfBjxIhflh4AIrUw:hover {
    background: red;
}

Hope my answer will help you.

Best regards,

Victor | PageFly

1 Like
4

Thanks @PageFly-Victor

For the ‘Quantity’ background, it worked! But when I tap on the number to type, it still shows a square box in old color. See attached.

Screenshot 2023-02-28 at 8.27.31 PM.png
Screenshot 2023-02-28 at 8.27.31 PM.png454×326 13.7 KB

5

2. change Hover state color on ‘Add to cart’ and ‘Buy now’ button. You can change color value to match your store

Thanks! This worked but.. both buttons show border line on Hover. How can I remove this border line on hover states on ‘add to cart’ and ‘buy now’ buttons?

@PageFly-Victor

6

Hi @jk888 ,

You can add this code below to base.css:

.button--secondary:hover:after {
    display: none;
}
button[data-testid="Checkout-button"]:hover:after {
    display: none;
}
.quantity__input:focus-visible {
    background: white !important;
    box-shadow: initial;
    z-index: 0;
    outline: none;  
}