Shopify Cart API: Complete Guide with Examples in 2025
Introduction
Shopify’s checkout flow is powerful — but when it comes to customizing the cart experience, you need more than the default settings.
That’s where the Shopify Cart API comes in.
Whether you want to build a custom AJAX cart, capture extra cart attributes, or manipulate the cart object dynamically — the Cart API is your best friend.
In this guide, you’ll learn:
- What the Shopify Cart API is
- How to use it to improve UX
- Real-world examples using AJAX cart, cart attributes, and more
- How to implement a sticky add to cart button
Let’s dive deep into the cart object, master every endpoint, and boost your conversions with smarter cart functionality.
Table of Contents
What is the Shopify Cart API?
The Shopify Cart API allows you to view, modify, and interact with the cart programmatically using JavaScript (AJAX). It provides endpoints for:
- Adding/removing items
- Updating quantities
- Viewing cart contents
- Working with custom attributes
Unlike the Shopify Storefront API (used for headless setups), the Cart API is designed for online store themes (Liquid-based).
Understanding the Cart Object in Shopify
The cart object in Shopify is a global object that holds the current customer’s cart data.
You can access it using:
liquid
CopyEdit
{{ cart }}Key Properties:
| Property | Description |
| cart.items | Array of line items |
| cart.total_price | Total cart price in cents |
| cart.attributes | Custom fields (e.g., gift message) |
| cart.item_count | Number of items |
| cart.currency | Store currency |
You can use this object to display cart details or pass data into JavaScript for more advanced manipulation.
How to Use Shopify AJAX Cart API
The AJAX Cart API allows you to manipulate the cart without reloading the page — which is key to a smooth, modern user experience.
Common AJAX Cart Endpoints
Add Product to Cart
js
CopyEdit
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
id: variantId, // Replace with actual variant ID
quantity: 1
})
})
.then(res => res.json())
.then(data => console.log(data));Get Cart Details
js
CopyEdit
fetch('/cart.js')
.then(res => res.json())
.then(data => console.log(data));Update Item Quantity
js
CopyEdit
fetch('/cart/change.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
id: lineItemKey,
quantity: 2
})
});Clear Cart
js
CopyEdit
fetch('/cart/clear.js', {
method: 'POST'
});Cart Attributes Shopify: How to Add Custom Fields
Want to collect special instructions, gift messages, or delivery dates?
You can use cart attributes.
Example: Add Delivery Note
- In your cart.liquid or cart-template.liquid, add:
html
CopyEdit
<label for="delivery_note">Delivery Note:</label>
<input type="text" name="attributes[Delivery Note]" id="delivery_note" />- On submission, this data will be stored in:
liquid
CopyEdit
{{ cart.attributes["Delivery Note"] }}These are not shown to customers in confirmation pages but appear in the admin order view.
Shopify Sticky Add to Cart Button
A Sticky Add to Cart makes it easier for customers to take action without scrolling, especially on mobile.
Here’s how to implement it:
Method 1: Use Shopify Theme Settings (if supported)
Some themes like Dawn already include this. Go to:
Online Store → Customize → Product Page → Enable Sticky Add to Cart
Method 2: Add Custom Code
- Open product.liquid or main-product.liquid
- Add this HTML block at the bottom:
html
CopyEdit
<div class="sticky-cart">
<button id="sticky-add-to-cart">Add to Cart</button>
</div>- Style it in theme.css:
css
CopyEdit
.sticky-cart {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
padding: 10px;
box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
z-index: 999;
}- Add JavaScript to trigger cart API when clicked.
This improves mobile usability and boosts conversion rate.
Real-World Use Cases for Shopify Cart API
| Use Case | Solution |
| Custom gift messages | Use cart.attributes |
| Quick add to cart on collections | Use AJAX /cart/add.js |
| Update quantity without reload | Use /cart/change.js |
| Mini cart preview | Use /cart.js to get cart JSON |
| Sticky cart button | Use JS + CSS |
Why the Cart API Matters for Conversion Rate Optimization
A better cart = more conversions.
Using the Cart API, you can:
- Reduce friction by skipping full page reloads
- Add upsells dynamically (e.g., “Add Gift Wrap”)
- Track cart events for analytics
- Recover abandoned carts more effectively
- Implement multi-language/multi-currency logic
Shopify Cart API Limitations
| Limitation | Details |
| No multi-currency API support | Use Shopify Markets |
| Can’t modify checkout page directly | Only through cart |
| Not available on headless storefronts | Use Storefront API instead |
| Requires JS knowledge | Not beginner-friendly without dev help |
Frequently Asked Questions (FAQ)
What is the difference between Shopify Cart API and Storefront API?
The Cart API works for theme-based stores. Storefront API is used for headless setups via GraphQL.
Can I add custom input fields to Shopify cart?
Yes, use cart.attributes with form fields in the cart page template.
How do I create an AJAX cart in Shopify?
Use endpoints like /cart.js, /cart/add.js, and /cart/change.js with JavaScript fetch() API to add/remove/update cart items without reloading.
Can I build a sticky cart in Shopify?
Yes. You can use theme settings or custom HTML/CSS/JS to create a sticky add to cart button that boosts mobile UX.
Is the Shopify Cart API available on all plans?
Yes, the Cart API is available on all Shopify plans, but advanced features may need theme editing access or apps.
Final Thoughts
Mastering the Shopify Cart API opens the door to a more dynamic, conversion-optimized cart experience. From creating a slick AJAX cart to customizing cart attributes and even implementing a sticky add to cart, the possibilities are endless.
You don’t need Shopify Plus to offer a premium shopping experience — you just need to understand the tools available.
Ready to build a smarter cart? Use the examples and techniques in this guide to get started.
