Skip to main content

Header

The header and navigation menu of your webshop is one of the most important parts for a good user experience. In Inspire, this section consists of three cooperating sections: the Topbar (top narrow bar), the Main header (with your logo and menu), and the Announcement bar (for promotions and discount codes).

You can adjust the order of these sections and configure them individually.

1. Topbar​

The Topbar is the narrow bar right at the top of your website. This is often used to communicate your main benefits (USPs - Unique Selling Points), such as "Free shipping" or "Ordered before 23:59, delivered tomorrow".

  • Color scheme & Typography: Choose a color scheme that matches your brand identity and determine the font size (in pixels).
  • Custom Class: For advanced users who want to add extra CSS.
  • Add USP Blocks: You can add up to 5 USP blocks. For each block, you can set the following:
    • Icon: Enter the name of a FontAwesome icon (e.g., fa-regular fa-check) to show an icon next to your text.
    • Text: The short text of your benefit.

2. Main header​

This is the heart of your navigation, where visitors find your menu, search bar, account, and shopping cart.

General settings​

  • Color schemes: Set a separate color scheme for the header itself and a scheme for the dropdown menus (navigation).
  • Header Type: Choose a compact display (Small) or a more spacious, larger display (Large).
  • Font size: Determine the size of the menu links.
  • Shadow: Add a subtle shadow under the header so it stands out nicely from the page.
  • Submenu arrows: Choose whether you want to show an arrow (chevron) next to menu links that have a dropdown menu.

Brand name​

If you haven't uploaded a logo image in the general theme settings, you can enter a Brand name (text) here. You also have the option to hide this brand text on mobile screens for a cleaner look.

Search function & Sliders​

  • Search suggestions: Link a special menu (link list) that is shown as suggestions when someone starts searching.
  • Slider settings: For product or collection sliders within the search menu or megamenu, you can determine exactly how many items are visible on Desktop, Tablet, and Mobile. You can also turn on pagination (dots) and determine whether items can fall outside the screen (carousel overflow).

Icon Backgrounds​

Do you want to make the icons (search, account, shopping cart) stand out extra? Then enable Icon backgrounds.

  • Design: Determine the border radius from 0% (square) to 50% (completely round).
  • Colors per icon: You can set the background color and the color of the icon itself separately for the search, account, and shopping cart icons.
  • Cart badge: Choose the background color of the dot that shows the number of products in the shopping cart.
  • Cart icon type: Choose between a traditional shopping cart or a shopping bag.

You can build your navigation using various blocks:

  • Simple navigation (Nav-simple): Link your standard main menu here without complex dropdown options (max. 1).
  • Submenu (Nav-submenu): Link a menu and give it a title and link. Here you can also add a Featured collection to visually draw attention (max. 10).
  • Megamenu (Nav-megamenu): For large webshops. Creates a wide bar with multiple columns, plus the option for a featured collection (max. 10).
  • Secondary navigation (Nav-secondary): An extra, often smaller menu placed next to the main navigation (max. 1).

3. Announcement Bar​

The announcement bar is perfect for temporary promotions, important news, or giving away a discount code.

Layout & Content​

  • Enable: Check or uncheck to make the bar visible.
  • Color scheme & Alignment: Choose your colors, the font size (10px to 22px), and determine whether the text should be left-aligned, centered, or right-aligned.
  • Icon & Text: Add a fitting icon (e.g., fa-regular fa-bolt) and write your message, such as "Free shipping from €50 🎉".

Discount code functionality (Behavior)​

You can make this bar interactive by sharing a discount code:

  • Discount code: Enter the actual discount code here (e.g., 'SUMMER20').
  • Copy button text: Once you enter a code, you can set the text for a clickable button (e.g., "Copy code"). Visitors can then copy the code with one click!
  • Close button: Determine whether visitors can click away the announcement bar via a close icon (cross).