Cart & Mini Cart

In this video, we're going to go over how to add the cart page and your mini-cart to a top-level navigation. We'll get everything working with just a few clicks and linked up with your Shopify data and checkout process. It's pretty straightforward.

Let's start with the mini-cart. We need to create a navigation. I'll use one of Webflow's standard navigations. Grab it and drop it here. Let's modify it a bit. For now, this is fine.

I'm going to get rid of this section. Now, for the mini-cart, open the Smootify app if you haven't already. Search for it and install it. Launch the app, go to components, type 'mini,' and there it is. Copy it, go to the header, the place where you want it, and paste it.

That's the first part done. Let's publish it and test it. Go to a product page, and you'll see your cart. Add a product, and it will update the cart. Everything is working as it should. You can customize it as much as you want from a look and feel perspective.

One thing to note about the mini-cart is that by default, when you click 'Add to Cart,' it automatically opens the mini-cart. If you don't want that, go back to Webflow, find the Smootify cart, click on it, go to settings, and in the attributes, you'll see data-open=add-on. Delete that, publish again, and refresh the page. Now, when you add something to the cart, it won't open automatically.

To make it open again, simply add the custom attribute back. Go back to Webflow, find the Smootify cart, find the custom attribute, and go to the Smooy documentation. In the Webflow project dropdown, you'll see a section called 'Cart.' Click on it, and at the bottom, you'll find the custom attribute. Copy the first one, go back to Webflow, open the custom attribute, paste the first one, and then do the same for the value. Publish it, and when you refresh your project, adding a product to the cart will open the mini-cart again.

Now, let's create the standalone cart page. I'll duplicate this page to make things easier and get rid of this section. I'll copy this content, create a new page called 'Cart,' and paste the content there.

The rest is pretty much the same. Find the cart element, copy it, go to your hierarchy, paste it, and you're good to go. Everything else will come in as needed. Configure and style it to your taste.

If I publish this now, let's go to the cart page. Here it is, and it's all working.

One thing to note about the mini-cart is that the 'View Cart' link might not go to the correct page. We need to link it to the '/cart' page. Go to the mini-cart, find the form block, and look for 'to-cart.' In the link settings, scroll down, and you'll see a component section. If you're using the Smootify template, you'll see this. Select the actual cart page, the one you created.

Publish it, go back, refresh, and now the 'View Cart' button will take you to the correct page.

That's it! It's not complicated, and it's easy to get up and running with.