Prestige theme - Add to cart button + change colour

JDA1991
Tourist
7 0 2

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!

Replies 10 (10)

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

DavidEKim
Shopify Partner
392 131 184

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.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
JDA1991
Tourist
7 0 2

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

DavidEKim
Shopify Partner
392 131 184

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.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
JDA1991
Tourist
7 0 2

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

DavidEKim
Shopify Partner
392 131 184

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.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
JDA1991
Tourist
7 0 2

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:

 

<form method="post" action="/cart/add">

  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />

  <input min="1" type="number" id="quantity" name="quantity" value="1"/>

  <input type="submit" value="Add to cart" class="btn" />

</form>

 

DavidEKim
Shopify Partner
392 131 184

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

Good luck for your designing & coding.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
JDA1991
Tourist
7 0 2

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

ISS1
Tourist
23 0 1

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?