Add a shopping cart to every page of your Ecommerce site

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

• Symbols
• Navbar

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.