Empire's header and footer
Fixed homepage sections
Fixed sections are exactly what you’d guess they are—components that are fixed to certain areas of your site and cannot be moved. In Empire, there are just two fixed homepage sections: the Header and the Footer (note that these sections appear on all pages, but we've put them here because they'll probably be some of the first things you want to set up).
The header is the rectangular area that runs across the top of your store containing your logo, navigation, currency converter, search bar, and cart. It appears on every page and is intended to be used to promote your company's brand and make it instantly recognizable to your visitors. This is a static section and cannot be repositioned.
A sticky header—also sometimes referred to as a fixed or persistent header—is a great option that "sticks" the header to the top of the screen, even as users scroll down a page. This can improve navigability, reinforce branding, and save time (nobody likes scrolling all the way back to the top when they realize they're browsing the wrong page).
Empire's sticky header compresses to preserve screen real estate, nesting navigational elements within a hamburger menu, and removing non-essential elements like the currency converter.
To use a sticky header in your store, simply check the Enable sticky header option at the top of the Header settings.
Your store’s logo provides branding for your site and a clickable link to return to the homepage.
By default, Empire will display your store name as your logo. To replace it, click the blue 'Select Image' button and select the file you'd like to use. We recommend you use a 200 x 80px .png image file. Larger images will be automatically resized to fit this constraint.
You will also see the Max-width and Max-height sliders to help adjust the space for your logo!
One of Empire's distinguishing features is its robust enterprise-level site search. It features a live search (meaning it will suggest popular searches as users type), with options to include products, articles, and pages in the results. It also includes an optional "quick links" menu, which can direct customers—especially mobile customers—to products and content faster.
Under the Search heading in the Header settings, you'll find a few checkboxes. These allow you to:
- Enable live search. When enabled, this allows users to see suggested products based on what they have already typed in the search box. For example, if your store sells pottery and a user enters "ceramic," they might be presented with options like "ceramic mug," and "ceramic vase" and "ceramic cream and sugar set." This is a great way of guiding a visitor to results, rather than having them type searches that are slightly off and don't return the results they're looking for.
- Show product images in live search results. When enabled, this will display icon-sized versions of images for products that come up in live search results.
- Show blog posts and pages in live search results. When enabled, this will include results from blog posts and pages in live search results. These results will display in a separate "Pages & Posts" column on the right side of your live search results.
If you want, you can also opt to display Quick links below the search box the first time it is opened (i.e. before a user starts typing). Simply select the menu whose links you want to display from the Quick links dropdown, and you'll see them displayed like so:
To add links to your menus, you must leave the theme editor by clicking the back button in the top left hand corner (you actually need to click twice — once out of the Header settings and again on the Themes link to get back to the admin). Go to Online store>Navigation. Here, you’ll find two pre-populated menus: Main menu and Footer menu. You can edit the links in these menus by clicking on the titles to edit them, or create additional menus by clicking the purple Add menu button.
With Shopify's Nested Navigation control, you can add levels to the menus as needed. Check out our Navigation doc here for a step by step! Once you have the nested menus added in the Admin, you'll see that they become a basic nested menu in the Empire storefront. If you're looking to enable a Mega Nav, just head to the Theme Editor>Header tab. Then scroll down until you get to the Content section with the 'Add meganav' as an option. Once you click that you will just need to add the name of the menu you'd like to enable!
The Announcement Bar is a great place to fill your customers in on new promotions, offers and changes to your store. This bar will appear above the Header section making in the first thing customers will see at the top of the page when they visit your store.
The Announcement Bar settings includes Color control for the text and background, the option to add a link and the text used. We even added a secondary text field to alter what's shown on mobile screens! As well, there are settings to easily turn the Announcement bar off and on, or limit it to displaying only on the homepage
The Small Promo section is the perfect place to include deals, hours of operation and contact information in your store. This section will appear next to the search bar in the Header on desktop devices and below the Header on mobile.
For this feature you can control the text, link and icon used. You can even fine tune the text on mobile to suit the smaller available space!
We've included 20 default icons to choose between and you can also upload your own custom logos as well. When adding custom logos we recommend using a 50px by 50px size over a transparent background. It's worth noting that uploading a custom icon will override any icon that you have already selected.
MEGA MENU IMAGES
Mega Menus also have the ability to add images. You can add up to two images per Mega Menu.
Here you can change the image size to Small, Medium or Large. You can also set the image placement to the first or last column. Text can be added below the image in addition to a link for the image as well!
Like a footer on a document or report, a website footer contains information listed at the bottom of a page. Typically, the footer is the area where visitors expect to find the "fine print"—legal information such as terms and conditions and privacy policies, but also FAQs, size guides, and contact information.
Displaying the logos of the payment methods you accept is a great way of building social proof and clearly displaying your customers' payment options. With Empire, you can easily switch these on and off in the theme editor by checking the Enable payment icons box under Footer>Payment icons.
Note that you will have to first configure your payment options from the Shopify admin ( Settings>Payments). You can learn more about that here.
Empire comes with an optional and unique "last line" menu that, if enabled, displays horizontally along the very bottom of your footer, just above the copyright stamp.
With Empire, you can add four optional types of content to your footer: Menu, Rich text, Social accounts, and Newsletter. You can add up to five content blocks here (in the example above, we've added two menus, one social media links, one rich text, and one newsletter). Just click Add content and choose the one you want to add. Setting up the blocks themselves is very intuitive—just follow the prompts!
Note that all email addresses collected by Empire's newsletter/email collection form will be added to your customer list (just click Customers in the Shopify admin). If you want to filter this list (purchasers versus newsletter opt-ins, for example) you can use the Filter customers dropdown, then select "Tagged with," then input "Newsletter" and click "Add filter." This will display everyone that signed up for your newsletter through your theme.
If you want to sync this list to your email marketing service, you can click Export at the top and make the appropriate selection.