How to add "add to cart" hover color only for a specific product?

Store Design
1

Hello!

I am new to Shopify/liquid/JSON and only have basic HTML/CSS knowledge.

This is for a client.

He asked me to give a hover color for one of his products and he also wants to change that color occasionally by himself by using theme customizer.

I want to make it so that he can change it by himself without going into the code editor.

I have successfully created the “color picking option” tool by writing the code below on “setting_schema.json”.

{

“type”: “color”,

“id”: “montreal_btn_color”,

“label”: “Montreal No. 9 button color”,

“default”: “#00ccff”

},

But I don’t know how to connect this “type code” to that specific “add to cart” button. I think it’s a free theme but couldn’t find the name.

I used “btn_color” to see if I can make it work. Later, I would change it to “link_hover” in the future.

Any help or advice is very much appreciated.

Thank you for your time!

2

Hi @Arunkumars , which theme are you using? I suppose that you’re on Shopify 2.0?
Do you want to enable this for only one product, or every product on your store?

2 Likes
3

Hi Marina,

Thanks for your reply. I think I am using outofthesandbox.com theme called New York city.

Link - https://outofthesandbox.com/collections/responsive-theme/products/responsive-theme-new-york

And yes, I want to have that effect only for a specific page.

Thanks again!

4

Ok @Arunkumars , so:
Here is your button element:

 
            Buy now

In order to do this, you should change it:

{% if product.url == '/products/YOUR PRODUCT' %}
 
            Buy now 
{% else %}
 
            Buy now 
{% endif %}

Schema ‘hover_color’ and ‘color’ are just my examples. :slightly_smiling_face:

1 Like
5

Wow!

Thanks @MarinaPetrovic for taking the time to write the codes!!!

I didn’t expected we need to code this much on Shopify to make that simple change. I use wordpress, and usually I right-click and select inspect element on browser and make the required changes on there. After that I would copy the css styles and paste on wordpress css script area with class name.

Honestly, I don’t where to place your codes. But, I will give it a shot!

Thanks for your help!

6

Hi,

Where did you place the color picking option tool in the schema? Have something similar I’m trying to implement.