Solved

How Do I Make My "Add To Cart" Button Look Like This?

Simon159
Explorer
110 0 21

This is my store : https://charmente.com/products/magnetic-seashell-case

This is what the "Add To Cart" button looks like now : Screenshot 2024-06-06 at 9.05.30 PM.png

This is the "Add To Cart" button I want : https://snugshark.co/products/sharkblanket

Screenshot 2024-06-06 at 9.06.17 PM.png

Accepted Solution (1)

topnewyork
Navigator
298 34 45

This is an accepted solution.

Hello @Simon159 
Go to themes > code editor > find base.css
and then paste this code at the bottom of file 

 

button#ProductSubmitButton-template--22072609538353__main{

	    background: #8dd1d1 !important;
	    color: #ffff !important;
	    font-size: 19px;
            font-weight: 700;
}

.product-form__submit::before, .product-form__submit::after{
            outline: none !important;
            box-shadow: unset !important;
}

 



Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel

View solution in original post

Replies 3 (3)

TerenceKEANE
Shopify Partner
511 86 78

Hi,

 

The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write, I'll help.

 

Navigate to the 'Edit Code' option in your theme settings, then search for “base.css” in the search bar and add below codes.

 

.product-form__submit {
    background: #8dd1d1 !important;
    color: #FDFBF7 !important;
    text-transform: uppercase!important;
    font-weight: 700!important;
}


.product-form__submit::before, .product-form__submit::after{
	    outline: none !important;
    box-shadow: unset !important;
        border: none !important;

	    
}

 

shopify.base.css.jpg

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

Raj-webdesigner
Shopify Partner
268 60 65

Add This css in your edit Code > Base.css File

.product-form .product-form__buttons {
    max-width: 100%;
}

Rajwebdesigner_0-1717680284231.png

 



If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


topnewyork
Navigator
298 34 45

This is an accepted solution.

Hello @Simon159 
Go to themes > code editor > find base.css
and then paste this code at the bottom of file 

 

button#ProductSubmitButton-template--22072609538353__main{

	    background: #8dd1d1 !important;
	    color: #ffff !important;
	    font-size: 19px;
            font-weight: 700;
}

.product-form__submit::before, .product-form__submit::after{
            outline: none !important;
            box-shadow: unset !important;
}

 



Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel