Add to cart button on collections page without going to cart page.

Highlighted
Tourist
7 0 1

I am using Venture Theme, which I assume uses ajax already as you can add products to the cart within the product template page without moving to the cart page, and would like the same thing to happen on the collections page.

        <div class="quick-add">
          <form method="post" action="/cart/add"  enctype="multipart/form-data" class="product-form" id="AddToCartForm">
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            <!-- <input type="hidden" name="return_to" value="back" /> -->
              {% unless product.variants.first.available %}
                <button type="submit" name="add" id="AddToCart-{{ product.variants.first.id }}" class="btn btn--full product-form__cart-submit btn--sold-out" disabled="disabled">
                  <span id="AddToCartText-{{ section.id }}">
                    {{ 'products.product.sold_out' | t }}
                  </span>  
                </button>  
              {% else %}
                <button type="submit" name="add" id="AddToCart-{{ product.variants.first.id }}" class="btn btn--full product-form__cart-submit">
                  <span  id="AddToCartText-{{ section.id }}">
                    {{ 'products.product.add_to_cart' | t }}
                  </span>  
                </button>  
              {% endunless %}
          </form>              
        </div>

I currently have the code for the buttons working fine, although the div is hidden at them moment, until I can fix this issue. You can view my store here (https://www.truebites.co.uk/collections/beef-and-steak) if it helps.

I am looking to have the add to cart buttons function as they do in the product template pages, i.e. a message appears in the notification bar and the user stays exactly where they are on the current page. If this possible? 

Thanks,

Matt

 

 

0 Likes
Highlighted

Hi Matty,

Yes, it is possible to have the Add to cart buttons function on the Collection page. But this work is not easy (not only to copy-paste some code).

I see a few variants how you can realize it:

  1. Hire a Shopify expert;
  2. Install some Quick view app;
  3. Buy a theme with Quick view function (in this case you need to update design too).

Best,
Arthur

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
0 Likes
Highlighted
Tourist
34 0 5

@Matty3  May I ask what solution you found in the end?

0 Likes