Header is a Shopify theme section in the Section Star library. A flexible header builder with logo, menu, search, account and cart icons, an announcement bar, sticky scroll and a mobile drawer. Choose from multiple layout presets.
Live demo
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Layout
| Setting | Type | Default |
|---|---|---|
| Layout | Select (Logo left, menu beside, Logo left, icons right (no inline menu), Logo center, menu left, Logo center, menu below, Logo center, menu split) | logo-left |
| Menu Alignment | Select (Left, Center, Right) | left |
| Max Width | Number | 1200 |
| Padding Top/Bottom | Number | 16 |
| Padding Left/Right | Number | 24 |
| Column Gap | Number | 24 |
| Mobile Breakpoint (px) | Number | 800 |
Colors
| Setting | Type | Default |
|---|---|---|
| Background | Color or gradient | linear-gradient(164deg, #fff 0%, #fff… |
| Bottom Border Size | Number | 1 |
| Bottom Border Color | Color | #eee |
Logo
| Setting | Type | Default |
|---|---|---|
| Logo Image | Image | — |
| Logo Text (if no image) | Text | — |
| Logo Text Size | Range | 24 |
| Logo Text Color | Color | #111 |
| Logo Width | Range | 140 |
| Mobile Logo Width | Range | 110 |
Menu
| Setting | Type | Default |
|---|---|---|
| Override Theme Font | Checkbox | Off |
| Menu Font | Font | sans-serif |
| Menu Text Size | Range | 15 |
| Menu Font Weight | Select (Normal, Medium, Semibold, Bold) | 500 |
| Uppercase | Checkbox | Off |
| Letter Spacing | Range | 0 |
| Gap Between Menu Items | Number | 24 |
| Menu Text Color | Color | #111 |
| Menu Hover Color | Color | #666 |
| Menu Hover Style | Select (Color change, Underline) | underline |
Icons
| Setting | Type | Default |
|---|---|---|
| Show Search | Checkbox | On |
| Show Account | Checkbox | On |
| Show Cart | Checkbox | On |
| Show Cart Count | Checkbox | On |
| Icon Size | Range | 22 |
| Gap Between Icons | Number | 16 |
| Icon Color | Color | #111 |
| Cart Count Background | Color | #111 |
| Cart Count Text Color | Color | #fff |
Sticky
| Setting | Type | Default |
|---|---|---|
| Sticky on Scroll | Checkbox | On |
| Stick After Scrolling (px) | Number | 200 |
| Sticky Background | Color or gradient | linear-gradient(164deg, #fff 0%, #fff… |
| Z-Index | Number | 9990 |
Announcement Bar
| Setting | Type | Default |
|---|---|---|
| Show Announcement Bar | Checkbox | Off |
| Announcement Text | Inline rich text | Free shipping on orders over $75 |
| Announcement Background | Color or gradient | linear-gradient(164deg, #111 0%, #111… |
| Announcement Text Color | Color | #fff |
| Announcement Text Size | Range | 13 |
| Announcement Padding | Number | 10 |
Mobile Drawer
| Setting | Type | Default |
|---|---|---|
| Drawer Side | Select (Left, Right) | left |
| Drawer Width | Number | 320 |
| Drawer Background | Color or gradient | linear-gradient(164deg, #fff 0%, #fff… |
| Drawer Text Color | Color | #111 |
| Drawer Divider Color | Color | #eee |
| Drawer Text Size | Range | 18 |
Menu Link block settings
| Setting | Type | Default |
|---|---|---|
| Label | Text | Link |
| URL | URL | — |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Header”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.