Header
Our website's header, located in the Header group, remains consistently visible on every page.
For this header, we offer both general and block-specific settings. We chose to structure some elements as blocks to offer you the flexibility to rearrange their order as needed or even add more than one to the page.
General settings:
Color Scheme Customization: Choose from a variety of color schemes.
Header Size Adjustment: Toggle between container and full-width options.
Header Type Selection:Opt for static or sticky headers.(A sticky header remains at the top of the page while scrolling.)
Vertical Spacing Modification: Adjust spacing on both mobile and desktop within specified ranges.
Menu Selection: Define the menu to be displayed upon pressing the menu icon. You can define a new menu by following the official shopify documentation.
The next settings are regarding the open menu appearance. To preview this settings you will need to open the menu.
You have the flexibility to adjust the text's appearance using the dropdown menus provided below.
Modify the style of navigation links by selecting options like normal, capitalize, uppercase, or lowercase. Additionally, you can tailor the style and size of the primary navigation text, which refers to the links at the top level of the menu.
Sidebar settings: This sidebar section appears when the menu is open and includes by default an "X" button and an account icon.
To add the social links, ensure that the "Enable Social Links" option is checked. You can then add the necessary social links.
The social links will be presented in text format as presented below.
In the sidebar settings, you can also activate the language selector and the location selector by toggling their respective options in the settings below.
Enabling these options will introduce an icon in the sidebar.
Clicking on this icon provides users with the capability to modify the language settings within the shop, adhering to the options enabled in the language settings in Shopify (find more details here), and also to select a preferred currency from those permitted by you in Shopify.
Upselling products
You have the option to incorporate a list of your featured products into the menu. They will be showcased as illustrated below.
To have the upsell list of products displayed, you must enable it by setting the "Enable upsell feature" to true.
Subsequently, you'll need to populate the setting above with a set of products.
Additionally, you have the option to adjust the aspect ratio for the images, specify whether you want the product titles displayed, or opt for a zoom effect when hovering over a product image.
Settings per blocks
In the header section you can add blocks by pressing on Add block button
Below, you'll find presentations of all four types of blocks available.
We opted to structure them as blocks to provide you with the flexibility to rearrange the order of these elements as needed. You can achieve this by simply dragging the button displayed below.
Header logo block
Once you've added this block to the section, you can click on it to access options for updating the logo displayed and adjusting the width of the custom logo image.
Header links block
The header links refer to the buttons displayed below, showcasing the search, login, and cart functionalities.
You can select the alignment for these elements by updating the setting below.
On desktop, we've included lines between those buttons. You can customize their appearance by selecting from options such as no lines, small, medium, or large sizes.
Additionally, you have the option to toggle the inclusion of the account link and choose whether the buttons should be displayed in uppercase or not.
Header burger menu block
This block adds the button that will open the actual menu into the header.
You can customize if you want that button to have two or three lines in the next setting.
Sidebar menu block
In the sidebar (you can see it when the menu is open) you can also add a submenu,
You have the capability to modify the title of that menu, the menu itself, and the icon that will appear in the sidebar. All available icons can be referenced in the theme documentation. To adjust the position of the menu, navigate back to the general settings of the header. In the Sidebar settings subsection, you can update the next setting accordingly.
