Editing an Add to Cart button

Highlighted
New Member
8 0 0

Hi all,

 

We're using the Supply theme and looking to have an 'Add to Cart' button under each product in grid view. I have used the following code in Snippets > product-grid-item.liquid and it works okay.

 

      <form method="post" action="/cart/add">
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    <input type="submit" value="Add to Cart" class="btn"/>

 

Just wondering if it's possible to add code to change the colour, size and text colour of the button?

 

Thank you

Dale

0 Likes
Highlighted
Shopify Expert
129 0 23

Hi Dale,

Add the CSS class into button like this

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

after that you can use .btn-add-to-cart class to change style of button.

Richard Nguyen | PageFly CEO
0 Likes
Highlighted
New Member
8 0 0

Hi Richard,

Thank you for this. I'm rather new and not fully up to speed with CSS. In product-grid-item.liquid rows 67-70 now look like this; (I've changed "Add to Cart" to "Buy Me")

      <form method="post" action="/cart/add">
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    <input type="submit" value="Buy Me" class="btn btn-add-to-cart" />
  </form>  

So my current buttons look like;

What would I need to add to change the colour of the button? I have a hex code of "#ed1e24" which is the company colour so I'm looking to have that as the background colour with white text. I'm also looking to have slightly rounded corners, I understand the code is "border-radius: 8px;" but I'm unsure as to how to add the code

 

Many thanks

Dale

0 Likes
Highlighted
Shopify Expert
129 0 23

Hi Dale,

You can add this custom CSS into theme.scss file in the assets folder

.btn-add-to-cart {background: #ed1e24 !important; }

 

Richard Nguyen | PageFly CEO
0 Likes
Highlighted
New Member
8 0 0

Hi Richard,

That's worked perfectly, thank you so much! One final question regarding the format of the collections in grid view. If the item title goes onto a second line it pushes the price and button down (left and centre) however it does not stay consistent if the item title has one line (right item). Is it possible to add a code to make it so the price and button always stay level with each other?

 

Many thanks

 

0 Likes
Highlighted
Shopify Expert
129 0 23

Could I know your store URL? I will give you a code

Richard Nguyen | PageFly CEO
0 Likes
Highlighted
New Member
8 0 0

Hi Richard,

Our URL is  https://aurora-world-uk.myshopify.com/ 

 

We're still in the development stage at the moment and looking at ironing out the creases in the design

 

Many thanks!

0 Likes
Highlighted
Shopify Expert
129 0 23

Hi,

Please use this code

.product-item--price, .product-item--price + form { float: left;}
.product-item--price span.h1 { line-height: 40px; }
.product-item--price + form { margin: 0 0 0 20px; }

 

Richard Nguyen | PageFly CEO
0 Likes
Highlighted
New Member
8 0 0

Hi Richard,

Many thanks for your help, I really appreciate it. Before I added the code it looked like this;

 

Once I added the code to the end of "theme.scss.liquid" the layout looked like this;

 

Ideally I was thinking of having a design like this; with the price and button being aligned across all three products even if a product title goes onto a second line.

 

 

Many thanks

0 Likes
Highlighted
Shopify Expert
129 0 23

Hi,

With the current template, no way to do like this. Do you have any knowledge base about HTML code?

Richard Nguyen | PageFly CEO
0 Likes