Enabling a ‘burger’ menu icon or ‘inline’ horizontal links
Showcase includes the option for a burger navigation icon, or horizontal ‘inline’ links.
You can enable your burger menu or inline links here:
Admin > Online store > Customise theme > Header > Set your ‘Desktop navigation’ dropdown to either ‘Show burger menu’ or ‘Show links’.
An example of how a ‘burger’ menu can look:
An example of a navigation bar with ‘inline’ links. The navigation with inline links can also have a ‘mega menu’ (see mega menu information for more).
Changing your navigation bar’s scroll behaviour
In Showcase, you can choose how the navigation bar behaves when you scroll, by heading here:
Admin > Online store > Customise theme > Header > Scroll behaviour
You will see three options:
- ‘Sticks on scroll’ – Sticks to the top of the page as you scroll down.
- ‘Scrolls with the page’ – Scrolls with the page as a normal element on the page (like text) would.
- ‘Hides on scroll down’ – Hides but only when you scroll downwards. This means when you scroll upwards, the navigation bar reappears.
Changing your navigation bar’s background behaviour
To access your settings to alter the background behaviour of your navigation bar, look here:
Admin > Online store > Customise theme > Header > Navigation background
- ‘Opaque’ – the navigation bar is always a solid colour:
- ‘Transparent’ – the navigation bar is always transparent:
- ‘Opaque on scroll’ – the navigation bar will be transparent, but only when at the very top of the page. Once you start scrolling, it will turn opaque.
- ‘Opaque on scroll showing contrast logo’ – same as above but the contrast logo will be shown when the navigation bar turns opaque (see more on contrast logos below).
The theme switches the menu into a full-width mega menu when every link inside a dropdown also has a dropdown.
To make mega menu dropdowns, you need to create ‘nested’ navigation as follows. Under the menu item you’d like the mega menu to drop down from, add as many title links as you like. Each of these title links must then have its own items nested inside for the dropdown menu to turn into a mega dropdown menu.
Image “1” – Shows “Shop” as the top level item, which also has a second tier of links. These second tier links will display as headings for each of your vertical columns.
Image “2” – Shows a third layer of links inside a heading called “Shop by concept”. All third layer links added inside here will show on the storefront underneath the parent, heading link “Shop by concept”.
This article explains more about creating a mega menu.
Add other menus to your store by following the usual Shopify method explained here.
Multiple featured links
You can have menu items appear in different colours to highlight their importance. This is done by adding a comma after each link, except the last. If you add a comma at the end of the final link, the different colour will not show for this link. You can see more in the screenshot below.
Correct method = Heading 2, Heading 3, News
Incorrect method = Heading 2, heading 3, News,
Also, make sure you write out the items exactly as they are already spelled as links. So if existing links are all uppercase, write your ‘featured links’ in uppercase. To change the colour that appears, look here:
Admin > Online store > Customise theme > Theme settings > Colours > Feature Link
Here is an example of how your storefront could look:
Adding a ‘main’ logo image
If you wish for a logo image that sits within your navigation bar, head here:
Admin > Online store > Customise theme > Header > Logo > Main logo
Adding a ‘contrast logo’ image
A ‘contrast logo’ will show over sections that feature full-screen images, as the user scrolls down the page. If a lot of your images are very light, then the contrast logo should be dark to stand out, and vice versa.
To add a ‘contrast logo’ – (which ideally would be the exact same size as your ‘main’ logo, but a different colour), head here:
Admin > Online store > Customise theme > Header > Logo > Contrast logo
Menu promotions / Call to action
To view our dedicated mega menu guide and understand how to set this up, click the link below:
Add an announcement bar at the top of your Showcase theme, to promote your latest offers – add a link to a specific product or page featuring offers and choose a colour for the bar.
Your announcement bar is located inside your ‘header’ section:
Admin > Online store > Customise theme > Header > Scroll down to ‘announcement’ > Tick the “Show announcement” checkbox
Your footer is made up of a maximum of 4 ‘content blocks’. Each block corresponds to a column in your footer and a block can be one of the following:
‘Quick links’ content block
This is a list of links with an optional heading:
‘Newsletter’ content block
This is where your customers or potential customers can subscribe to your mailing list:
‘Text’ content block
Allows for general text or images and also social media links:
Don’t forget to add in links to your specific social media sites first here:
Admin > Online store > Customise theme > Theme Settings > Social Media
Payment icons are pulled directly from the Shopify backend, based on your payment settings.
You can also add a custom payment icon if you wish here:
Admin > Online store > Customise theme > Theme settings > Footer > Custom payment icon