Add to Cart Button - Change colour depending on product.

bskill
Visitor
1 0 0

Hi all,

 

Was wondering if I could get some help with customising my store. Basically, I have all my products (of which there are 10) assigned to the 'Default Product' template in my Theme (Taste). I want to change the 'Add to Cart' button's color to match the colour of each product individually and I'm not sure how to approach this.

 

Could somebody please point me in the right direction? Should I use meta-fields or rather split each product into it's own individual theme template and take it from there?

 

Any help would be much appreciated.

 

In case it's helpful, the URL is https://lacelabs.co.uk

Replies 2 (2)

Titan_Teche
New Member
12 0 0

You can create different product template for different button color and then assign the product template to its respective prodcuct


Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Need help with your store? titanteche@gmail.com

For Theme Customization and Store Setup visit My Website


ThePrimeWeb
Shopify Partner
2138 614 487

Hey @bskill,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

Make copies of this code and change the link between href="{link}" and change the background-color setting to whatever colour you like. 

ThePrimeWeb_1-1716395401001.png

 

<style>
html:has(link[href="https://lacelabs.co.uk/products/flat-pink-laces"]) button.product-form__submit {
    background-color: #efa3b0;
    color: white;
}

html:has(link[href="https://lacelabs.co.uk/products/flat-pink-laces"]) button.product-form__submit:after {
    box-shadow: none !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1716395306111.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!