Add a shopping cart onto every page of your Ecommerce site

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!

The cart, or shopping cart, allows online shoppers to store the items they want to purchase from your online store in a single location. Adding a cart on every page of your site allows shoppers to quickly view how many items they have in the cart and the subtotal of the cart. With a single click shoppers can open the cart to view the content. The cart also allows users to continue to checkout once they’ve finished shopping.

In this lesson
  1. Adding a cart anywhere
  2. Adding a cart on every page
Lesson prerequisites

Adding a cart

You can add a cart component from the Add panel or using Quick find (CMD/CTRL+E).

Learn more: Cart element

Adding a cart on every page

If you have a navbar saved as a symbol, you can add your cart to that Navbar, and it will appear on all your pages where you’ve already added your navbar. Alternatively, you can create a new symbol containing the cart and add it to your pages as you create them.

Adding a cart to an existing symbol

Whether you’re starting with a template or a designed site that already has a navbar that is saved as a symbol, you can add the cart right inside the navbar and your cart will appear on all your pages.

Learn more: Symbols

Creating a new navbar symbol with a cart

Starting from scratch? Add a navbar onto your page, add a cart in your navbar, and save the navbar as a symbol. Then add the symbol on each of your pages as you create them.

Learn more: Navbar

You can style the navbar and your cart anytime and the changes will reflect on all pages. To learn more about styling elements in a symbol, check out the guide on Symbols.

Saving the cart as a symbol

What if you don’t want to add the cart to your navbar? You can save the cart itself as a symbol and add it onto any page you want. Select the main cart component, and press CMD/CTRL+Shift+A.