The Cart element shows a shopping cart icon with the number of items in the cart. Visitors see at a glance that their product was added, and one click takes them to the cart to check out. It belongs in the header of every webshop.
Before you start
The Cart element is a webshop element. It appears in the Elements panel when the webshop is turned on for your project. See Getting started with ecommerce.
Add the cart icon
- Open your header, for example the header reusable template of your layout.
- Click Elements in the left sidebar.
- Drag Cart into the header, usually on the right next to the menu.
Because the header is shared, the cart icon now shows on every page that uses it. See Reusable templates.
Which page it opens
A click on the icon opens the shopping cart page set in your webshop settings, or /cart when none is set. Make sure that page exists and is active.
Complete your header
- Customer account element: login and account menu for customers.
- Search element: a product search field. See Site search on published websites.
Test it
- Publish your website.
- Add a product to the cart on the live site.
- Check that the count goes up and that a click opens the cart.
Tip: on phones, keep the cart icon visible next to the hamburger menu. Visitors look for it in the top right corner.
Frequently asked questions
The cart count does not change
Check on the live site, not in the editor, after you publish. The count shows the items in the visitor's own cart.
I do not see the Cart element
The webshop is not turned on for this project. Turn it on and the webshop elements appear.