---
description: Guide on how to use Cart Icon shortcode
---

# Cart Icon

When inserting the **Cart Icon** shortcode, an element with a predefined style will show.

![](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGrVuls325c3SaJgydi%2F-MGrWSJB8E6QcJOgMuxB%2Fcart-icon.jpg?alt=media\&token=554ae019-0247-467b-aaa4-93cee31a8149)

{% hint style="info" %}
The **Cart Icon** will be displayed only to **logged-in** users.
{% endhint %}



To use another icon, switch **Use different icon** switcher and settings fields will appear. Choose an icon from the **Icon Library** or **upload SVG**.

![](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGmsk7GBzKrxSWFCPSD%2Fnotification-icon.jpg?alt=media\&token=475381da-839f-484e-afb0-861b3ed9eace)

If you leave the **default** icon, the tab **Icon Style** will look different then if you choose to use a **different** icon.

**Default Icon**

![](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGmyOMy25_8Kn0cTVpZ%2Fnotification-icon-default-style.jpg?alt=media\&token=96dc482c-acba-4412-874c-8b76f3905ee2)

![Icon Style tab, Active section for the default icon](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGn00BrWH-9nkgJSoh8%2Factive-notification-icon-default.jpg?alt=media\&token=b2dd3e3d-9317-4033-a1d6-40b21353dade)

![Icon Style tab, On hover section for the default icon](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGn0mRadyHCuzc5A42b%2Fhover-notification-icon-default.jpg?alt=media\&token=1c50ef07-c11f-4598-8a82-5b4a32c1feb3)

**Uploaded icon**

![Icon Style tab for the uploaded icon](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGn3fi-zg0-Nlpkr72L%2Fuploaded-notification-icon.jpg?alt=media\&token=5d3620c0-62cd-4605-bb3c-54d67bb91c5e)

**Uploaded SVG**

![Icon Style tab for the uploaded SVG](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGn4XSvffVISjIJglpC%2Fuploaded-svg-notification-icon.jpg?alt=media\&token=253dfd7d-0b7e-4332-b289-66a97ed58e17)

**Badge Style -** these are style settings for the **Badge** that will appear if there is any product in the cart.

![](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGrNWVCOWCaaIrwCCpK%2F-MGrORVQY-GzAT1LdsH4%2Fcart-icon-badge.jpg?alt=media\&token=1ea81846-281e-4f1a-9139-99e4049ef988)

Settings for the **Badge** **on hover**

![](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGrNWVCOWCaaIrwCCpK%2F-MGrPR29ZHHnaC-0WuyG%2Fcart-badge-hover.jpg?alt=media\&token=af619c9e-8114-4a70-9f4a-22b336b73990)
