[Dawn Theme] How change "Add to Cart" button colors?

Solved

[Dawn Theme] How change "Add to Cart" button colors?

namestolen
Excursionist
44 0 7

I want to change my "Add to Cart" button on my default Product Page.  I want to change the background color, the text color, and the border color.  Thanks in advance!

 

Also...if you would tell me how to add a border around the main product picture also that would be helpful!

 

Reference URL:  https://rttrove.com/products/9-ancient-silver-skeleton-dnd-dice-tower

 

 

Accepted Solution (1)

Moeed
Shopify Partner
5886 1599 1901

This is an accepted solution.

Hey @namestolen 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product-form__submit:after {
    box-shadow: unset !important;
}
.product-form__submit {
    border: solid 1px cyan !important;
    background: black !important;
    color: aqua !important;
}
</style>

NOTE: Change the color from the code to however you like.

RESULT:

Moeed_0-1730094917554.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 3 (3)

rajweb
Shopify Partner
250 17 19

Hey @namestolen ,

To apply the styling changes for your "Add to Cart" button and add a border around the product image on the product page

Follow these steps:

1. Online Store > Themes > Edit Code 

2. In the code editor, locate and open Assets > base.css(or theme.css).

3. Add the following CSS code at the end of the file:

 

/* Custom Styles for Add to Cart Button */
.product-form__submit {
    background-color: #28a745; /* Background: Green */
    color: #ffffff; /* Text: White */
    border: 2px solid #ffc107; /* Border: Yellow */
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover Effect for Add to Cart Button */
.product-form__submit:hover {
    background-color: #218838; /* Darker Green on Hover */
    color: #000000; /* Text: Black */
    transform: scale(1.05); /* Slight Zoom Effect */
}

 

  Save the changes and refresh your product page to check the result.

 

2. Add a Border Around the Product Image:

In the Assets folder, open base.css (or theme.css).

Add the following CSS at the end of the file:

/* Add Border Around Main Product Image */
.product__media-wrapper img {
    border: 3px solid #343a40; /* Dark Gray Border */
    border-radius: 10px; /* Rounded Corners */
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional Shadow */
}

 

Let me know if this works or if you need further adjustments!

 

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com

Moeed
Shopify Partner
5886 1599 1901

This is an accepted solution.

Hey @namestolen 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product-form__submit:after {
    box-shadow: unset !important;
}
.product-form__submit {
    border: solid 1px cyan !important;
    background: black !important;
    color: aqua !important;
}
</style>

NOTE: Change the color from the code to however you like.

RESULT:

Moeed_0-1730094917554.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


namestolen
Excursionist
44 0 7

Thanks so much!  How would I add a hover effect if I wanted?