Effective navigation in your Ecwid store

Effective website navigation is the ability to make the shopping process convertible. Customers expect online stores to be user-friendly and products and categories — easily searchable.

With Ecwid, you can customize your store to make the shopping process effortless for buyers. In this guide, you will find the description of every essential UX element and how to make the most of it for your business. Check out if you use your Ecwid store to its full potential to attract customers.

Introduce your store in the site menu
Help customers find products with categories menu
Highlight categories with banners
Make search bar prominent
Add filters for a large catalog
Make it easier to browse products
Guide your customers with breadcrumbs
Offer more with the Continue shopping button
Upsell with related products
Redirect customers after they place an order

Introduce your store in the site menu

When customers visit your store for the first time, they want immediate answers about who you are, what you offer, and why they should buy from you. You can make it easier for them to quickly find the answers by showing the links to different sections of your site in the header site menu.

Add links to the About us and Contacts sections so your visitors can learn more about you. Add a link to the Store section so customers can start shopping right away. Add the Testimonials section and link it in the navbar so buyers can read about other’s experiences with your store and make sure they can trust you.

You can also add the My account link for customers. With this link, shoppers can log in to their accounts and check out their recent orders, favourite products, specify the VAT ID, get access to their special member discounts, and view or download invoices.

Change store has 8 different sections, including FAQ and Events. They place links to each block in the header navbar to simplify the navigation

To customize the navigation bar:

Ecwid Instant Site allows you to build a website by adding and editing blocks. Each block can be dedicated to different things like your brand story, special offers announcements, delivery information, and so on. You can add as many blocks as you want and add links to each block to the navigation menu to make it easier for customers to navigate.

To edit the navigation menu on your Ecwid Instant Site:

From your Ecwid admin, go to Website and click Edit Site.
In the Site blocks menu on the left, click Header → Navigation Menu and click + Add Menu.
Fill in the name for this link that will appear in the header of your site. For example, About Us.
Click the Action on click drop-down and select an action to perform when a customer click on the link. In our example it will be scrolling to the About Us block.
When you are done, click Save and Publish.
To add more items in menu, click Back and then + Add Menu Item and repeat the steps above.
Click Back to go to the Navigation menu and see the list of all the links in the header. You can rearrange the menu items order by dragging them the way you want.
Every change you make is saved automatically but will not be published until you click the Save and Publish button. If you are not satisfied with the results, you can always go back to the previously saved version of your website by clicking Undo on top of the editor.

You can add your Ecwid store to any website builders or custom-built websites where you can change the site menu yourself. You can watch tutorials to understand better how your sitebuilder works. Here are examples of how you can edit navigation menus on WordPress and Wix.

For Wordpress users

In your WordPress dashboard, go to Appearance → Menus.
You can create a new menu or edit the existing one. If you create a new menu, you can choose the location for the menu, for example, Desktop Horizontal Menu. You can also choose what site pages or categories to display by ticking checkboxes for each page or category.
In the Add menu items, you can add links that will appear in the header of your website.
In the Menu structure, you can change the order of the links by dragging the link.
Once you are done editing, click Save Menu.

Learn more about creating and editing menus in the WordPress Help Center.

For Wix users

Before you start creating a navbar, make sure you add pages to your Wix site.
In your Wix dashboard, click the +Add button in the left menu, then Menu.
You will see a list of pre-designed menus, including horizontal and vertical menus. Simply drag and drop the menu you like to the editor. Menu titles will correlate with your pages’ names.
To edit a menu, click on it, select Design → Customize Design. Customize the menu the way you want.
Click Preview in the top right to see the result.
Click Publish to publish changes.

Learn more about adding a site menu in the Wix Help Center.

Help customers find products with categories menu

Once a customer has scrolled your site and read about who you are and the products you sell, they probably want to check out your catalog. The best way to guide shoppers through your store and help them find products that fit their needs is to create categories and list them in the categories menu.

Categories are groups of products that you bundle to show on the same page in your store — for example, Skincare products, Kids’ fashion, Bestsellers. You can create subcategories inside each category. The main category is called the root category, and categories of the second, third, etc. level called subcategories. For example, the Kids’ fashion category can have Boys and Girls subcategories, and the Boys subcategory can include Summer / Winter subcategories.

You can add the same product to different categories. Say, you can add a short-sleeve T-shirt to the Summer wear and Sale categories. That way, you increase the chances of your customers interacting with the product.

Add a categories menu to make it easier for customers to find products they are looking for. Say, you run a restaurant and have dozens of meals and beverages on your online menu. Group products in categories and create a category navigation menu, so hungry visitors could find burgers or soup right away.

Fisherman’s Restaurant & Oyster Bar uses a categories menu to make it easier for customers to navigate and decide on what to order

There are several ways you can create a categories menu with Ecwid Instant Site.

First way, is to display root categories in the top menu of your site. To do so, you need to create a menu item that links to your store in the header. Then, you simply choose to show root categories on menu hover. That's it.

To display root categories in the header of your Instant Site:

From your Ecwid admin, go to Website and click Edit Site.
In the menu on the left, click Header → Navigation Menu and click + Add Menu.
Name this item so customers will know that it is the link to your store. For example, My awesome store.
Click the Action on click drop-down and select Go to store action.
Make sure the Show categories on menu hover is enabled. You can also show store links on hover.
Click Save and Publish.

Now your customers can see all root categories you have in your store when hovering over the menu item:

Another way to create the categories menu, is to display them on the Instant Site storefront. Simply create categories and use the list of categories as the categories menu. Once a customer clicks on the category, they will see the subcategories it includes:

You can add images for a category or hide images and display only a category’s name, or expand categories in a menu-like way. Hiding images will work only for your Store section; images still will be displayed in the store tile on the main page.

Depending on what site builder you use, you can set up the categories menu from your site builder dashboard or by adding the code manually.

For Wordpress users

Ecwid plugin has a ready setting for adding a store with a category menu. The category menu will have a drop-down so customers can quickly find what they are looking for.

You can also add different categories to your site's navigation menu. Say, you want to have a link to the page where your mugs will be displayed. To do so, you need to create a new page and name it according to what category you want to highlight. It’s “Coffee mugs” in our example. Then you have to add the Mugs category on the page. You can design the page the way you want. Then you can add a link to this page to the site header menu.

For Wix users

You can add your store categories to the Wix site menu.

For other sites

If you created your site with another third-party service, you could add a menu widget code to your store. The menu adjusts to the width of the page, so it looks great both on desktop and mobile. In the desktop view, it's horizontal. In a mobile view, it collapses in the hamburger-menu and expands vertically when clicked.

To add the category navigation menu to the custom site:

From your Ecwid admin, go to Ecwid admin → Overview.
In the Sell on your website section, click Custom website.
Scroll to the Store extensions section and click Add Category Navigation to copy the code.
Log into the backend of your site and open a page with your store for editing in the HTML mode. Alternatively, you can ask your developer or system admin to add the code to your site.
Paste the copied code to the source code of that page. If it’s a page where you’ve added your store, put the menu code above your store code.
Save the changes and publish your site.

🗂️ Relevant Ecwid apps:

Multi-level Illustrated Menu can help you add a category menu to your website. Its price is $6.49/month, with a 7-day free trial.

Highlight categories with banners

Draw attention to a particular category by placing a link to it in the banner. Banners appear on the top of your storefront page or in your category's description. You can show text, pictures, videos or mix them together:

Banner with an image and text in it. Text link leads to the Mugs category

Use banners to inform your customers about special offers, hot deals, and news. For example, you can create the New arrivals category, then add a banner, and place a link to the category in the banner. That way, customers can check out new items in your store right away.

🗂️ Relevant Ecwid apps:

The following apps allow adding eye-catching banners:

Promo Bar. Customize the design of the bar, and choose where to display it in your store. Choose a fixed position if you want customers to see the bar while scrolling.
20+ Promotional Sales Tools. Use one of the ready-made templates for your popup, add a custom message, and choose when to show a popup to a customer.

Make search bar prominent

Customers expect online stores to have a search bar for speed and convenient shopping. So even if you don’t have categories in your store and don’t need to create a categories menu, it’s always a good idea to add a search box to your store.

Ecwid Instant Site has a search bar by default:

The search bar is in the header of your site

Search results are sorted by relevance. For example, if a customer types “coffee” in the search box, the first results will be items with “coffee” in their name. Products with “coffee” in the description will be shown next.

The search engine in Ecwid works equally well with any volume of goods, whether you have 10 or 2000 items in your store.

You can add a search widget to any page on your site or in your site header.

For WordPress users

Learn about two ways of adding product search to your site.

For Wix users

Follow the steps from the article about adding search to Wix.

For other sites

To add a product search box to your site:

From your Ecwid admin, go to Ecwid admin → Overview.
In the Sell on your website section, click on the Custom website.
Scroll to the Store extensions section and click Add Product Search to copy the code.
Add the search widget code to your site's code. Depending on the platform you use, that may be HTML, a source tab, or a separate button to add codes. If you are not sure how to add custom codes to your website, please contact your website developer for more detailed instructions.
Save and publish the changes.

Once you complete the steps, a search box should appear on your website.

You can customize the search box looks to match your brand style both on Instant site and on your own site.

🗂️ Relevant Ecwid apps:

CloudSearch app suggests products and categories while the user types into the search field so customers can find what they are looking for more quickly. The app’s price is $29.95/month, with a 30-day free trial.

Add filters for a large catalog

Product filters is a must for stores with a large catalog. Say, you run a home interior store. You have lamps, towels, furniture, home wear, home accessories, and each category has three to twelve subcategories. It can be overwhelming for customers to find what they are looking for. In that case, filters can be a lifesaver.

Customers can use filters within your category pages as well as on the search page of your store to refine their search by prices, categories, availability, special offers, brands, colors, sizes, and more. You get more filters as you update your products with new product qualities.

To turn on product filtering for your store:

From your Ecwid admin, go to Settings → Product filters.
Click Enable filters.

That’s it! Now all you need is to turn on filters you’d like to show to your customers. Ecwid enables a list of filters that are most relevant to your catalog based on the information about your products like price, stock level, category, options, and attributes. You can manually add filters to create the best filtering tool for your buyers by clicking + Add Filter Criteria.

Your store visitors will see filters once they visit your store or a product category and click Refine by:

You can also add the link to the filter in the header. When customers will hover over the menu item in top menu, they will see the link to the product search:

To add link to the product search in your top menu:

From your Ecwid admin, go to Website and click Edit Site.
In the menu on the left, click Header → Navigation Menu and click + Add Menu.
Name this item so customers will know that it is the link to your store. For example, My awesome store.
Click the Action on click drop-down and select Go to store action.
Make sure the Show store links on menu hover is enabled.
Click Save and Publish.

You can display the filter panel on the category page so customers can see all the filters at once and find the products they want in seconds. That way, customers can better understand what products you have in the category. That boosts their shopping imagination, giving them the idea of what else they could buy.

📖 Further reading:

Managing filters in your store

Make it easier to browse products

Each product page in your store has navigation arrows that are visible by default. These navigation arrows allow buyers to switch between products and see each product page without going back to the catalog:

You can turn navigation arrows on and off:

From your store admin, go to Design.
Scroll to the Navigation block.
In the “Previous” and “Next” product navigation arrows menu choose to show or hide arrows.

Guide your customers with breadcrumbs

With properly set up navigation in your store, customers can quickly find the product they are looking for. Keep in mind that sometimes shoppers can go too deep into subcategories while browsing your store. Make their shopping journey effortless by providing breadcrumbs that buyers can “follow” to return to the page they came from.

Breadcrumbs is a line of category and subcategory links that shows a visitor how deep within the navigation structure they are. Breadcrumbs are called that because they help your customer go back to where they came from, just like in a famous fairytale. Once they get back to your catalog, they can continue shopping.

Each part of the breadcrumbs is clickable, so customers can go back to the subcategory, root category, store, or home page by clicking on the link. That way, they can continue shopping.

To display breadcrumbs:

From your Ecwid admin, go to Design.
Scroll down to Navigation → Breadcrumbs.
Select Show in product details or Show in header from the dropdown.

Breadcrumbs will be shown both on your Instant Site and on your custom site.

Highlight breadcrumbs

If you wish to make breadcrumbs more visible, you can change the size and the color of breadcrumbs using the CSS code. It can be done in a few minutes and even with zero coding skills.

To change the size and color of breadcrumbs:

From your Ecwid admin, go to Design.
Scroll down to the Create your CSS theme section and click Create Theme.
In the Theme Name, fill in the name for this theme, for instance, Breadcrumbs.

Copy the following code:

/* Make breadcrumbs more visible */
 .ec-size .ec-store .product-details .ec-breadcrumbs {
    font-size: 22px;
}
 .ec-size .ec-store .breadcrumbs__link.ec-link {
    color: #92974e;}
.ec-size .ec-store .breadcrumbs__delimiter  {color: #92974e;}

Paste the code to a large white field and click Activate to enable the theme:
Click Save.

Your theme is now activated. If you want to go back to the original theme, click Inactivate and then Save.

If you're using Ecwid's New-gen Instant Site, you can add the CSS code in the Site Editor →

You can customize the color for breadcrumbs simply by changing the color code in the CSS code above. In our example, it’s #92974e, and it’s dark golden color. You can choose your own color with the HTML color palette, copy its code, and add the number with a hashtag to the code above.

Offer more with the Continue shopping button

After your customer finds the product they were looking for and adds it to the cart, they can checkout, or they can continue shopping. To give customers a choice, your Ecwid store has the Continue shopping button customers can click at checkout:

If a customer goes to the cart page without adding any products, they will see the Browse store button with the same behavior as the Continue shopping button.

The Continue shopping (Browse store) button appears on the cart page and the “Thank you for your order” page. By default, the Continue Shopping button redirects to a category page or the store home page. Here is how it works:

If a customer adds a product to the cart and clicks Continue shopping, they are taken to the category page that the product belongs to, or to the default category if the product is assigned to several categories.
If a customer goes to the cart page without adding any products and clicks Browse store, they are taken to the last visited category page or the store home page if they didn't visit any category pages.

You can change the Continue shopping button to send your customers to a custom page. For example, redirect customers to a category with your best sellers or a page on your website where you tell what’s new in your store.

To change the Continue shopping button redirect:

Install free Custom URL for ‘Continue Shopping’ Buttons app from Ecwid App Market. All apps from the Market are available on all paid plans.
In the destination field, select whether you want to always open the Store Home page or a custom URL. If you choose the custom URL option, remember to specify the URL in the appeared field:
Click Save settings.

When changes are saved, the Continue shopping (Browse store) button will always redirect customers to the page that you have specified.

To go back to the Continue shopping button’s default behavior, select the Default option in the app settings.

You can change the Continue shopping text on the button. To do it, use the Storefront Label editor.

Upsell with related products

You can increase the chance for impulse purchase and upsell by adding related products to your store. They will be displayed in the You may also like section:

Mellow Concrete shows similar vases on the product page

You can show related products on the product details page and the cart page. By carefully selecting what products to show, you can tempt your visitors to add more items to the cart.

To add related products inside individual product pages:

From your Ecwid admin, go to Catalog → Products.
Open the product page where you wish to recommend related products.
Open the Related Products tab.
You can choose to display specific related products, random products from a category, or specific and random products.
Click Save.

Showing related products is a good tactic not only to offer similar products but also to offer Holiday-related items during the Holiday sale or new arrivals. Here are some ideas of what you can show in the related products category:

Care products. Show off your shoe polish or when a customer picks up a pair of shoes.
Other items from one product line. Show off the other books from the series of novels your customer loves, or a book in the same genre or by the same author.
Expendable materials. Paper and ink are the perfect pals for that printer they just added.
The full set. Suggest a teapot, milk jug, or sugar bowl as related to tea or ceramic mugs.

To increase conversion and encourage customers proceed to checkout, you can add the shopping cart icon to every page of your site. By default, the cart icon is displayed on the store page of your site. On Instant Site, the cart icon is displayed at the upper right corner by default.

📖 Further reading:

Redirect customers after they place an order

Last but not least. The customer’s journey is not over once they place the order. With the help of the free Custom Redirect for 'Thank You' Page app you can guide your clients to any section of your site, social media, or anywhere else. For example, if you collect donations, you can redirect shoppers to the donation product in your store.

Here’s how it works. Once a customer places the order, they will be redirected to the site you specified in the app. That way, you can encourage clients to subscribe to your Facebook or Instagram, write a review, or show them hot deals in your store to tempt them for new orders.

To redirect customers after purchase:

In the Ecwid App Market, find the Custom Redirect for 'Thank You' Page app and click Install.
Turn on the Enable the redirect toggle and choose where to redirect your customers after they make a purchase:
It can be the category page in your store, your social media page, or even an online review platform where your customers can describe their experience with your store.
Click Save settings.

Now after purchasing from you, your customer will be redirected to the site you specified in the app.

Over to you

Now, when you know the basics of store navigation, you can apply them in your store, creating a better shopping journey for your customers and making it easier for them to find products and place orders.