d
Topic
Posts:
2
7 days ago

Changing hover cover for add to cart button in Debut Themr

I have managed to change the Add To Cart button color using CSS... How do I change the hover color for the Add To Cart button?

I am using the Debut Theme.

Thank you.

i
Replies
May Shopify Employee
Posts:
148
6 days ago

Hi, Jason!

This is May from Shopify.

Nice work on changing the button color! I was looking at Debut theme on my test store, and found that can add some code to you theme to change the hover color. I am not an expert in coding, therefore I am uncertain if adding this code is the best solution for this. Before we proceed to the tutorial, I strongly recommend duplicating your theme in case of any unintended results. Once you make the duplicate, feel free to proceed with the steps below:

  1. Open up your theme editor from your admin, then to ‘Online Store > Actions > Edit’.

  2. In your ‘Assets’ folder, go to ‘theme.scss.liquid’.

  3. Paste this code on the very bottom of this file:

    .product-form__cart-submit:hover {
    
    background-color: #000 !important;
    
    }

    You can replace '#000' with your desired color. For reference, you can choose your color from this hex color picker.

  4. Click ‘Save’.

Please keep in mind that once you make changes to ‘theme.scss.liquid’, you cannot roll back to older versions. Therefore, I highly suggest making a duplicate of your theme, in case you need it as a reference or if you’d like to change your code back. If you are not comfortable with making this change, I highly suggest reaching out to our Shopify Experts. Alternatively, since you are using a theme made and supported by Shopify, our theme support may be able to look into making the change as well if your account is eligible!

Let me know if this helps. Feel free to reply back to this thread or contact our 24/7 support, and we’ll happily help!

Kind Regards,

May

Shopify Support


 

May | Shopify Support Team | support@shopify.com
Posts:
2
6 days ago

Hi May

 

Thank you for your assistance.  Works perfectly.

 

Regards

Jason

Posts:
1
5 days ago

Hi May,

I'm trying to do the exact same thing for my store. I'm trying to change the background color as well as the hover color for the 'add to cart' button on my product page. I'm using the 'Debut' theme. I was about to try your soloution, but I don't have a '‘theme.scss.liquid’' page anywhere to edit. I recently downloaded the theme about 2 months ago. I'm assuming my version is dfferent from your version, so where would this setting be in my version? By the way the version that I'm on is 8.0.0.

I'm also trying to move the Add To Cart button to be above the description on the product page, I'm not sure if you could help me with that or point me in the right direction as well?

Thanks,
Lorenzo

May Shopify Employee
Posts:
148
5 days ago

Hi, Lorenzo!

Sorry to hear that you are not able to find your ‘theme.scss.liquid’ file, which is quite odd. All of the free themes made by Shopify should have a ‘theme.scss.liquid’ file, unless you have accidentally deleted it or renamed the file. Are you planning on doing this modification to your current theme on rollingpindepot.com? If so, I just peeked at your store’s source code, and it looks like this is a third party theme. Perhaps this is why you are not seeing ‘theme.scss.liquid’. Furthermore, if you are using Debut, your ‘Add to Cart’ button will be above your product description by default (unless again, you’ve modified the template 🙂). Here is a preview of the product page on Debut

 

If you are planning on using Debut, you can go to your admin to add this theme. From your admin, go to ‘Online Store’, under ‘More themes’ section, click on ‘Explore free themes’ and add ‘Debut’, then publish the theme.

Let me know if you are still not able to find your ‘theme.scss.liquid’ file, and I can take a look into your account. 🙂

Kind Regards,

May

Shopify Support


 

May | Shopify Support Team | support@shopify.com