How can we help you?

View Categories

Header

1 min read

The ShopWell theme provides a powerful and flexible mobile header builder that allows you to create custom header experiences tailored for smaller screens. Whether you’re using prebuilt layouts or building your own from scratch, customizing the mobile header has never been easier.

🔧 Breakpoint #

Set the breakpoint at which the mobile header replaces the desktop header.

  • How to set it:
    • Go to Appearance → Customize → Mobile → Header Layout → Breakpoint
    • Enter the pixel width (e.g., 1024) at which the mobile header should activate.

🎨 Pre-built Header Layouts #

ShopWell includes 13 pre-designed header layouts, labeled from Header V1 to Header V13.

  • To use a prebuilt layout:
    • Go to Appearance → Customize → Mobile → Header Layout
    • Set Present to Use pre-build header
    • Choose your desired Prebuilt Header

Perfect for users who want a quick and stylish mobile header without manual setup.

🛠️ Build Your Own Header #

Prefer to create your own mobile header from scratch? ShopWell’s header builder gives you complete control.

  • Steps to activate:
    1. Go to Appearance → Customize → Mobile → Header → Header Layout
    2. Set Present to Build my own
  • To add elements into Header Main:
    • Visit Customize → Mobile → Header Main
    • Use the Add item buttons to insert elements into the Left, Center, or Right columns of the header main
  • To add elements into Header Bottom:
    • Visit Customize → Mobile → Header Bottom
    • Use the Add item buttons to insert elements into the Left, Center, or Right columns of the header bottom

Customize each section of your header with icons, account links, logo, and more.

🍔 Elements – Hamburger Menu #

Easily configure the mobile Hamburger Menu, used for navigation on small screens.

  • How to customize:
    • Navigate to Appearance → Customize → Mobile → Header Hamburger
  • Options available:
    • Hamburger Menu Items: Add/remove items using the Add new row option.
    • Hamburger Custom Menu: Select a menu to display as Custom Menu.
    • Hamburger Primary Menu: Select a menu to display as Primary Menu.
    • Hamburger Category Menu: Select a menu to display as Category Menu.
    • Account Info Toggle: Show or hide user account information at the top.

The hamburger menu supports drag-and-drop reordering for full control.

🔍 Elements – Search #

Enhance the user search experience on mobile.

  • Go to: Appearance → Customize → Mobile → Header Search
  • Choose your search style:
    • Icon: Shows only a search icon that opens a modal when clicked
    • Form: Displays a full search bar in the header
  • Extra Option: Enable or disable Trending Searches, which shows popular search terms below the field.

✅ Summary #

With ShopWell’s mobile header settings, you can:

  • Define the exact screen width where your mobile header takes over
  • Choose from elegant prebuilt headers or design your own
  • Add essential elements like search, hamburger menu, and account icons
  • Customize layouts to provide a mobile-optimized, conversion-friendly experience