Integrate a shopping basket into each page of your Ecommerce platform

The basket, also known as the shopping cart, enables online consumers to collect the products they desire to buy from your digital store in a single location. Incorporating a basket on every page of your platform enables consumers to swiftly see the quantity of products in the basket and the subtotal. With just a single click, consumers can access the basket to view its contents. Moreover, the basket allows users to proceed to the checkout after completing their shopping.

Regarding this instructional guide

1. Adding a basket anywhere
2. Incorporating a basket on every page

Prerequisites for this guide

• Symbols
• Navigation bar

Embedding a basket

You can include a basket component from the Addition panel or utilize Quick find (CMD/CTRL+E).

Find out more: Basket element

Including a shopping basket on every page

If you have a navigation bar saved as a symbol, you can integrate your basket into that navigation bar, and it will display on all your pages where you’ve previously added your navigation bar. Alternatively, you can craft a new symbol encompassing the basket and add it to your pages as you build them.

Integrating a basket into an existing symbol

Whether you’re commencing with a template or a designed site that already includes a navigation bar saved as a symbol, you can insert the basket directly inside the navigation bar, and your basket will show on all your pages.

Find out more: Symbols

Developing a new navigation bar symbol with a basket

Starting from scratch? Append a navigation bar to your page, add a basket in your navigation bar, and save the navigation bar as a symbol. Then, insert the symbol on each of your pages as you construct them.

Find out more: Navigation bar

You can customize the navigation bar and your basket anytime, and the modifications will apply to all pages. To gain more insights about styling elements in a symbol, refer to the guide on Symbols.

Saving the basket as a symbol

If you prefer not to include the basket in your navigation bar, you can store the basket itself as a symbol and embed it on any page you prefer. Choose the primary basket component, and press CMD/CTRL+Shift+A.