The Header Mobile Multi-Tab feature provides an organized navigation experience for mobile users. It allows multiple tabs within the mobile header, enabling quick switching between menus, categories, or custom content areas.
How to add the Header Mobile Multi-Tab?
From your Shopify admin, go to Online Store ->Themes.
Find the theme that you want to edit, and then click Customize.
In the Header Group ->Add section -> choose Header Mobile Multi-Tab.
Conditional Rendering
The entire section only renders when settings.enable_multi_tab_layout_mobile is enabled in theme settings, ensuring it appears only when the multi-tab mobile layout is activated.
Block Types Supported
_menu_tab_headings - Menu tab heading (static block)
_menu_tab_contents - Menu tab content (static block)
1. Menu Tab Heading
- At this step, you need to add the Menu Tab Heading block.
2 . Menu Tab Item
- Inside the Menu Tab Content, add the content you want to display for each heading set up above.
- Menu Tab List Settings
Configuration
Label
Type
Description
Visibility
Tab for
text
Enter the name of the menu or section this tab corresponds to. This should match the heading of the content you want to link.
Always visible
Appearance
Label
Type
Description
Visibility
Divider
checkbox
Enable this to display a separator line between tab items.
Always visible
Borders
color
Set the color for the divider or border lines between tabs.
Visible when "Divider" is enabled
- Menu item
General
Label
Type
Description
Visibility
Title
text
Enter the display name for the menu tab item.
Always visible
Link
url
Set the target URL that the tab item should link to.
Always visible
Menu
Label
Type
Description
Visibility
Submenu
link_list
Select a navigation menu to display as a dropdown or submenu for this tab item.
Always visible
Media
Label
Type
Description
Visibility
Type level 1
select
Choose the type of media to display for the first level: SVG icon or an Image.
Always visible
SVG icon level 1
liquid
Paste the SVG code for the icon you want to display.
Visible when "Type level 1" is set to "SVG"
Image level 1
image_picker
Upload or select an image to display for the first level.
Visible when "Type level 1" is set to "Image"
Banner level 2
image_picker
Upload or select a banner image to be displayed in the second level of the menu.
Always visible
Need More Help?
If you experience any difficulties or require extra support with your Ella theme, feel free to contact our support team through our Ticket System — we’ll get back to you within 24 hours.
Simply scan the QR code below to join our Facebook community and stay updated with the latest news, tips, and announcements.
- At this step, you need to add the Menu Tab Heading block.
- Inside the Menu Tab Content, add the content you want to display for each heading set up above.
