✨Header
Configure the header section
Select customize the theme. Click on the top dropdown menu to select the home page template.
Click on the customize theme.
From the side menu, select the header.
Configure the "Header" in the setting on the right side with the following settings.
Header layouts
Select the preferred header from the drop-down menu: - Logo left menu left - Logo left menu center - Logo center menu left - Logo center menu below Show separator line Enable this checkbox to show separator border below the header.
Navigation
Menu Select menus from the backend default navigation list of Shopify. It will appear in the Header as the menu. For more details, refer to the Shopify menus. Sticky header type Select from the following options: - None - On scroll up: This setting makes the header sticky when users scroll up the page from the bottom. - Always: This setting keeps the header permanently sticky as the page is scrolled. Open dropdown item on Choose from the following options to open the menus on: - Click - On hover
Logo
Logo Select any image to appear as the store logo.
Transparent header
Show transparent header Select this checkbox to show transparent header. (Note: It will be applied to home page only) Alternate logo Select any image to appear in the transparent header.
Logo settings
Desktop logo width Adjust the slider to customize the logo width from 50px to 300px. Mobile logo width Adjust the slider to customize the logo width from 50px to 200px
Utilities
Enable search selector Select this checkbox to show the search icon/text. Enable cart selector Select this checkbox to show the cart icon/text. Style Choose icons style from: - Text only - Icon only - Text with icon
Localization
Enable country/region Select this check box to show the location selector. ( Note: For more info, go through location and currency.) Show country flag Select this check box to show the country flag. Enable language selector Select this check box to show the language selector. ( Note: For more info, go through location and currency.)
Menu drawer
Enable menu drawer Select this check box to show the menu drawer. (Note: Set it up in ‘Menu drawer’ section in 'Header group’.)
Section spacing
Desktop top
Adjust the range bar to add spacing at the top of the section for desktop view.
Desktop bottom
Adjust the range bar to add spacing at the bottom of the section for desktop view.
Mega menu
Add the mega menu block.
Select a menu label similar to the first-level navigation you added from Shopify navigation. For instance, Catalog.
You will be connected to this menu by typing the same name into the mega menu created through the theme editor. (Note: These mega menus apply to the main menu chosen from the header section only.)
Dropdown menu label
Type the same name of the first-level menu to add it to a mega menu. These mega menus connect to the header menus. Example: Your main navigation consists of “Home”, “Shop”, and “Contact.” If you want to have “Shop” as this mega menu, you must type “Shop” in the menu label field. (Note: It can only be enabled when your menu has nested items (submenus). Please add submenus to proceed.)
Button
Link Add the button link to redirect it. Text Enter the button text. (Note: Leave the label blank to hide the button.)
Typography
Second level Font size Select the font size from the following options: - Extra small - Small - Regular - Medium - Large - Extra large - Double Extra large Third level Font size Select the font size from the following options: - Extra small - Small - Regular - Medium - Large - Extra large - Double Extra large
Promotional content(with banner)
Banner Image Choose an image to display in the mega menu. Link Include a link to the image in the mega menu. Text Add a descriptive caption to the image in the mega menu.
Mega menu with products
Add the mega menu with products block.
Select a menu label similar to the first-level navigation you added from Shopify navigation. For instance, Catalog.
You will be connected to this menu by typing the same name into the mega menu created through the theme editor.
Dropdown menu label
Type the same name of the first-level menu to add it to a mega menu. These mega menus connect to the header menus. Example: Your main navigation consists of “Home”, “Shop”, and “Contact.” If you want to have “Shop” as this mega menu, you must type “Shop” in the menu label field. (Note: It can only be enabled when your menu has nested items (submenus). Please add submenus to proceed.)
Button
Link Add the button link to redirect it. Text Enter the button text. (Note: Leave the label blank to hide the button.)
Typography
Second level Font size Select the font size from the following options: - Extra small - Small - Regular - Medium - Large - Extra large - Double Extra large Third level Font size Select the font size from the following options: - Extra small - Small - Regular - Medium - Large - Extra large - Double Extra large
Product
Product list Choose products list from the store library. Heading Add heading text.
Card appearance
Image ratio Choose from image's ratio in the grid from the following options: - Auto - Square - Landscape - Portrait Visibility options Choose options from: - Always - On hover Variants details - Sizes only - Colors only - Sizes & Colors - No variants Sizes visibility Choose the visibility of size options: - Always - On hover Enable shadow Select this checkbox to show shadow on product cards.
Always/On hover options
Border style Choose style from: - With border - Without border
Quick view
Display mode Choose the visibility of quick view: - Always - On hover - Disabled
Badges
Badges visibility Choose the visibility of badges : - Always - On hover
Media
Media fit style Choose the media fit style from : - Cover - Contain Show second image on hover Select this checkbox to show second image on hover.
Menu drawer
Color scheme
Select any color scheme defined in the theme settings>Colors>Schemes.
Visibility
Choose the drawer visibility from: - Desktop - Mobile - Both
Menu
Select menus from the backend default navigation list of Shopify. For more details, refer to the Shopify menus.
Typography
First, Second and third level Font size Select the font size from the following options: - Extra small - Small - Regular - Medium - Large - Extra large - Double Extra large
Block settings:
Button
Text Enter the button text. (Note: Leave the label blank to hide the button.) Link Add the button link to redirect it.
Secondary menu
Only single-level menu items (without submenus) will be shown. Menu Select menus from the backend default navigation list of Shopify. For more details, refer to the Shopify menus. Typography Font size Select the font size from the following options: - Extra small - Small - Regular - Medium - Large - Extra large - Double Extra large
Menu image
Note: This will show in third level menus if third level has menus. Second level dropdown menu Type the same name of the second-level menu to add it to a menu image. This image will be visible in the third level menu, only if there are menus on the third level. Image Choose an image. Image ratio Choose from image's ratio in the grid from the following options: - Auto - Square - Landscape - Portrait Heading Add the heading text. Link Add the link to redirect it.
Context image
Image Choose an image. Image ratio Choose from image's ratio in the grid from the following options: - Auto - Square - Landscape - Portrait Link Add the link to redirect it.
Nested menu
Note: This will work as a submenu for menu items those do not have any nested (child) menus, and this applies to the menus selected in menu drawer. Menu label Type the same name of the first-level menu. Media Image ratio Choose from image's ratio in the grid from the following options: - Auto - Square - Landscape - Portrait Item 1- 4 Heading Add the heading text. Image Choose an image. Link Add the link to redirect it.
Last updated