Please note, this post has not been updated and may contain broken links or outdated information.

The purpose of this mod is to make adding Ajax 'Add To Cart' buttons super easy.

Features:

  • Turn any form with action=/cart/add into an Ajax action
  • Multiple 'Add To Cart' buttons on one page

The base theme I am modifying for this is the free Solo theme. The walk-through should be enough to help you apply to any theme with little changes. We will start by 'Ajaxifying' the default 'Buy This' form that is on the product.liquid template. The second part will deal with adding an 'Add To Cart' wherever you have a product.

Begin

(The contents of those files will be the subject of a later post, but you can read the source, it’s commented.)

Edit layout/theme.liquid

At the bottom of your layout/theme.liquid add the two scripts you just uploaded to your assets folder:

 {{ 'api.jquery.js' | asset_url | script_tag }} {{ 'ajaxify-shop.js' | asset_url | script_tag }} 

Next, we prepare the template so we can update the number of items in the cart after an item has been added. Wrap this:

{{ cart.item_count }} {{ cart.item_count | pluralize: "Item", "Items" }}

  like so:

  {{ cart.item_count }}  {{ cart.item_count | pluralize: "Item", "Items" }} 

You can surround the above fragment with any markup you want. The important part being class="cart-total-items". Any element with this class will have its HTML updated when something is added to the cart. This will update the span with the number of items in the cart, as well as word Item/Items. The HTML that will be dropped into this element will be like:

5 Items 1 Item 0 Items

You can see the end result of these modifications in my theme.liquid

Edit assets/theme.css.liquid

When the 'Add To Cart' button is clicked, we disable the button, and add the class of 'disabled', so you can style the button when it’s inactive. So, open assets/theme.css.liquid and add this:

/* Disabled input */ input.disabled { opacity: .5; } 

This will make the button get lighter. You can, of course, style however you like. You can view my theme.css.liquid. At this point, if you visit a product page and click on 'Buy This', you should have it all be goodness. But wait! there’s more…

Adding an 'Add To Cart' everywhere

Now, we make it easy to place an 'Add To Cart' button for a bunch of items on a page. For this example, we will place an 'Add To Cart' button on every item on our collections page. You can see it in action on my collection page. Only one 'Add To Cart' form to use everywhere. So a simple form is created as a snippet.

  • upload snippets/add-to-cart.liquid to your snippets. It includes a variants drop-down which will show up if you have more than 1 variant. You can easily comment that out (it’s clearly marked) and it will default to the first variant. You can style the form however you like. The submit button can be type=image if desired, and everything should keep working fine.
  • edit templates/collection.liquid. Right before the closing
  • on line 19 add
    {% include "add-to-cart" %}

I should point out that add-to-cart.liquid is just a regular add product form. Any valid change you could make to an add product form, you can just drop in here. If you look at the history of add-to-cart.liquid, you’ll see this is exactly what I did with the variants drop-down. It’s pretty much a copy-paste of the code from the default product page. And you’re done. As you may have guessed by now, you can view this theme in its entirety on github

Design & Code