Adding marketplace-level carts to product pages

You've created a marketplace with buyer-facing pages that include product descriptions and a Buy Now button that redirects users to a merchant's online store for checkout. However, if buyers see something they want, they need to leave the marketplace to purchase the product individually. You want to remove that friction and enable buyers to select items for purchase while continuing to browse the marketplace.

In this tutorial, you'll start adding cart functionality that supports storing items from different shops. You'll add an ADD TO CART button to product description pages. You'll also create an icon for a marketplace-level cart with a badge showing the total number of items in the cart. You'll build a multi-merchant cart page in a subsequent tutorial.

A gif showing the cart counter badge incrementing when the add to cart button is clicked on the product page