Add to cart button for products on front page/on collections pages in Minimal

Tourist
8 0 2

I've searched and can only really find outdated information on this topic, does anyone know how I can do this please?

I am a complete newb at changing/editing but I am great at following instructions step by step.

0 Likes
Shopify Staff
Shopify Staff
537 0 71

 

Hey, Dawn!

Savannah here from the Shopify Guru Team. 

I'm happy to walk you through adding that option step-by-step. My only concern with adding an 'Add to Cart' button onto every product of your collection grid/home page is that we won't be able to create a variant selector. The first variant will be selected automatically. Either way, here's how we add it: 

  • Navigate to Online store>Themes and select "Edit HTML/CSS" from the Actions Menu.
  • From the left-hand menu, select the Snippets folder 
  • From the snippets folder, select the product-grid-item.liquid 
  • Scroll to the very bottom of the code and paste this code: 
<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" /> </form>

Let me know if that does the trick! 

Savannah | Shopify Guru
support@shopify.com

 

2019 NOTE: This is an old forum post from 2017 and the Minimal theme has since been updated. The code advised here might not work for your theme. Please feel free to contact our Support directly here for assistance. Alternatively, you can create a new forum post within our Design Thread where fellow merchants, Experts and developers may be able to help. Always make sure to create a backup of your theme as shown here before making any coding changes.
2 Likes
Tourist
8 0 2

Hi Savannah,

Ah.. it never occured to me that it wouldn't work for variants!

Maybe I'll go and have a re-think, maybe I'll have something like a quick view instead (which Im sure there is an app for)

Thank you so much for your reply :-)

Dawn

0 Likes
New Member
1 0 0

Hi Savannah,

Thank you for this tutorial! I was able to add the "add to cart" buttons on my front page but how can I get them centered?

Thank you in advance!

Juha / JetSetSun.fi

0 Likes
New Member
1 0 0

Is it possible to update this info to todays shopify. I'm using the debut theme.

0 Likes
New Member
2 0 1

Hi Savannah,
So I managed to add the 'add to cart buttons' on the front page and collection pages but when you click on 'add to cart' than you automatically jump to the single product page which is not what I'd like to achieve.
What I do like to achieve is that the product is added to the shopping cart while staying on the page so that my customers don't have to click back and forward to the page where they found the (multiple) items they liked... I'd like to give them the opportunity to keep on shopping / adding to the cart while staying on that page.
Can you please provide the code that is needed to exactly achieve that? This is the code you provided earlier:

<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" /> </form>

Hope you can update the file and show me how to achieve this.

Thanks in advance :-)

Kind regards,
Djofferson

1 Like
New Member
2 0 1

(I use the free SIMPLE THEME by Shopify)

Ok, so I found a working solution to be able to keep on shopping on the same page (collection page or home page) while adding products to cart.

1- I used the code to first add the 'add to cart' button on collection pages provided by Savanah:

 

<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" /> </form>

2- I exactly followed this tutorial: https://help.shopify.com/en/themes/customization/products/add-to-cart/stay-on-product-page-when-item...

 

That did the job! But I wanted to change the way the buttons appeared:
3- To change the buttons colors and sizes I pasted this code on the bottom of  THEME.SCSS.LIQUID file (in the add code section) :

 

.btn {
  min-height: 5px;
    line-height: 0.3;
    background-color: #ad935c;
    color: #000;
}

And than everything worked :-)

 

 

Only one question remains:
1- All the buttons are affected by .btn css. Is there a way to edit the 'continue shopping and add to cart buttons' on single product page and shopping cart page independent from the other 'add to cart' buttons? I'd like to make those a bit bigger and lighter.
Can you explain how to achieve that?

Kind regards,
Djofferson 

 

0 Likes
Tourist
5 0 1
Thank you! The code works, but how do you get it centered?
1 Like
New Member
5 0 0

Hey, Savannah I used the code you suggested but I want to center the button and change the color. I tried to us align= "center" in input but no luck. Any suggestions?

0 Likes
New Member
5 0 0

Thanks for posting! I was wondering how you changed the appearance of the button, I tried adding the .btn code you provided it to the bottom of the theme. liquid file but the appearance of the button didn't change. I think I may have put it in the wrong place. Could you share a screenshot of where you placed it? Or give me a bit more detail?

0 Likes