# "Navbar: cart, search and account"
> Where the store parts go in a navbar - the cart and its count, the search, the login and account links, and the country switcher - and what each one must be inside.
Status: Ready (Smootify 2.0)
URL: https://www.smootify.io/docs/build/navbar
Updated: 2026-10-01
A store’s navbar usually holds the cart, the search, the login and the country switcher, on every page. This page says where each part goes and what it must be inside. Each part has its own guide for the details.
## How it fits together
What Smootify needs:
- the cart count and the button that opens the cart inside the same `smootify-cart` as the mini cart;
- each other part as its own element: `smootify-search`, `passwordless-login`, `country-switcher`. None of them needs to be inside another.
What is up to you:
- which parts the navbar has, their order and their design;
- whether it is a Webflow Navbar or your own layout. Put it in a component, so it is the same on every page.
Each part, and what it holds:
| Part | Holds | Needs |
|---|---|---|
| `smootify-cart` (the cart and its count, see [Build the cart](https://www.smootify.io/docs/build/cart)) | the count, the open button and the mini cart panel, all in the same `smootify-cart` | nothing else |
| `smootify-search` (search, see [Predictive search](https://www.smootify.io/docs/build/predictive-search)) | a Text field named `query` and the results, in a Webflow Dropdown or a popover | the Lite or Server plan, or the Predictive search add-on |
| `passwordless-login` (login and account, see [Customer accounts](https://www.smootify.io/docs/build/account)) | a Form Block with a Form Button; next to it, `logout-form` and an account link | customer accounts set up in Shopify |
| `country-switcher` (country and currency, see [Markets](https://www.smootify.io/docs/features/markets)) | a Webflow Dropdown or a popover; its first link is the template of each country | nothing else |
A full example on Webflow’s Navbar element, with the search, the account and the cart:
```html
```
The search, the account and the cart sit outside the Nav Menu, next to the Menu Button, so they stay visible on phones.
## 1. The cart and its count
Build the mini cart as in [Build the cart](https://www.smootify.io/docs/build/cart), and put its `smootify-cart` in the navbar.
- **One cart holds everything.** `cart="count"` works only inside `smootify-cart`, and an open button opens only the cart it is inside. Put the cart icon, the count, the open button and the panel in the same `smootify-cart`.
- **Don’t add a second cart for the count.** A `smootify-cart` with no Dropdown and no popover inside it counts as a cart page, and turns off `data-open` on the mini cart.
- **Which way to open it.** Any of the ways in [Build the cart](https://www.smootify.io/docs/build/cart) works in a navbar. A dialog and a popover open above the whole page. A Dropdown opens under its toggle.
- **On small screens.** In a Webflow Navbar, what is inside the Nav Menu goes into the collapsed menu with the links. To keep the cart visible on every screen size, put it outside the Nav Menu, as above.
- **On the cart page.** The page’s own cart turns off `data-open`, so the mini cart stays closed when a product is added there.
A link to your cart page is a normal Webflow link.
## 2. Search
Add a `smootify-search` to the navbar for results that show as the visitor types. It holds a Text field named `query` and the results, which can open in a Webflow Dropdown or a popover. It needs the Lite or Server plan, or the Predictive Search add-on turned on in the Smootify dashboard.
See [Predictive search](https://www.smootify.io/docs/build/predictive-search) for the parts and [`smootify-search`](https://www.smootify.io/docs/reference/elements/smootify-search) for every attribute.
## 3. Login and account
Login works with Shopify’s Customer Accounts, set up as in [Customer accounts](https://www.smootify.io/docs/build/account). Without that set-up, the login does nothing.
- **Log in.** Add a Custom element with the tag `passwordless-login`, with a Form Block inside it. The Form needs only a Form Button, such as “Log in”. A click takes the visitor to Shopify’s login page, then back to the site, logged in.
- **Account link.** A Text link to your account page with `customer-condition="logged-in"` shows only to logged-in visitors. `customer="first-name"` inside it shows their first name.
- **Log out.** Add a Custom element with the tag `logout-form`, with a Form Block and a Form Button inside it.
- **Show one or the other.** Wrap the login in an element with `customer-condition="not-logged-in"`.
```html
```
What the visitor sees, from the page load to the login:
- **While Smootify checks** whether the visitor is logged in: the elements with `customer-condition` show as a placeholder shimmer.
- **Logged out**: the elements with `customer-condition="not-logged-in"` show, such as the login; those with `customer-condition="logged-in"` are taken out of the page until the login.
- **Logged in**: the elements with `customer-condition="logged-in"` show, such as an account link with `customer="first-name"`; those with `customer-condition="not-logged-in"` are hidden.
Every value is in [customer conditions](https://www.smootify.io/docs/reference/conditions/customer).
## 4. Country and currency
Add a `country-switcher` to the navbar. It is built on a Webflow Dropdown or a popover: the first link inside it is the template of each country. In the toggle, `data-prop="flag"`, `data-prop="name"` and `data-prop="currency-iso-code"` show the current country and currency. A pick changes the country, and prices follow.
**Languages with Webflow Localization.** If your site uses Webflow Localization, the language changes with Webflow’s own locale switcher: put it next to the country switcher. When a visitor picks a country whose code matches one of your locales, such as Italy and an Italian locale, the country switcher opens that locale’s page for them, so the address changes too.
See [Markets, currencies and languages](https://www.smootify.io/docs/features/markets). To suggest the right country to a new visitor, see [Market suggestion](https://www.smootify.io/docs/features/market-suggestion).
## Before you publish
> [!STUCK]
> - **The count stays at 0.** `cart="count"` is outside `smootify-cart`.
> - **The cart button does nothing.** It is outside the `smootify-cart` that holds the panel, or it is a Webflow Button, which is a link. Use a Custom element with the tag `button` inside the same `smootify-cart`.
> - **The mini cart does not open after an add.** The page has a second `smootify-cart` with no Dropdown and no popover, such as one used only for the count.
> - **The cart is missing on phones.** It is inside the Nav Menu, which collapses into the menu button.
> - **Log in does nothing.** Customer Accounts is not set up: see [Customer accounts](https://www.smootify.io/docs/build/account).