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 or How to add code snippet to WordPress 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