Add a shopping cart to every page of your Ecommerce site

Add a shopping cart onto every page of your Ecommerce site and enhance your customer experience.

ecommerce
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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.

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?