✨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.
General
Outer background Choose the background color for the outer container. Container width Choose the container width from below options: - Small - Standard - Wide - Edge - Full width Inner content width Choose the content width from below options: - Small - Standard - Wide - Edge Corner style Choose the corners style from following options: - Sharp - Rounded Corner radius Adjust the range bar to determine the radius to be applied in case of rounded corner style. Show separator line Enable this checkbox to show separator border below the header.
Section spacing
Choose from Choose spacing for: - Desktop - Mobile Desktop: Top spacing Adjust the range bar to add spacing at the top of the section for desktop view.
Desktop: Bottom spacing Adjust the range bar to add spacing at the bottom of the section for desktop view.
Mobile: Top spacing Adjust the range bar to add spacing at the top of the section for mobile view.
Mobile: Bottom spacing Adjust the range bar to add spacing at the bottom of the section for mobile view.
Layout
Header layout 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 Submenus position Choose from the following options to open the submenus in: - Expand down - Expand side 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.
Logo
Logo Select any image to appear as the store logo. Transparent logo Select any image to appear in the transparent header. Desktop logo width Adjust the slider to customize the logo width from 50px to 250px. Mobile logo width Adjust the slider to customize the logo width from 50px to 150px.
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. Submenus style Choose the submenus style from below options: - Dropdown - Masonry - Megamenu Submenu trigger
Choose from the following options to open the menus on: - Hover - Click (Note: Click mode is forced on touch devices.)
Icons
Show dividers in icons Select this checkbox to show the dividers in icons. Enable country/language selector Select this checkbox to show the country/language selector. ( Note: For more info, go through location and currency.) Icon style Choose the icons style from below options: - Text only - Icon only - Text with icon. Show social icons Select this checkbox to show the social media icons. (Note: The icons can be setup in social media under theme settings.)
Promos 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.
Menu item
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: Works only with menus containing inner links or sub-menus. And This does not work with headers that use a hamburger menu.)
Promo blocks
Columns in a row Adjust the range bar to determine the number of columns in a row, on the desktop view. Text color Choose any color for the text. Enable overlay Select this checkbox to show images overlay. Style Choose the overlay style from below options: - Solid - Gradient Color/Gradient Choose the sold or gradient color as per the chosen style.
Promo 1-2
Image Choose any image from the store library. Heading Enter the title. Description Enter the description text. Heading font size
Choose the font size from following options: - Extra large - Large - Medium - Regular - Small - Extra small Description font size Choose the font size from following options: - Extra large - Large - Medium - Regular - Small - Extra small Link Add the link to redirect it.
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.
Tabs mega menu
Add the tabs mega menu.
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.
Menu item
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's not applicable to hamburger menu style.)
Menu
Select menus from the backend default navigation list of Shopify. For more details, refer to the Shopify menus.
Columns in a row
Adjust the range bar to determine the number of columns in a row, on the desktop view.
Promo blocks
Image Choose any image from the store library. Heading Enter the title. Description Enter the description text. Link Add the link to redirect it. Heading font size
Choose the font size from following options: - Extra large - Large - Medium - Regular Description font size Choose the font size from following options: - Extra large - Large - Medium - Regular - Small - Extra small Text color Choose any color for the text. Enable overlay Select this checkbox to show images overlay. Style Choose the overlay style from below options: - Solid - Gradient Color/Gradient Choose the sold or gradient color as per the chosen style
Collections mega menu
Add the collections mega menu.
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.
Menu item
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's not applicable to hamburger menu style.)
Collections
Choose the collections list from store library.
Number of columns in a row
Adjust the range bar to determine the number of columns in a row, on the desktop view.
Maximum products to show
Adjust the range bar to determine the maximum number of products, on the desktop view.
Aspect ratio
Choose the images ratio from below options: - Adapt to image - Square - Portrait - Portrait slim - Landscape
Button
Button text Enter the button text. (Note: Leave the label blank to hide the button.) Button link Add the button link to redirect it. Button style Choose the button style from the following options: - Primary button - Secondary button - Primary outline button - Secondary outline button - Link
Last updated