# "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/astro/build/navbar  
Updated: 2026-10-21

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;
- the layout of the navbar. 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/astro/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/astro/build/predictive-search)) | a text `<input name="query">` and the results, in 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/astro/build/account)) | a `<form>` with a submit 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/astro/features/markets)) | a popover; its first button is the template of each country | nothing else |

A full example, with the search, the account and the cart:

```html
<header>
  <a href="/">Brand</a>
  <nav>
    <a href="/shop/">Shop</a>
    <a href="/about/">About</a>
    <a href="/contact/">Contact</a>
  </nav>
  <smootify-search>
    <form><input type="search" name="query"></form>
    <div popover="auto">
      <search-with-query>
        <search-result>
          <a search="url" href="#"><div search="title">Product name</div><div search="price">$0.00</div></a>
        </search-result>
        <search-empty><div>No products found</div></search-empty>
      </search-with-query>
    </div>
  </smootify-search>
  <div customer-condition="not-logged-in">
    <passwordless-login>
      <form><button type="submit">Log in</button></form>
      <div form-done hidden>Redirecting…</div>
      <div form-fail hidden>Something went wrong</div>
    </passwordless-login>
  </div>
  <a href="/account/" customer-condition="logged-in">Hi, <span customer="first-name">there</span></a>
  <smootify-cart data-open="on-add">
    <button type="button" data-action="open-cart"><span>Cart</span><span cart="count">0</span></button>
    <div popover="auto" id="cart-drawer">
      <form>
        <cart-item><div cart-item="title">Product</div></cart-item>
        <button type="submit">Check out</button>
      </form>
      <div form-done hidden>Your cart is empty</div>
      <div form-fail hidden>Something went wrong</div>
    </div>
  </smootify-cart>
</header>
```

The cart sits outside the menu panel that opens on small screens (a `[popover]` or a `<dialog>` with `data-overflow-body`), next to its button, so it stays visible on phones.

## 1. The cart and its count

Build the mini cart as in [Build the cart](https://www.smootify.io/docs/astro/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 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/astro/build/cart) works in a navbar. A `[popover]` and a `<dialog>` open above the whole page.
- **On small screens.** What sits inside the panel that holds the links on small screens collapses with them. To keep the cart visible on every screen size, put it outside that panel, 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 link.

## 2. Search

Add a `smootify-search` to the navbar for results that show as the visitor types. It holds a text input named `query` and the results, which open in a popover or show in place. 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/astro/build/predictive-search) for the parts and [`smootify-search`](https://www.smootify.io/docs/astro/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/astro/build/account). Without that set-up, the login does nothing.

- **Log in.** Add a `passwordless-login` element, with a `<form>` inside it. The form needs only a submit 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 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 `logout-form` element, with a `<form>` and a submit button inside it.
- **Show one or the other.** Wrap the login in an element with `customer-condition="not-logged-in"`.

```html
<div>
  <div customer-condition="not-logged-in">
    <passwordless-login>
      <form><button type="submit">Log in</button></form>
      <div form-done hidden>Redirecting…</div>
      <div form-fail hidden>Something went wrong</div>
    </passwordless-login>
  </div>
  <a href="/account/" customer-condition="logged-in">Hi, <span customer="first-name">there</span></a>
</div>
```

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/astro/reference/conditions/customer).

## 4. Country and currency

Add a `country-switcher` to the navbar. It is built on a popover: the first button or link inside it is the template of each country. In the trigger, `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.** On a site with `locales`, the language switcher is a `[locales]` element of real links, one for each page in the other language or market, built with `localeSwitcherLinks`. Each option goes to the same page in the other language, and the address changes too. Do not use `country-switcher` there: it changes the country without changing the page, so the page and the visitor’s choice would disagree.

See [Markets, currencies and languages](https://www.smootify.io/docs/astro/features/markets). To suggest the right country to a new visitor, see [Market suggestion](https://www.smootify.io/docs/astro/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 link instead of a `<button type="button">`. Use a button with `data-action="open-cart"` inside the same `smootify-cart`.
> - **The mini cart does not open after an add.** The page has a second `smootify-cart` with no popover, such as one used only for the count.
> - **The cart is missing on phones.** It is inside the panel that collapses on small screens.
> - **Log in does nothing.** Customer Accounts is not set up: see [Customer accounts](https://www.smootify.io/docs/astro/build/account).