less than a minute read • Updated 9 minutes ago
Set up a mini-cart
How to add a persistent mini-cart to your site that shows the current cart item count and total.
A mini-cart is a persistent element on your site that displays the current cart item count and order total, updating automatically as customers add products. It gives customers a quick view of their cart without opening the full sidecart.
How to set it up
Add the following HTML to your site where you want the mini-cart to appear:
<p data-fc-id="minicart" style="display:none;">
<a href="https://YOURSTORE.foxycart.com/cart?cart=view">
<span data-fc-id="minicart-quantity">0</span>
<span data-fc-id="minicart-singular"> item </span>
<span data-fc-id="minicart-plural"> items </span>
in cart. Total cost: $<span data-fc-id="minicart-order-total">0</span>
</a>
</p>
Foxy’s JavaScript will automatically update the values and show or hide the element based on cart state.
Data attributes
Attribute | Description |
|---|---|
| The container element. Shown when the cart has items, hidden when empty. |
| Shown when the cart is empty, hidden when it has items. |
| Replaced with the current item count. |
| Replaced with the current order total. |
| Shown when there is exactly one item in the cart. |
| Shown when there are zero or more than one items in the cart. |
Notes
The mini-cart relies on Foxy’s JavaScript being loaded on your page.
The
style="display:none;"on the container is intentional — Foxy’s JavaScript controls visibility based on cart state.You can place any HTML elements inside the mini-cart container and use the data attributes to drive their content and visibility.
For more advanced cart interactions via JSON, see Use the cart JSON output.