Setting up your homepage with Empire

When you first install Empire, you’ll notice that a couple default homepage sections are already visible — namely the header and footer, which are must-haves for any online store. Notice how each of these sections associates to “empty state” placeholder content in the preview. This will give you an idea of the formatting of each section.

Clicking on any of these "section" blocks will bring up a set of unique configuration settings, or you can click  Add section, which will reveal an array of other optional sections that you can add to your homepage. We'll cover each of them in detail—more or less in the order they appear—below.

You'll also notice at the very bottom of each sections setting a General settings link, which you can expand to reveal additional settings that pertain to that section. Note that many of these general settings affect elements beyond that specific section (hence "general") so be careful with the changes you make here. We'll be covering these general settings in another article, Empire's General Settings.

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).

Header

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.

STICKY HEADER

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.

LOGO

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  Upload 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.

SEARCH

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:

NAVIGATION

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.

Below is an example of how our menus are set up in our  Empire Supply demo:

Back in the theme editor, under  Header>Navigation, you'll "connect" your menu to your header. By default, it will display the Main menu, but you can connect any menu you create from the Main menu dropdown. If you want to edit the links that appear in your chosen menu, use the Edit menu shortcut.

You can find more information about creating dropdown menus and mega menus  here. Empire will trigger a mega menu like the example below for any menu where each second tier item has at least one third tier item (in the example below, "Shop" is the top level, "Gifts" is the second level, and "Birthday" is the third). 

Footer

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. 

PAYMENT ICONS

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.

ADDITIONAL MENU

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. 

If you want to add this to your store, simply select the menu you want to display from the Menu dropdown under Additional menu. You might want to put your smallest-print, rarely-consulted, but always-needed content here. Things like your Privacy Statement and/or Terms of Use would be good candidates, but you can use whatever you want.

CONTENT

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.

Dynamic homepage sections

Blog posts

The Blog posts section allows you to display images and text from your three most recent posts. To specify the "preview" text that appears for each post, we suggest using Shopify’s excerpt function, which you'll find in the post editor under  Online store>Blog posts.

SETTINGS

If you want to give your section a heading, you can add it in the  Heading field. 

Next, select the blog you want to feature from the  Blog dropdown. While many stores maintain only one blog (probably called "News") some create multiple to better categorize information including customer stories, tips, tutorials, FAQs and more.

You can also customize the way your blog posts display by checking Show date published and Show post author. 

Collection list

Collection list sections are designed to help you showcase new or seasonal collections on your homepage. With Empire you can feature up to twenty (yes, twenty!) collections at a time.

SETTINGS

You can apply whatever heading you like to your collection list using the Heading field under Settings. Note that this is optional, and if you do not want to include a heading, you can leave the field blank and nothing will appear.

CONTENT

Here, you'll select the collection(s) you want to display by clicking  Add Collection or one of the existing Collection blocks and selecting the collection you want to feature from the Collection dropdown. You can set up collections in the Products>Collections section of your Shopify admin. For instructions on how to set up collections see our article, Getting Started: Shopify Basics.

By default, Empire will pull either the collections image (set on the right side of the collections screen in your Shopify admin) or the first product. If you'd like to use an alternate image, you can click the Upload image button and select one from your computer (or library).

Featured collection

The featured collection section is designed to—you guessed it—draw attention to products from a specific collection on your homepage. You can display up to five products from the same collection in this dedicated space.

SETTINGS

Start by assigning a heading to the section in the  Heading field. You can call it "Featured collection," the name of the collection, or anything else you want!

Next, select the  Collection you want to pull products from using the corresponding dropdown menu. If you need to make changes to your collection, you can use the Edit collection shortcut on top of the field.

CALL TO ACTION

The call to action is the "View all" tile that falls at the end of the collection row. 

To change the text color, simply click the swatch next to Text color and select a different hue.

To add a background image (and replace the opaque colored background of the CTA), click the blue Upload image button or Select from library. We recommend . a500 x 750 px .jpg image, though keep in mind that whatever image you choose will be constrained to fit the CTA container.

If you want to change the background color of your CTA, it is actually tied to the theme style you've chosen (it matches the links throughout your theme). If you wish to change this, you can do so by expanding the General settings at the bottom of the section and changing the color swatch next to Links. Just know that the change you make here will affect not only the color of your Featured collection CTAs, but also all of your links!

Grid

Empire comes with a distinctive grid section you can use to welcome customers to your store, say a bit about your brand, or share news. (You could also just put a collection of pretty images here—far be it for us to tell you how to run your Empire!) 

With Empire, you can add up to 20 blocks to your grid.

SETTINGS

If you want to give your section a heading, you can add it in the Heading field. 

You can also customize the height of your grid section (and thus the images within it) by making a selection from the Section height dropdown (small, medium, and large).

CONTENT

This is where you'll upload the images and customize the content of your grid blocks. Each block allows you to add an Image, a Heading, Text (up to 120 characters), Link, and Button text as well as customize the Button style and Width of the block (half- or full-width). Just follow the prompts, create as many as you want (up to 20, anyway) and let us know if you have any questions!

Note: The aspect ratios of these mosaic sections change depending on the screen width. For this reason, some cropping is unavoidable. Images with text are not recommended.

Logo list

A great way of building social proof is by displaying the logos of your suppliers, collaborators, or even customers. If you've been lucky enough to have been featured in a reputed newspaper or magazine, use that. If you’ve worked with well-known bloggers, use that. Visitors to your store will associate your brand with the others shown.

SETTINGS

Start by assigning a heading to your section the Heading field. We've called ours "Stockists" but you can call yours whatever you want. 

CONTENT

To add a logo, click  Add logo or one of the existing Logo blocks. Select the Image you want to use (we recommend a 320 x 320px .png) and add the Link URL in the field below.

You can display up to 18 logos in this section.

Mosaic

Similar to the grid section above, Empire's mosaic section gives you an eye-catching way to welcome customers to your store, say a bit about your brand, or share news. The difference is instead of being a standard two-column stacked grid, it's a mosaic, or a masonry-inspired layout that shapeshifts as you add and delete content blocks. 

With Empire, you can add up to five blocks to your mosaic.

SETTINGS

If you want to give your section a heading, you can add it in the  Heading field. 

You can also customize the height of your mosaic section (and therefore the images in it) by making a selection from the  Section height dropdown (small, medium, and large).

CONTENT

This is where you'll upload the images and customize the content of your grid blocks. Each block allows you to add an  Image, a HeadingText (120 characters), a Link, and Button text as well as customize the Text color and Button style. Just follow the prompts, create up to five blocks, and let us know if you have any questions!

Note: The aspect ratios of these mosaic sections change depending on the screen width. For this reason, some cropping is unavoidable. Images with text are not recommended.

Instagram feed

SETTINGS

To integrate your Instagram account, you will need to locate and input your  Instagram Access Token. Follow the link (or click here) to learn how to generate a token. Copy and paste your token back into the Instagram access token field in the theme editor.

You can also customize the  Heading for your section here.

Twitter feed

SETTINGS

The Twitter section displays your store's three most recent tweets. Simply enter an optional Heading in the first field, then your Username in the second. You can also check the box Show retweets if you're into that or Show images if you want those to be included in your feed. (Sometimes the things you post to Instagram don't totally jive with your store design, which is why we've given you the option to exclude them).

Menu list

To give you even more options for adding links and menus to your store, Empire includes a Menu list section, allowing you to add links, menus, and images to your homepage.

You can add up to six menus to your menu list.

SETTINGS

If you want to give your section a heading, you can add it in the  Heading field. 

CONTENT

This is where you'll "connect" your menus to your store using the Menu dropdown. If you need to set some menus up beforehand, you can do so by navigating to Online store>Navigation in your Shopify admin (more on that here).

You can also add an Image to each of your menu lists using the Upload image button. We recommend a 360 x 360 .jpg file.

If you do not set an image here, Empire will pull an image from the first collection (if a collection is included as a link). If there is no collection image to be found, it will use the first product image it can find. If that doesn't work either, it will use a placeholder image.