Prestige theme - Add to cart button + change colour

Store Design
1

Hi,

I have the Prestige shopify theme and have some difficulties adding the following elements:

  • Add ‘Add to Cart’ button on product hover or below product prices

  • Change the Add to cart button colour so it doesn’t look like it’s deactivated and stands out more so people click it.

Can somebody point me in the right direction?

Thank you!

2

Hello @JDA1991 ,

Please share:

  • your store URL;
  • page URL with the issue you mention;
  • storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

3

Hi,

To change the button color in Prestige Theme, please follow the steps below.

  1. Online Store > Actions > Edit code > Scroll down to Assets > Click theme.scss.liquid > Add the code below. (If you want to change the button color to different color, please change the color hex code from #f2b6b6 (indian pink) to your color code.
.Button, .shopify-payment-button__button--unbranded {
  background-color: #f2b6b6 !important;
}

Don’t forget to save the file.

Hope it helps.

Thanks.

4

Thank you - when I copy it in the code I’m getting a strange error code at the top of the website page though? Can I just paste it at the top of the theme.scss.liquid page? And how can I change the button text colour? Thank you

5

Hi,

To copy the code, you may click ‘Copy’ in the code box (top right corner) below.

.Button, .shopify-payment-button__button--unbranded {
  background-color: #f2b6b6 !important;
  color: #000;
}

To change the button text color, add ‘color: #your hex code;’ as above. (the hex code #000 is black). Please add the code at the very bottom of the theme.scss.liquid.

You may hit enter couple of times to make line breaks, then add the code. This way you won’t make any mistake in the file. If you have any other questions, please let me know.

If it resolve your issue, please Like & Select Solution.

Thanks.

6

Thank you so much, that worked! And how do I Add ‘Add to Cart’ button on product hover or below product prices? Thank you

7

It’s available from Theme Editor.

Please go to Online Store > Customize > Click Arrow next to Homepage (top center) > Click Products > Select Default product > From left navigation, click product page

Check the checkbox of Description below add to cart.

The Add to cart button will be located below the price.

8

That’s not what I mean unfortunately, I found the code I need to use to add a ‘Add to cart button’ when you hover over a product on the homepage or product page but I can’t find the snippet I need to paste it to. I’ve attached a screenshot of the options I have available in my code.

This is the article with I’ve found online, based on this article: https://ecomexperts.io/blogs/liquid-tutorial-shopify/shopify-add-to-cart-button-collection-page

Code:

9

Okay. Sound’s good to hear that you found what you need.

Good luck for your designing & coding.

10

Hi haven’t found it yet because the snippet does not exist - would you know which one it is?

11

Hi there.. I have Prestige theme as well and wanting to change the background colour of the Add to Cart button too but the above code is not working! Any advice?