Icon theme: Header Section
On this page
Your themes header includes numerous settings that are used to format the layout and style of its appearance and functions.
- Full width header
When enabled this will allow the header to span the full width of your browser
- Enable sticky header
When enabled your header will stay permanently visible as you scroll down the page.
- Float header over slideshow
When enabled this will move the header from its position at the top of the page to floating over the first section in your store which is most commonly set up as a slideshow.
- Add bottom border
When enabled this will add a bottom border to your header which helps add definition when scrolling down the page into an area with whitespace
The announcement bar will show above your store's logo and navigation allowing you to display messages to customers along with other content which can be chosen from the followng options.
- Show announcement
Allows you to toggle the visibility of text content (added below)
Here you can use Shopifys text editor to add a message that will be shown on all pages across this store
- Additional links
Add a small link menu to the left side of your announcement bar, to highlight specific content
Choose the position of the shopping cart and associated links including search, customer accounts, Language & currency, choices include:
- Announcement bar
Language and Currency
Our themes include the ability for your customers to shop in their local language and currency if supported by your store settings.
- Language Selector
Our themes are provided with pre-defined translations for the following languages: English, French, German, Spanish, Portuguese (Brazilian)
If enabled in your store dashboard via: settings > Languages you can enable these + more languages allowing customers to choose their local language when shopping.
- Currency Selector
Our themes are provided with currency conversion that is powered by Shopify payments.
If enabled in your store dashboard via settings > Payments you can enable additional currencies allowing customers to choose their local currency when shopping.
All Shopify themes allow you to upload your own logo, when no logo is shown your store name will be shown instead which can be renamed in your Shopify dashboard via:
Settings > General in the first section named: Store Details - Store Name
- Uploading an image:
Shopify supports many image file types, we recommend using a jpg where possible or png if your image requires transparency.
Before uploading make sure that your logo image is cropped tight to it's content and that it does not contain excessive whitespace as this whitespace will also show in your header.
- Alternative logo image
The Icon theme allows you to create different color schemes based on the scroll position of your store.
Optionally add an alternative color logo that will appear once the page is scrolled, leave this blank to disable that function.
- Controlling image size & quality
Using the range slider provided set the preferred width of your logo image. Always ensure that the image is of high quality and large in scale - we recommend using an image that is at least 1.5x wider than the width setting that you allocate to it. This will ensure that the image shows a good quality when viewed on high-resolution screens retina-enabled devices that demand high-resolution images.
- Logo position & Logo Alignment
Choose from preset options to change the layout of your theme's header:
• Inline with Navigation + Logo Center
• Inline with Navigation + Logo Left aligned
• Above Navigation + Logo Center aligned
• Above Navigation + Logo Left aligned
- Main menu
Choose from your stores navigation area to display a main navigation in the header of your theme
Your main navigation can include dropdowns, megamenus and dropdowns with products
- Show products in dropdowns
When enabled this will automatically change any dropdown menus that you have in the store where the parent ( hovered ) link points to a specific collection.
This will show the first few products from that collection. Uncheck this option to revert to a standard dropdown menu type.
- Mega menu
Multiple mega menus can be included as configurable blocks which can be applied to any links in your main admin that include 3 levels of navigation.
For details on how to configure a mega menu please see our megamenu help doc
- Submenu with image
If you have a link containing a single submenu then you can add additional style to that dropdown by including a simple left or right aligned image.
Choosing the link for either of these blocks is simple. Both blocks contain a text field named: Menu item
In here enter the link title exactly as entered into your navigation, this will then associate that menu item ( link ) with that block