The theme includes the option for burger navigation with a popup menu (Theme Settings > Header > Desktop navigation set to ‘Show burger menu’)
Or for Showcase version 4 and later, a navigation bar with inline links (Theme Settings > Header > Desktop navigation set to ‘Show links’)
The navigation with inline links can also have a mega menu (see the next section for more).
Also in version 4 and later, you can choose what the navigation bar does when you scroll (Theme Settings > Header > Scroll behaviour):
- Stick to the top of the page as you scroll down
- Scroll with the page as a normal element on the page would
- Hide but only when you scroll down. This means when you scroll up, the navigation comes back into view.
Also in version 4 and later, you can the background behaviour of the navigation bar (Theme Settings > Header > Navigation background).
- Opaque – the navbar is always a solid colour
- Transparent – the navbar is always transparent
- Opaque on scroll – the navbar will be transparent but only when at the top of the page. When 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 navbar turns opaque (see more on contrast logos below).
In version 4 and later, the Showcase theme supports both a standard 3 tier drop-down navigation and a full-width mega menu. Your navigation bar needs to be set to ‘Show links’ first (see the previous section).
The theme switches the menu into a full-width mega menu when every link inside a dropdown also has a dropdown.
To make mega dropdowns, like the one in this demo store, 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:
This article explains more about creating a mega menu.
Add other menus in your store following the usual Shopify method explained here.
Multiple Featured Links
You can have menu items appear in different colors to highlight their importance. From the screenshot below this is done by adding a comma after each one except the last. If you add one at the end, it will not show it.
Correct way = Heading 2, Heading 3, News
Incorrect way = heading 2, heading 3, NeWs,
Also, make sure to write out the items as they are spelt. So if they are all caps, write them in all caps. To change the color that appears look under theme settings > colors > Feature Link.
You can define a logo to sit in your navigation bar in Theme Settings > Header > Main logo.
You can additionally define a ‘Contrast logo’ – which should be the exact same size as the main logo, but a different colour. If defined, this logo will show over 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.
Menu Promotions/Call to Action (Added in the version in 4.0)
To understand how to set these up, please click the link below to go over to our dedicated mega menu guide which explains how this works.
This is located inside the header section. When you click the header scroll down on the side till you locate it near the bottom. Add an announcement bar at the top of your Showcase Shopify theme site, to promote your latest offers – add a link to a specific product or offer page, and choose a colour for the bar.
From Showcase version 4 onwards, the footer is made up of a maximum of 4 blocks. Each block corresponds to a column in your footer, and a block can be one of the following:
Quick links – a list of links with an optional heading
Text – allowing for general text/images and also social media links.
Payment icons are pulled directly from Shopify based on your payment settings.
From Showcase version 4 onwards, you can also add a custom payment icon if you wish – Theme Settings > Footer > Custom payment icon.