The header displays on all pages in your online store.
Section settings
| Setting | Description |
| Color scheme | Choose the background of your store header. Use the dropdown menu to select between Accent 1, Accent 2, Background 1, Background 2, or Inverse. |
| Logo image | The image for the section. Click Select Image to view your media library, or click the Change button to change or remove the image. |
| Edit alt text | Add a brief description to improve SEO and to describe the media for customers using screen readers. |
| Custom logo width | The width of the logo. Can be any multiple of 10, from 50 px to 250 px. The default is 100 px. |
| Desktop logo position |
Where the logo displays in the header when a customer views the site on a large screen.
|
| Menu | The menu to use as your main menu. Click Change to select a different menu. |
| Show separator line | Displays a line to visually separate the header from the page's content. |
| Enable sticky header | Redisplays the header when the customer scrolls back up. Disappears when the customer scrolls down. |
| Mobile Layout | |
| Mobile logo position |
Where the logo displays in the header when a customer views the site on a mobile and tablet screen.
|
| Mobile menu | |
| Show top link | Display the link of the parent item in the submenu. Example: "Go to Blog". |
| Transparent header | |
| Enable on homepage | Make the transparent header on the homepage. |
| Logo image | Upload the logo that will be shown when the header is transparent. |
| Text Color | Configure color for texts in the transparent header. |
| Background cart bubble | Configure the background color for the cart bubble icon. |
Build a mega menu
The header section uses blocks to build mega drop-down menus. A mega dropdown menu is a combination of Shopify navigation items( level 2 and level 3 ), promotion blocks, product brand blocks, and product type blocks. You can check out the Shopify navigation here.
Mega menu promotion block
| Setting | Description |
| Mega menu trigger | The name of the first-level menu item that contains the mega dropdown menu. Please note that the name entered in the Mega menu trigger must match the name of one of the first-level menu items. |
| Menu item name |
Add the name for the block. This name is only used to help you find the items in Theme Settings easily. It will not be shown at the storefront. |
| Image | Click Select image to choose an image for the block. Click the Change button to change or remove the image. |
| Image ratio |
The image ratio for the image:
|
| Caption |
The caption of the promotion |
| Heading |
The title of the promotion |
| Subheading |
The subtitle of the promotion |
| Button label |
The label of the button |
| Button style |
The style of the button. Solid, outline button, or just a link. |
| Text alignment |
Align all texts and buttons horizontally |
| Text position |
Set the position of all texts and the button. Top, middle, and bottom. Note: this setting only works when the Overlay text on image checkbox is ticked. |
| Overlay text on image |
Tick to show all texts and button overlay the image. |
| Overlay opacity |
Adjust the transparency of the overlay on the image. Note: this setting only works when the Overlay texton image checkbox is ticked. |
| Link |
The URL for the promotion block. |
| Position |
Set the position that the promotion block will be inserted into the dropdown menu. |
Mega menu product brand block
| Setting | Description |
| Mega menu trigger | The name of the first-level menu item that contains the mega dropdown menu. Please note that the name entered in the Mega menu trigger must match the name of one of the first-level menu items. |
| Menu item name | Add the name for the block. This name is only used to help you find the items in Theme Settings easily. It will not be shown at the storefront. |
| Position | Set the position that the promotion block will be inserted into the dropdown menu. |
| Label | Add the heading for the block |
| Image ratio | Specify the image ratio for brands. Circle or square. |
| Brand settings | |
| Brand name |
Type the name of the brand. Note: recommend using product vendors to get the correct link. |
| Brand image |
Pick or upload an image for the brand. |
Mega menu product type block
| Setting | Description |
| Mega menu trigger | The name of the first-level menu item that contains the mega dropdown menu. Please note that the name entered in the Mega menu trigger must match the name of one of the first-level menu items. |
| Menu item name | Add the name for the block. This name is only used to help you find the items in Theme Settings easily. It will not be shown at the storefront. |
| Position | Set the position that the promotion block will be inserted into the dropdown menu. |
| Label | Add the heading for the block |
| Image ratio | Specify the image ratio for types. Circle or square. |
| Product type settings | |
| Name |
Type the name of the type. Note: recommend using product types that have been set in Shopify admin to get the correct link. |
| Image |
Pick or upload an image for the type. |
Menu label
| Setting | Description |
| Menu label trigger | The name of the first-level menu item you want to insert the label. Please note that the name entered in the Mega menu trigger must match the name of one of the first-level menu items. |
| Text label | Enter the text content for the label |
| Text color | The label color foreground |
| Background color | The label color background |
Comments
0 comments
Article is closed for comments.