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). Note, the burger menu will always show when the screen/device gets smaller.
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.
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 actions
From version 4 onwards, both the burger menu or the mega menus can have ‘menu promotions’ (known as ‘Call to actions’ in some versions of the theme). These are images with text on them that help highlight an aspect of your store within the menus.
To add these, go to Theme Settings > Header > click ‘Add menu promotion’. Within here, you can define up to two call to actions per menu item. The label of the menu item needs to be defined in the field ‘Menu item’.
For example, on the Betty demo store shown above the call to actions appear under Shop, so the ‘Menu item’ field is set to Shop, e.g.
A menu promotion can also be assigned in the same way to standard menu dropdowns (in addition to mega menus), and also with the burger navigation menus.
If you don’t enter a ‘Menu item’ – the menu promotion will show at the top of level of the burger navigation menu.
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.