How to Customize the Header
The Header controls your store’s navigation, branding, and visibility. Follow the steps below to access and customize your header settings in the Debutify theme.
Accessing the Header Section
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
In the left sidebar, ensure you’re on the Sections tab and locate the Header group.
STEP 3
Click the Header section to open its settings.
Header Settings Overview
Sticky Header
Choose how the header behaves while scrolling:
Always, reduce logo size
Always
On scroll up
None
💡 Note: The Transparent Header won’t work if the Sticky Header is set to None.
🔗 Learn how to enable the Sticky Header Widget →
Transparent header
Displays the header transparently over hero sections for a sleek look.
Show separator line
Adds a subtle divider below the header.
Logo Settings
STEP 1
Navigate to Theme settings.
STEP 2
Open the Logo tab.
STEP 3
Upload your Desktop, Mobile, and Favicon logos.
Desktop Settings
Show search
Decide whether you want the search icon to appear in your header.
Open dropdown on hover
Enable this option if you want dropdown menus to expand when users hover over them instead of clicking.
Desktop logo position
Choose where your logo appears in the header layout:
Top left
Top center
Middle left
Note: Enable the Menu on center to center the logo when the Middle Left position is selected.
Top left
Desktop menu
Select which navigation menu should display on desktop (for example, “Main Menu”).
Desktop menu type
Choose how your desktop menu opens:
Dropdown
Drawer
Note: Displays your menu in a slide-out panel.
Mega Menu
Note: This option is for the Mega Menu Widget.
Mobile Settings
Mobile menu
Choose the menu displayed on mobile. If left blank, the desktop menu will be used.
Secondary menu
Optionally display another menu showing only first-level items.
Secondary menu title
Add a label for the secondary menu (only shown if enabled).
Show separator line above the secondary menu
Adds a line for visual separation.
Mobile logo position
Choose between Center or Left.
Color Schemes
Default color scheme – Choose a base color scheme (e.g., Custom).
Custom color scheme – Select from your theme’s available schemes (e.g., Scheme 2).
Menu color scheme – Set a separate color scheme for the menu area.
Transparent header color scheme – Define colors when the header is transparent.
Selectors
Country/region selector
Enable for desktop and/or mobile to allow users to switch markets.
To add countries or regions, go to Settings > Markets in your Shopify Admin.
Language selector
Enable for desktop and/or mobile to allow switching between translations.
To add languages, go to Settings > Languages in your Shopify Admin.
Customer Accounts
Show avatar
Displays the customer avatar when logged in with Shop.
To manage customer accounts, go to Settings > Customer Accounts in Shopify
Spacing
Bottom margin
Controls spacing below the header (default: 0).
Top padding / Bottom padding
Adjust vertical spacing.
Options: Small, Medium, Large, or custom pixel value.