Add shopping cart to navbar

[Lolo1 (Lauren Oyster)]

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

[imtiazraqib]

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

How to Enable a Webflow Share Link

If you’re new to the Webflow forum, welcome! Anyone with the read-only link of your project can explore your project in the Designer. Any changes they make while in read-only mode will not be saved. This is helpful when you need design advice or when you need help troubleshooting an issue in your project. [Create and use a read-only share link — Webflow tutorial]

[Lolo1 (Lauren Oyster)]

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

[Andrew_Bass (Flow Phantom)]

Hey @Lolo1 ,

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 customizing the cart button.

Let me know if you need any more help!

[Lolo1 (Lauren Oyster)]

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.”

[imtiazraqib]

@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

[Andrew_Bass (Flow Phantom)]

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

[Lolo1 (Lauren Oyster)]

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

[Lolo1 (Lauren Oyster)]

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.

[imtiazraqib]

@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

[Andrew_Bass (Flow Phantom)]

Hey @Lolo1 !

I’m sorry but I’m a little confused 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 Webflow publishing.

Hopefully that helps!

[Lolo1 (Lauren Oyster)]

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

[Lolo1 (Lauren Oyster)]

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 (Lauren Oyster)]

[imtiazraqib]

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

Getting button to link to product category

If the element or link you want to create is not within a collection list, you do it manually. Note the full collection path and slug and then set the target to an external relative link like /collection-name/collection-item-slug , that will work when the site is published.

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!