Build a Shopify Ajax-cart without JavaScript coding :fire:

 !Shopify OS 2.0 !Price — GitHub star

Ajaxifies Shopify cart sections and product forms.

Doesn't apply CSS styles — the appearance is up to a developer.

No JavaScript code needed — just plain Liquid.

!Liquid Ajax Cart Video

3-Step installation

##### 1. Create a theme section for the cart with a data-ajax-cart-section container

``html
{% comment %} sections/my-cart.liquid {% endcomment %}

Cart

{% for item in cart.items %}
{% assign item_index = forloop.index %}

---

{{ item.title }}

Price: {{ item.final_price | money }}

Quantity:




href="{{ routes.cart_change_url }}?line={{ item_index }}&quantity={{ item.quantity | minus: 1 }}" >
Minus one






href="{{ routes.cart_change_url }}?line={{ item_index }}&quantity={{ item.quantity | plus: 1 }}">
Plus one

Total: {{ item.final_line_price | money }}

{% endfor %}

Checkout — {{ cart.total_price | money_with_currency }}

{% schema %} { "name": "My Cart" } {% endschema %}
`

##### 2. Include the section and the liquid-ajax-cart.js in your theme.liquid
`html
{% comment %}
Put this code within tag —
in a place where you want the ajax-cart section to appear
{% endcomment %}

{% section 'my-cart' %}



`

##### 3. Wrap Shopify product forms in the custom tag
`html

{% form 'product', product %}

{% endform %}

`

:tada: That's it!

Download the latest version of the liquid-ajax-cart.js from the documentation website.

The repository content

* docs folder — the documentation website;
* _src folder — the library sources;
* assets, config, layout, locales, sections, snippets, templates folders — the demo store theme sources. The password of the store — liquid-ajax-cart`.