"Navbar: cart, search and account"

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:

A full example on Webflow’s Navbar element, with the search, the account and the cart:

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, 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 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 for the parts and smootify-search for every attribute.

3. Login and account

Login works with Shopify’s Customer Accounts, set up as in Customer accounts. 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".

What the visitor sees, from the page load to the login:

Every value is in customer conditions.

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. To suggest the right country to a new visitor, see Market suggestion.

Before you publish