# Cart Icon

<figure><img src="/files/8eQ8FrYvUK8ebfWoHznC" alt=""><figcaption><p>Preview of cart icon in the navigation</p></figcaption></figure>

## There are 2 types of cart icon shortcodes so please read carefully.

1. [**Menu item shortcodes**](#menu-item-shortcode) - These live directly in your navigation along with your other menu items.
2. [**Standard Shortcode**](#standard-shortcode) - This is a standard shortcode that can be placed next to a menu item. This is great for those times when you have a hamburger menu on mobile and want your cart icon to live next to that.

## Menu Item Shortcode

Navigate to `Appearance` -> `Menus` in your WordPress admin area.&#x20;

In order to add the cart icon to your navigation create a custom link and add it to your navigation.&#x20;

For the URL you will add `#nc-cart-icon#` and the label can be anything you want. Note that the label will not show on your navigation just the cart icon.

<figure><img src="/files/j6pbCGKm6Ap3BLnshGjn" alt=""><figcaption><p>Adding cart icon</p></figcaption></figure>

You are also able to update the cart icon and the it's colors in the North Commerce General Settings

<figure><img src="/files/iVsrFYJdT77BJPb59qlO" alt=""><figcaption></figcaption></figure>

You are able to upload new icons, change the cart icon, counter text color and background color.

## Standard Shortcode

There is no special updates to this cart icon shortcode. Just add it anywhere you'd like

```
[nc-cart-icon]
```

Above is the shortcode that you will be able to add anywhere. In the future we will add a more robust customizable cart icon shortcode that will give you more freedom to add custom icons and colors.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.northcommerce.com/north-commerce/shortcodes/cart-icon.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
