Adding an Add to Cart Button on home page

New Member
2 0 1

Is there a way to add an add to cart button on the home page in the collection section of the Startup theme? I want to be able to add a short description of the product and the add to cart button. The website is jamrockcrate.com

0 Likes
Shopify Staff
Shopify Staff
100 0 15

Hey there Tresanne!

Cynthia here, a Guru with Shopify :).

I'm assuming that you are referring to the Home: Featured Products Section as this is the only homepage section that displays individual products (in the Crates collection) that could be added to the cart - however, if I'm wrong, let me know and I'll be happy to give this another look.

This Section links to the home-featured-products.liquid Snippet within the Startup theme code.

On line 40 of your home-featured-products.liquid, there is a Snippet called product-list-item that is included there. The product title & price are pulled in via that "included" Snippet.

So this product-list-item Snippet is where we'll need to make a few edits to get the 'Add to Cart' button displaying in that home page section. Head to your Admin->Online Store->Themes, click the '...' icon and then 'Edit HTML/CSS'.

Once you're there, go to product-list-item in your Snippets on the left. The product title & price code start on lines 42-43, so this will be a good starting spot to place the Add to Cart button code.

Now that we have a good idea of where we're going to place the code - we need to grab the Add to Cart form code itself.

Head over to your product.liquid Template and copy the entire Cart form code - this will be what's included between <form and </form>, which is on lines 68 - 113. I'll include that code here as well:

    <form class="product-form" action="/cart/add" data-productid="{{product.id}}"  method="post"> 
 {% if product.available %}{% include 'subscription-product' %}{% endif %} 

      {% if product.variants.size > 1 %}
        <div class="product-options">
          <select name="id" data-productid="{{product.id}}" id="product-select" class="product-select">
            {% for variant in product.variants %}
              <option {% if variant == selectedVariant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
            {% endfor %}
          </select>
        </div>
      {% else %}
        <input type="hidden" name="id" data-productid="{{product.id}}" class="product-select" value="{{ product.variants[0].id }}" data-variant-title="{{ product.variants[0].title }}" />
      {% endif %}

      <div class="input-wrapper product-quantity">
        <label for="quantity">{{ 'general.quantity' | t }}</label>
        <input type="text" name="quantity" id="quantity" value="1" />
      </div>

      <div class="add-to-cart">
        {% if product.available %}
          <div class="product-form-submit-wrap">
            <input type="submit" value="{{ 'products.product.add_to_cart' | t }}" />
            <div class="add-to-cart-loader"></div>
          </div>
          {% capture cart_link %}
            <a href="/cart">{{ 'products.product.cart_link' | t }}</a>
          {% endcapture %}
          {% capture continue_link %}
            <a href="/collections/all">{{ 'products.product.continue_link' | t }}</a>
          {% endcapture %}
          {% capture checkout_link %}
            <a href="/checkout">{{ 'products.product.checkout_link' | t }}</a>
          {% endcapture %}
          {% capture product_item %}
            <span class='added-product-name'></span>
          {% endcapture %}
          <p class="product-add-success-message">{{ 'products.product.success_html' | t: cart_link: cart_link, continue_link: continue_link, checkout_link: checkout_link, product: product_item  }}</p>
          <p class="product-add-error-message"></p>
        {% else %}
          <input type="button" class="disabled" disabled="disabled" value="{{ 'products.product.sold_out' | t }}" />
        {% endif %}
      </div>

    </form>

Copy that code and go back to your product-list-item Snippet - I think placing it underneath the title/price will look good, so I would suggest placing it somewhere near the bottom.

Your best bet will be to create a new line between </p> on line 62 and </div> on line 63.

Paste the Add to Cart form code there and you then should see the option show up on your home page :). The quantity box will be included as well, so you can edit/remove that portion as you see fit.

I hope this was helpful! If you need a hand with anything, let me know and I'll jump back in :).

Cynn | Guru @ Shopify

0 Likes
New Member
3 0 0

Hi Cynthia,

 

I'm using Shopify Classic Theme and I customize the theme General Setting and choose that on the Homepage, Section 2 will show Featured Products.

So it's show me on the homepage all the 6 products I have in my store but now I want that under each of the products I will have 'Add To Cart' Button in order to add the item to the cart even without get to the product page.

 

Can you please tell me how can I make it happen ?

0 Likes
New Member
5 0 0

Hi Cynthia,

I am building a theme from scratch. shop url : https://walid-is-simple.myshopify.com/
My add to cart button on home page gives the eroor "Parameter Missing or Invalid: Required parameter missing or invalid: id" . How can I overcome this.
The code I am using -

<form action="/cart/add" data-productid="{{product.id}}" method="post" class="product-form" id="AddToCartForm">
    <input type="submit" name="add" value="Add To Cart" class="btn btn btn-default" />
    &nbsp;&nbsp;or&nbsp;&nbsp;
    <a href="{{ product.url }}" class="btn btn-default" role="button">View</a>
</form>
0 Likes
Shopify Expert
2679 65 673

Hi Walid,

to add a product to cart your form must have two inputs with names "id" and "quantity", containing the variant id and number of products to add (quantity can be omitted though). Your code has none of them. Use the code from the above, or you can use links like here

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
1 Like
New Member
5 0 0

Hey Tim,
Followed you link,

<form action="https://walid-is-simple.myshopify.com/cart/add?id{{product.id}}" data-productid="{{product.id}}" method="post" class="product-form" id="AddToCartForm">

this does not work
 

<form action="/cart/add?id{{product.id}}" data-productid="{{product.id}}" method="post" class="product-form" id="AddToCartForm">

This does not work either.

0 Likes
New Member
5 0 0
<form class="product-form" action="/cart/add" data-productid="{{product.id}}"  method="post"> 
  <input type="hidden" name="id" data-productid="{{product.id}}" class="product-select" value="{{ product.variants[0].id }}" data-variant-title="{{ product.variants[0].title }}" />
  <input type="submit" value="Add To Cart" class="btn btn btn-default" />

</form>

This above snippet worked. Thanks anyway.

0 Likes
Shopify Partner
1 0 0

Thank you so much Cynthia this worked like a charm.

0 Likes
New Member
1 0 0

I have successfully added "add to cart" to my product homepage featured collection.

 

I am now trying to add "View Item" button to the left of the "Add To Cart" button on my homepage featured product collection.

 

Can someone please give me the code? Thanks!

0 Likes
Tourist
24 0 0

Hi Guys,

 

I am trying to manually do an add to cart for a single product on a page. I want to be able to manually edit the code to hard set the "add to cart" button to a specific product.

 

Basically its just a stand alone button and if clicked, the chosen product is added to the cart.

 

Any help would be appreciated.

0 Likes