Header Design on IndieMade: Logo, Header Style, Colors and Menu

Your header is the strip across the top of every page: your logo or shop name, your main menu, the cart, and the search and social icons. It is the first thing a shopper sees, so it is worth getting right. Header design is included on every plan, and every header style works with every theme.

There are two places to change it. Both change the same settings, so use whichever suits you:

On your site, with Edit Header. You see each change on the real header as you make it.
In the Dashboard, on the Header Design page, with every setting on one page.

Changing the header right on your site

Open your site while signed in and click Editor in the bottom toolbar.
Point at your header and click the blue Edit Header button.
A panel opens with five tabs: Brand, Color, Size, Style and Settings.
Make your changes. The header changes as you go, and each change is saved on its own a moment later. There is no Save button; click the × at the top right of the panel when you are done.

With the Editor on, point at the header and click Edit Header. The Brand tab opens first.

What is on each tab

Brand: your Site Name, Show Site Name, the Store Name Font and Store Name Font Style, and Upload boxes for your Logo / Banner and a Mobile Logo.
Color: the header colors (listed under Colors below).
Size: sliders for Logo Max Width, Site name font size, Navbar font size, Icon Size (the cart icon; the same setting as Cart Size on the Dashboard page) and Hamburger Menu Size.
Style: click a Cart Icon, and click a picture under Header Layout to switch to that header style.
Settings: Fixed Header, Show Searchbar, Minified Searchbar, Transparent on Home and a Header Opacity slider.

The Style tab of the header panel with the row of five cart icons circled and the Header Layout pictures, starting with FarmHouse, circled — The Style tab. Click a cart icon or a header layout and the header on the page changes straight away.

The Header Design page in the Dashboard

Go to Dashboard → Design and click Header Design on the Header card. Change what you need and click Save configuration at the bottom of the page.

Dashboard → Design → Header Design. Your logo, a separate phone logo if you want one, and the header style are at the top.

Logo

Upload Logo: your logo for the header. No logo? Leave it empty and your site name shows instead.
Upload Mobile Logo: optional. Shown in place of your logo on phones, for example a square mark when your full logo is too wide for a small screen. Remove it to use the same logo everywhere.

The Banner header style shows your logo picture as a wide banner across the top of the page, so give it a wide picture.

Settings

Header Style: the layout of your header, mainly where the logo and menu sit. The choices are Banner, Bloom, Coopworth, Crisp, Crystalline, Ensign, FarmHouse, Gentoo, Glaze, Linseed, Moment, Ochre, Onyx, Rooster, Shoestring, Silky, Sultan and Waxwing. It starts as your theme's own header, but any style works with any theme. The pictures on the Style tab of Edit Header are the quickest way to compare them.
Store Name Font and Store Name Font Style: the font for your site name in the header. Type a Google font name (browse them at fonts.google.com) and pick it from the list, then choose a weight such as Regular or Semi-Bold.
Menu Font and Menu Font Style: the same, for your menu links.
Show site name in the header of my site.: untick it if your logo already spells out your name.
Show Searchbar: puts a search box for your whole site in the header.
Minified Searchbar: shows the search as a magnifying glass that opens into a box when clicked. It needs Show Searchbar on.
Search Results Display Format: how search results look: List (photo, title, and description) or Grid (photo and title only).

Colors

Click a color box to pick a color, or type any six-digit hex code such as #2B2622.

Header Background: the background of your header.
Mobile Menu Background: the background of the menu panel that opens on a phone.
Main Menu Links: the color of your menu text.
Main Menu Hover Background: the color behind a menu link when a shopper points at it.
Site Name: your site name, if it shows.
Header Icons: the cart and your social icons.
Search Button, Search Icon and Search Text: the parts of the search box, if it shows.
Dark Theme Mode: tick it if your site uses a dark background with light text. It changes the form fields and small text on the checkout, login and password reset pages so they stay readable.

Advanced Header Settings

Click Advanced Header Settings to open it. Sizes are in pixels; as a rough guide, 100 pixels is about an inch on a laptop screen, and a phone is about 390 pixels wide. Try a value, save, and look.

Advanced Header Settings. Fixed Header and Transparent on the Homepage change how the header behaves as a shopper scrolls.

Logo Max Width: the widest your logo will be shown. On smaller screens it shrinks to fit.
Site name font size and Navbar font size: the size of your site name and of your menu links.
Header Transparency: how solid the header is, from 100 (fully solid) down. It matters most with a fixed header, where a lower number lets the page show through as it scrolls underneath. Never set it to 0; the header would vanish.
Fixed Header: the header stays at the top of the screen while the page scrolls under it, so the menu and cart are always in reach.
Transparent on the Homepage: on your homepage the header has no background until the shopper scrolls, so your logo and menu sit over a big picture at the top. Use it with a large hero picture at the top of your homepage; see the Hero section or the Slideshow.
Cart Icon Style: Thin Cart, Placard, Shopping Bag, Shopping Bag Solid or Shopping Bag Blank.
Cart Size: the height of the cart icon.
Hamburger Menu Size: the height of the menu button (three lines) that opens the menu on phones. Some header styles, such as Crystalline, use this button on computers too.

Each header style keeps its own advanced settings. When you switch Header Style, these boxes change to that style's sizes, so check them after a switch.

Your menu on a phone

On a phone, your main menu folds into the menu button (the three lines) in the header. Tap it to open the menu panel. A menu item with a dropdown under it, such as Shop with your categories, has a small arrow: tap it to open or close the links underneath.

The open phone menu on the Shoestring header, with the Shop dropdown open showing Lamps and Pendant Lights, circled — The phone menu on the Shoestring header, with the Shop dropdown open.

With the Shoestring, Crystalline, Moment, Rooster or Waxwing header, a menu with a dropdown used to open on phones as an empty panel. That was fixed on November 5, 2026. If your phone menu still opens empty, email support@indiemade.com.

Tips

Check your header on a phone after every change. Most shoppers will see it there first.
Upload a logo on a transparent background (PNG) so it looks right on any header color.
What goes in the menu is set elsewhere; see How to Manage Your Main and Footer Menus. To put your categories in it, see Adding Your Categories to Your Main Menu.
Your logo can also be set on Basic Site Info; it is the same logo.

Want a second opinion on your header? Email support@indiemade.com and we will gladly take a look.

Header Design: Your Logo, Menu, Cart and Search