Add shopping cart to navbar

How do I add the shopping cart to the NaviBar which is also set as a symbol?

Hey @Lolo1, could please provide a read-only link for your site?

Thank you. I am very new to this. Here is the link https://preview.webflow.com/preview/laurens-stunning-project-v4?utm_medium=preview_link&utm_source=dashboard&utm_content=laurens-stunning-project-v4&preview=2b4e251d316ba79d21e75d22fb656fc7&workflow=preview

Hey @Lolo1 :wave:,

It looks like you already have your nav bar as a symbol, so now it’s just a matter of adding a “cart” element to your nav bar and styling it. Here’s where your “cart” element is:

(Also remember to edit a symbol you will have to double click it.)

And here is a resource for how to customize your cart :point_right:customizing the cart button.

Let me know if you need any more help!

1 Like

I’ll try that again,

Another question, please.
I have crease a Products Template but I don’t see this page active when I go to site preview. How can I make this page available for use instead of it in “template mode.”

@Andrew_Bass is on point. I made a quick video tutorial for you to follow incase you need it.

Webflow - Add Shopping Cart to Navbar Component - Watch Video

1 Like

I’m seeing the products template page in preview mode (see below). I circled, in red, the “Products Template” page and the preview mode.

The video is very helpful but when i try to push the cart into the navbar this is what I get

I dont have it in preview mode now. Maybe I did earlier but not now. Either way, I still don’t see a way to use the template on my website as an active page.

@Lolo1, if you notice in the video, the cart cannot be added to the Nav Menu div block. Add it to the Container, so it is a sibling with the Nav Menu Div Block

Hey @Lolo1 !

I’m sorry but I’m a little confused :thinking: when you say:

Either way, I still don’t see a way to use the template on my website as an active page.

When you say “active page” are you saying it is not showing up when you publish?

If it helps preview mode is accessed by pushing the “eye” icon on the top. (I circled it in my previous photo). Preview mode is a feature that allows you to see how your site would be displayed in the browser without needing to Publish or leave the Designer.

As opposed to Publishing which puts your Webflow site on your domain (if you have set up your custom domain) or your webflow.io domain. Here is a resource on publishing :point_right: Webflow publishing.

Hopefully that helps!

Fixed it! I had the container configured incorrectly. Thanks!

1 Like

Thank you for your response. See screenshot. Why isn’t the Product Template showing as an option when i try to link the button to the product template. It’s not showing as an option.

@Lolo1, unfortunately e-commerce pages have to be linked as an external URL utilizing the collection name and the slug as per this post:

In your case, since FarmBar and BinBar are products, the slug you would need to use is /product/product-name, in your case, /product/binbar or /product/farmbar.

The slug for your products are found here:

And this is how you would link it to your button:

Unfortunately, there is no way to test this link in preview mode, so you would have to publish the site, at least to the staging site to view the functionality of the link.

Hope this helps!

1 Like