---
title: How to install cart on your site
description: How to install cart to your website
---

[Skip to content](https://support.headq.io/knowledge-base/how-to-install-cart-on-your-site#main-content)

![HeadQ-Png-11](https://support.headq.io/hs-fs/hubfs/HeadQ-Png-11.png?width=100&height=30&name=HeadQ-Png-11.png)

Open main navigation

Close main navigation

 Hello. How can we help you?

- There are no suggestions because the search field is empty.

1. [Support](https://support.headq.io/knowledge-base?hsLang=en)
2. [Settings](https://support.headq.io/knowledge-base/settings?hsLang=en)

# How to install cart on your site

### Prerequisite:

Before you can install the cart, you have to install the HeadQ code snippet on your website. If you haven't done the snippet installation yet, please refer to [How to add code snippet via Google Tag Manager](https://support.headq.io/knowledge-base/how-to-add-code-snippet-via-google-tag-manager?hsLang=en) or [How to add code snippet to WordPress](https://support.headq.io/knowledge-base/how-to-add-code-snippet-to-wordpress?hsLang=en) articles.

### Installing cart

After installing the main snippet, the cart can be accessed on your site through a simple anchor link. To test whether it is functioning correctly, simply open your site in a web browser and append '#cart' to your URL. The cart should then open as expected.

As for implementation, we recommend including a cart icon within your site's navigation and linking it to #cart.

### **Showing cart item count in the cart icon**

You can also display the number of items in the cart directly in your cart icon (for example as a badge). This is done by listening to HeadQ cart-related events and updating your UI accordingly.

To achieve this, you’ll need to use custom event listeners.

With a custom event listener, you can:

- Detect when items are added or removed from the cart
- Read the current cart contents
- Update the cart icon counter dynamically

For a full list of available events and detailed implementation guidance, see this guide:  
👉 [Using HeadQ Events with Custom Event Listeners](https://support.headq.io/knowledge-base/using-headq-events-with-custom-event-listeners?hsLang=en)

- [Visual CPQ](https://support.headq.io/knowledge-base/visual-cpq?hsLang=en)
- [Storefront](https://support.headq.io/knowledge-base/storefront?hsLang=en)
- [Product Finder](https://support.headq.io/knowledge-base/product-finder?hsLang=en)
- [Frequently Asked Questions](https://support.headq.io/knowledge-base/frequently-asked-questions?hsLang=en#main-content)

    - [CPQ](https://support.headq.io/knowledge-base/frequently-asked-questions?hsLang=en#cpq)
- [Getting Started](https://support.headq.io/knowledge-base/getting-started?hsLang=en)
- [General](https://support.headq.io/knowledge-base/general?hsLang=en#main-content)

    - [product](https://support.headq.io/knowledge-base/general?hsLang=en#product)
    - [CPQ](https://support.headq.io/knowledge-base/general?hsLang=en#cpq)
- [Reports](https://support.headq.io/knowledge-base/reports?hsLang=en)
- [Integrations](https://support.headq.io/knowledge-base/integrations?hsLang=en#main-content)

    - [Signicat](https://support.headq.io/knowledge-base/integrations?hsLang=en#signicat)
    - [HubSpot](https://support.headq.io/knowledge-base/integrations?hsLang=en#hubspot)
    - [Stripe](https://support.headq.io/knowledge-base/integrations?hsLang=en#stripe)
    - [Salesforce](https://support.headq.io/knowledge-base/integrations?hsLang=en#salesforce)
- [Settings](https://support.headq.io/knowledge-base/settings?hsLang=en)
- [Distributors](https://support.headq.io/knowledge-base/distributors?hsLang=en)

## HeadQ / MVP Digital Oy

HeadQ Support

Copyright © 2025, HeadQ / MVP Digital Oy