How can I modify the style of cart buttons on my website?

How can I modify the style of cart buttons on my website?

antoinelacour
Excursionist
43 0 8

Screenshot 2023-12-04 at 22.18.25 (2).png

 

Hello!

 

See above, I would like to change the style of these buttons to be squared, not rounded and add an outline to the 'Check out' button in green #184F2E

 

I would also like to change the Quantity element to match the product pages (see example below).

https://plantedjournal.shop/products/movement-poster

- No drop shadow

- Squared box

 

The site is www.plantedjournal.shop

 

Any help would be greatly appreciated!

Replies 5 (5)

enzoyuna2023
Shopify Partner
39 10 5

Hi, You are using Studio Theme.
Actually you can custom your buttons from theme setting.

enzoyuna2023_0-1701739673135.pngenzoyuna2023_1-1701739698217.png

.. and use custom css From Theme setting add "Custom CSS" to update checkout button.

enzoyuna2023_2-1701739766091.png

 

button#checkout {
    border: 1px solid #184F2E !important;
    border-radius: 0  !important;
}

 

Available for hire : novayadi85[at]gmail.com
Chat on WhatsApp
Buy me coffee
antoinelacour
Excursionist
43 0 8

Hi @enzoyuna2023 thanks you letting me know that those options are available in the settings!

Regarding the 'Check out' button, can I actually make it a solid green button with white text, and which remains in this state on hover? Currently, on hover, the green outline is being removed.

enzoyuna2023
Shopify Partner
39 10 5

Hi @antoinelacour 
This is the css to make it :

button#checkout {
    border: 1px solid #184f2e !important;
    border-radius: 0 !important;
    transition: all 0.25s ease-in-out;
}

button#checkout:hover {
    background: #184f3e;
    color: #fff;
}
Available for hire : novayadi85[at]gmail.com
Chat on WhatsApp
Buy me coffee
antoinelacour
Excursionist
43 0 8

Hi @enzoyuna2023 Sorry you seem to have not understood. I would like to make the button solid green with white text, NOT green outlined with green text. On hover, I would like the button to remain solid green, with an additional green outline added, so the button slightly enlarges.

enzoyuna2023
Shopify Partner
39 10 5

Please just change the background instead of border. 😂

Available for hire : novayadi85[at]gmail.com
Chat on WhatsApp
Buy me coffee