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 create a custom header 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 option 1 sample code \<div style={{ background "#379d7b" }}> \<navcontainer> \<div style={{ display "flex", flexdirection "row" }}> \<storewebsitelink style={{ padding "10px" }}> \<storelogo style={{ height "40px" }} logo={store logolight} logosquare={store logosquarelight} /> \</storewebsitelink> \<div style={{ display "flex", flexdirection "row", }} \> \<storesdropdown>\</storesdropdown> \<storerecmeddropdown>\</storerecmeddropdown> \</div> \</div> \</navcontainer> \</div> to style the sample code to your brand, we recommend the following edits background color change the background color the example uses #379d7b , replace that with whatever hex code you'd like logo 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 logo height 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 logo padding you can also adjust the padding around your logo, storewebsitelink (the example uses 10px) to make your header taller or shorter remove store dropdown (only 1 store) 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> option 2 developer friends 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 \<style> body\ not( header locked) { margin top 122px !important; } @media(max width 1023 98px){ body { margin top 99px !important; } } \#header { letter spacing 0 01px; } \</style> troubleshooting 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 head code to add you own custom javascript and css, see how you can use the head code docid\ f6pekunevvspcwbw j0rf field custom files to upload your own js and css files, see custom files docid\ i1cybhkwpm7w9nlzmzdti