The Top header is a special menu item that sits right at the very top of the menu. This block gathers the logo, shop name, search box, social icons and buttons into one neat place, so you don’t have to put each separate item together yourself. Click Add item, choose the Top header type, then adjust the details in the Edit item table.
You can use the Top header in a Mobile Menu and a Desktop Mega Menu. Each menu panel should have only one Top header, placed as the first item.
How to add a Top header to the menu
Click Add item, choose the Top header type, then click a ready-made template. The app inserts that template at the top of the menu and opens the Edit item table so you can keep adjusting it.
- If the menu panel already has a Top header, the app asks whether you want to replace the old one with Replace it, add the new one alongside with Add anyway, or cancel with Cancel.
- On the template picker screen, the line Show in header has 6 switches to turn each part on or off quickly: Logo, Name & slogan, Search bar, Account, Buttons and Social. By default the first 5 are all on, and Account is off.
When you open the Edit item table, each part has its own on/off switch. If you turn off a part, or turn it on but leave its content empty, it hides itself on your store and doesn’t leave an empty box behind.
Change the colors, alignment and pinning on scroll
The first section in the Edit item table has no title of its own. It adjusts the general look of the whole Top header block.
| Item | What it does | Default |
|---|---|---|
| Palette › Choose a palette | Changes the whole color set with one click. Choose the Dark or Light set, or type a main color into Your primary color and then choose Dark / Light based on that color. This is a quick color tool, so the app doesn’t save the palette name you clicked. | |
| Alignment | Aligns to the Left, Center or Right. Choose Center and the logo sits above the shop name. Choose Right and the logo sits to the right of the shop name and slogan. | |
| Keep visible while scrolling | Choose No — scrolls away with the menu so the top block scrolls out of view as the shopper scrolls the list down. Choose Yes — keep the whole header to pin this block at the top of the menu. | No |
| Auto-hide while scrolling | Only appears when you choose Yes in the row above. When the shopper scrolls down, the top block slides out of view to free up screen space; when the shopper scrolls back up, it appears again right away. | Off |
| Background image | The background image of the top block. Upload an image from your computer, or choose one from product images or the library. | None |
| Background | The background color. When there’s a background image, this color layer sits on top of the image. The more transparent the color, the clearer the background image. | |
| Text color | The shared text color of the block. | |
| Curve (px) | The shared corner rounding of the buttons, search box, social icons and logo. Type 999 if you want both ends fully rounded. |
8 |
A Top header block about 200–300 px tall takes up a lot of room on a small screen when pinned. If you turn on pinning, turn off the parts you don’t need, or turn on Auto-hide while scrolling.
If you want to pin the bottom of the menu or several different items, see Columns, dividers and pinned items.
Add and resize the logo
| Item | What it does | Default |
|---|---|---|
| Logo | Your shop logo image. Upload a new image, or choose one from products or the library. If you don’t choose an image, the top block shows only the text. | None |
| Logo size (px) | Changes the logo size, from 20 to 160 px. | 48 |
Logo size (px)
This field is in the Edit item table of the Top header item (in the Build Menu step, click the Top header item in the tree), in the Logo group, right below the image picker. It decides whether the logo is large or small.
- Unit: px. Enter a number from 20 to 160. A number outside this range is automatically pulled back to 20 or 160 when shown.
- Default: 48 px when the field is empty. The header template you chose when adding it may fill in a different number.
- Applies to: Mobile Menu and Desktop Mega Menu, Top header items. No special plan needed. It only has an effect when the Logo group is on and a logo image has been added.
- What shoppers see when you change it: the logo at the top of the menu gets bigger or smaller, and the shop name and search box below it shift to match. The logo also follows the corner rounding of the Curve (px) field in the general section.
Enter the shop name and slogan
In the Content section, enter your brand name and a short tagline.
| Item | What it does | Hint text in the field |
|---|---|---|
| Shop name | The shop name, shown in large text to stand out. | MY SHOP |
| Slogan | A line of small text right below the shop name. | Fresh picks, every week |
Shop name
This is in the Content group of the Edit item table. This is the brand name shown in large text next to the logo. The slogan sits right below it.
- Value: free text. If empty, the name line doesn’t show.
MY SHOPis only faded hint text in the field, not the real value. - Default: follows the header template you chose when adding it.
- Applies to: Mobile Menu and Desktop Mega Menu, Top header items. No special plan needed. It only shows when the Content group is on.
- What shoppers see when you change it: the shop name at the top of the menu changes right away. This text isn’t translated automatically, so shoppers see exactly what you typed in every language.
Search box, shortcuts and hot keywords settings
The Search box section has the search box in the middle, shortcut icons on either side, and a line of suggested keywords below.
| Item | What it does | Default |
|---|---|---|
| Search box placeholder | Faded hint text inside the search box. | Search |
| Search link | Where the shopper goes when they tap the search box. Click the ✎ button to choose in the Link to: window. | open:Search |
| Shortcut on the left | Up to 2 shortcuts on the left of the search box. Each shortcut has an icon, a link and a Cart count checkbox. Click Add shortcut to add one. | None |
| Shortcut on the right | Exactly like the left side, but on the right of the search box. | None |
| Keywords label | The text in front of the row of hot keywords. | Top keywords: |
| Hot keywords | Suggested keywords shown as a line of small text under the search box. Each keyword has its own display text and link. Click Add keyword to add one. | None |
When you make a shortcut for the cart icon, tick the Cart count checkbox. The shortcut then shows the number of items in the shopper’s real cart, and hides the number automatically when the cart is empty.
If you leave the link empty on a shortcut or keyword, the shopper goes to the home page when they tap it. Quick-open commands such as open:ThemeCart are explained in Look up every link type.
Search box placeholder
This is in the Search box group, left column of the first row. It’s the faded hint text inside the search box.
- Value: free text. If empty, the box shows
Search. - Default: follows the header template you chose when adding it.
- Applies to: Mobile Menu and Desktop Mega Menu, Top header items. No special plan needed. It only has an effect when the Search box group is on.
- What shoppers see when you change it: the faded text inside the search box at the top of the menu changes. This text isn’t translated automatically, so keep it short.
Search link
This is in the Search box group, right column, next to the placeholder field. This is where the shopper is taken when they tap the search box.
- Value: a link or a quick-open command. Click the ✎ button to choose in the Link to: window. For the syntax, see Look up every link type.
- Default:
open:Search(opens the theme’s search). If you enter a link that starts withjavascript:or a similar unsafe format, the menu falls back toopen:Search. - Applies to: Mobile Menu and Desktop Mega Menu, Top header items. No special plan needed. It only has an effect when the Search box group is on.
- What shoppers see when you change it: the shape of the box doesn’t change, only where the shopper goes when they tap it.
- Wix / other websites: if
open:Searchdoesn’t work, enter the search link of your own website.
Shortcut on the left
This is in the Search box group, below the two fields above. These are small icon buttons placed right next to the left side of the search box.
- Value: up to 2 shortcuts. Click Add shortcut to add one. Each shortcut has an icon, a link and a Cart count checkbox (it shows the number of items in the shopper’s real cart, and hides when the cart is empty).
- Default: follows the header template you chose when adding it; many templates leave it empty.
- Applies to: Mobile Menu and Desktop Mega Menu, Top header items. No special plan needed. It only shows when the Search box group is on. If you turn off the whole group, the shortcuts on both sides and the hot keywords hide too.
- What shoppers see when you change it: icons are added or removed on the left of the search box. If you leave a link empty, the shopper goes to the home page when they tap it.
Shortcut on the right
Exactly like Shortcut on the left, but the buttons sit on the right of the search box: also up to 2 shortcuts, also for Mobile Menu and Desktop Mega Menu, and also hidden when the Search box group is off.
Hot keywords
This is at the end of the Search box group, right below the Keywords label field. This is a line of suggested keywords so shoppers can tap instead of typing.
- Value: a list of keywords. Click Add keyword to add one. Each keyword has its own display text and link (leave the link empty to go to the home page). Keywords label is the text in front of the keyword row, default
Top keywords:. - Default: follows the header template you chose when adding it; usually there are no keywords yet.
- Applies to: Mobile Menu and Desktop Mega Menu, Top header items. No special plan needed. It only shows when the Search box group is on.
- What shoppers see when you change it: a line of small text appears under the search box, made of the label followed by the keywords. If there are no keywords, this line doesn’t show.
Add social icons
In the Social links section, click Add social link to add each channel. Each row has an icon chosen from the icon picker and a link in the form https://…. This row of icons shows right below the shop name and the search box.
Turn on the account buttons
The Account section is off by default. When you turn on the switch, the menu gets two account buttons right away, and you only need to change the button text.
| Shopper status | Field in the app | Buttons shown | Default text |
|---|---|---|---|
| Not signed in | When signed out | Two buttons, sign in and register | Login, Register |
| Signed in | When signed in | Two buttons, profile and sign out | Profile, Logout |
These two buttons change automatically based on whether the shopper is signed in to the shop. The button links point to your store’s account page and can’t be edited.
Account (When signed out / When signed in)
This is in the Account group of the Edit item table. The group has its own on/off switch and is off by default. Inside are two text fields: When signed out (sign in, register) and When signed in (profile, sign out).
- Value: only the text on the button. An empty field uses the hint text
Login,Register,Profile,Logout. There’s no link field, because the links are fixed. - Default: the group is off; turning it on shows both buttons right away.
- Applies to: Mobile Menu and Desktop Mega Menu, Top header items. No special plan needed, and it doesn’t depend on any field other than the Account switch.
- What shoppers see when you change it: a shopper who isn’t signed in sees the sign-in and register buttons; once signed in, they change to profile and sign out. Changing the text only renames the buttons, it doesn’t change where they go. This text isn’t translated automatically.
- Wix / other websites: the links point to Shopify-style pages (
account/login…). Check it on your store. If your website doesn’t have those pages, turn this group off.
Add buttons
In the Buttons section, click Add button to create a new button. Each button has a text field with the hint Shop now and a link field with the hint collections/all. If you leave the link empty, the shopper goes to the home page when they tap it.
Buttons have the same style as the buttons in the Account section, and they sit right below the row of social icons if you turn on both.
The text fields in the Top header aren't translated automatically. The text you type shows exactly as written on your store in every language. On a multilingual store, keep the text short and neutral.
Number of items
This number field is in the Edit item table of the Dynamic item type (the same item type as the Top header), but it only appears for templates that pull data from Shopify, such as latest products, best sellers and latest collections. The header templates above don’t have this field.
- Value: a whole number from 1 to 6.
- Applies to: Mobile Menu and Desktop Mega Menu, Dynamic items that use a Shopify data template. No special plan needed.
- What shoppers see when you change it: the field sets how many items show in the block. The drawing of these data blocks on your store is no longer part of the current app version, so you may not see any template using this field. Check it on your store before you rely on it.
Summary of the parts in the Top header
| Part | On/off switch | Default when added | Main items |
|---|---|---|---|
| General look | No | Always there | Palette, Alignment, Keep visible while scrolling, Background, Text color, Curve (px) |
| Logo | Yes | On | Logo, Logo size (px) |
| Content | Yes | On | Shop name, Slogan |
| Search box | Yes | On | Search box placeholder, Search link, left and right shortcuts, Hot keywords |
| Social links | Yes | On | Icons and links |
| Account | Yes | Off | Text of the 4 account buttons |
| Buttons | Yes | On | Text and links |
Other platforms
The steps above are for Shopify — the default way.
The logo, name, color, button and social icon sections only depend on the content you enter. The Account section points to the addresses account/login, account/register, account and account/logout. These are Shopify-style paths, so on Wix check it on your store, and if those pages don’t exist, turn this section off. The Search link field defaults to open:Search; if it doesn’t work, enter the search link of your Wix site.
Same as Wix: the logo, name, color, button and social icon sections only depend on the content you enter. The Account section points to Shopify-style addresses (account/login…); if your website doesn’t have those pages, turn this section off. The Search link field defaults to open:Search; if it doesn’t work, enter the search link of your website.