Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
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
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:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thanks so much! How would I add a hover effect if I wanted?
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024