Custom Header
Create a custom header that better aligns with your brand and matches your main site's header.
You have 2 options:
- Use our sample code below and customize to your needs. This approach is more basic, anyone can do it!
- Create a fully custom header in a code editor and copy-paste into AIQ Ecommerce. This approach is more advanced, we recommend asking a developer friend for help.
- Navigate to Store > Settings > Branding
- Upload Dark Mode Logos (if your header background is dark and you'd like to use alternate logos)
- In the 'Custom Header' field, paste your code snippet
- Save
- View your new header on your menu
To style the sample code to your brand, we recommend the following edits:
Change the background color. The example uses #379D7B, replace that with whatever hex code you'd like.
If you're using a dark background that requires a white or light logo, upload your Dark Mode Logos and make sure your logo StoreLogo is using logoLight and logoSquareLight (mobile breakpoint) instead of the default. The sample code contains these 2 lines of code:
logo={store.logoLight}
logoSquare={store.logoSquareLight}
If your background is still white or light, you can ignore this and AIQ Ecommerce will use the existing logos you uploaded.
Define a height for your StoreLogo (the example uses 40px) if you'd like it to be bigger or smaller than the default. Ideally, it would match the logo height from your main website.
You can also adjust the padding around your logo, StoreWebsiteLink (the example uses 10px) to make your header taller or shorter.
If you only have 1 store and want to remove the Store dropdown, delete the following line of code from the sample code: <StoresDropdown> </StoresDropdown>
Hello fellow developer friends: If you want to make a sticky header, go for it! However, there are a few pages where you don't want that extra margin to show up (account, cart, checkout, etc.), so put the code below (with appropriate margin px edits) into the custom Head Code field.
The key is this line body:not(.header-locked) {, which allows you to add space for the sticky header but not on pages where AIQ Ecommerce locks the header.
If you mess the whole thing up and want to revert back to the default, just delete all code from the Custom Header input and click Save.
To add you own custom javascript and CSS, see how you can use the Head Code field.
To upload your own JS and CSS files, see Custom Files.
