Setting up your homepage with Empire

Fixed homepage sections

Dynamic homepage sections


When you first install Empire, some homepage sections are already visible — namely the header and footer, which are standard for any online store. 

Each of these sections associates to “empty state” placeholder content in the preview. These preview the formatting for each section.

Empire theme page in editor windowClicking on any of these section blocks will bring up a set of unique configuration settings. You can also click Add section, which will reveal an array of other optional sections that you can add to your homepage. 

At the very bottom of each section's settings there is a Theme settings link, which you can expand to reveal additional settings that pertain to that section. Note that many of these theme settings affect elements beyond that specific section, so be careful with the changes you make here. These will be explored in depth in the article, Empire's Theme Settings.

Fixed homepage sections

Both the Slideshow and the Highlights Banner are similar to the Header and Footer in that they are set in place. There can only be a single use of each where as the dynamic sections can be used multiple times.

Slideshow

Empire slideshow with plants and overlay text and button

The Slideshow section is a great place to show off new items, offers, and sales in your store. This section will appear beneath the Header section in your store.

It's a static section and it can be found beneath the Header section in the Theme Settings. When selecting your images for the Slideshow, we recommend widths in a range between 1500px to 2000px.

SETTINGS

To start off you can select to Enable slideshow and set the Autoplay slideshow options. You can set the duration of the slide with the slider below.

You can select a set height in the settings under Slideshow height. There you can set it to Small, Medium, Large, Fullscreen or Original aspect ratio. When setting the height, keep in mind that the Original aspect ratio will keep the image as uploaded but the other will crop to fit the set size with a focus on the image's centre.

CONTENT

The content on the Slide image is very flexible with customizable Text, Link and Colors. The Slideshow's arrows and navigation will change colors depending on the text color of the slide that is currently visible.

In the Buttons portion you'll see the settings to add multiple Call to Action links and buttons to help give multiple directions for your customers to go in. 

There is also an optional Overlay feature. This feature is useful when the text is difficult to read over an image. You get to choose if the overlay is enabled, as well as how opaque it is and what color it is for each slide.

On mobile devices, the color settings will be ignored and the text content will be dropped below the slide image, rather than being superimposed, providing a cleaner experience for your customers. The exception to this rule is if you have your Slideshow set to the Fullscreen height–this setting allows the image to be large enough on mobile to contain your content properly.

Highlights banner

Empire's highlights banner with notable store features

The Highlights Banner section is the perfect place to include highlights, offered services, hours of operation and contact information in your store. This section will appear beneath the Slideshow section in your store.

The Highlights Banner is a static section and it can be found beneath the Slideshow section in the Theme Settings.

SETTINGS

To start, select to Enable the Highlights banner, then what colors you prefer for the text, icons and background.

CONTENT

You can use up to 4 blocks with text, icons and links. There are about 20 default icons to get you started but you can add custom images as well. To get the best result we recommend using a size of 50px by 50px on a transparent background. Also keep in mind that uploading a custom icon will override any icon that you have already selected. 

Dynamic homepage sections

These are the sections you can drag, drop and add more as you need. Hit Add section to see all the options listed below.

Blog posts

Empire's blog section for home page

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 dropdown. While many stores maintain only one blog, some create multiple to better categorize information including customer stories, tips, tutorials, FAQs, and more.

You can also customize the details your blog posts display by checking  Show date published and/or 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 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 can select the collection(s) you want to display by clicking  Add collection or one of the existing Collection blocks, then 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 here: 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).

Empire's featured products section

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 four 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 (CTA) 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 a 500 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 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 Theme 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's Grid section with blocks and links

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. 

The image sizes that show can be controlled by the Section height setting. This will crop the images to your choice of Small, Medium or Large.

If you prefer to keep your image as you've uploaded it, you'll want to select the box Maintain aspect ratio instead. This will override the size of the Section height and prevent any cropping and keep the image intact on all screen sizes.

The Text alignment setting lets you fine-tune where the content will show through 9 different options.

Now on mobile, the Grid images will default to showing in full instead of minimized until activated. If you prefer to have them compressed until clicked into, you can enable that by selecting the Mobile > Compress Blocks option.

CONTENT

This is where you 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. You can also set the Button style and Grid Width along with an Overlay if your image would benefit from it! 

Image with text overlay

Image with text overlay sections are a lot like Image with text sections, only they come with a different layout: text overlay. They're a great way to use immersive, high-res images, build your brand, and highlight special promotions and products.

SETTINGS

Begin by setting the Section height of your section ( Small, MediumLarge or Original aspect ratio).

Next, upload the image you want to use, or select it from your image library. You can customize its position using the  Position setting.  This determines the point on your image that the section will center.  This setting has the most impact if your image has a different aspect ratio as the section.  If they're roughly the same, you may not see much different between the options. 

Then, you can add a  HeadingText and a Button.

Use the  Color setting to match your branding or ensure the text is legible over the image.  The Position setting also adds another layer of customizability, allowing you to position the text exactly where you want it to overlay the image.  

An  Overlay is a semi-transparent filter that lies on top of your image to make the text easier to read. To customize the overlay, select a color using the Color picker and set the Opacity using the slider at the bottom (0% will make the image more visible; 100% will obscure it entirely).

If you'd prefer to have no overlay at all, simply set the  Opacity slider to 0% to make it completely transparent. 

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 through the Heading field.  

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 by 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 shape-shifts as you add or 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. 

The image sizes that show can be controlled by the Section height setting. This will crop the images to your choice of Small, Medium or Large.

If you prefer to keep your image as you've uploaded it, you'll want to select the box Maintain aspect ratio instead. This will override the size of the Section Height and prevent any cropping and keep the image intact on all screen sizes.

The Text alignment setting lets you fine-tune where the content will show with 9 different options.

On mobile, the Grid images will default to showing in full instead of minimized until activated. If you prefer to have them compressed until clicked into, you can enable that by selecting the Mobile > Compress blocks option.

CONTENT

This is where you'll upload the images and customize the content of your mosaic blocks. Each block allows you to add an  Image, a HeadingText (up to 120 characters), Link, and Button text as well. You can also set the Button style along with an Overlay.

The Featured product section is designed to draw attention to a single product on your homepage.

Settings

The setup for this section is fairly simple.  Just select the product you'd like to feature using the Select product button. The Enable autoplay for product videos setting allows you to choose wether videos on your product page will play automatically or if a customer needs to click play before they'll start. 

Newsletter

To help you build your mailing list, Empire comes with a customizable  Newsletter section. 

SETTINGS

You can give the section an optional Heading and Subheading

The Search section allows you to include a search bar anywhere on the homepage.

SETTINGS

Begin by setting the Heading, Text and Placeholder text.

Similar to the Search bar in the Header section, the settings 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", "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.

Upload an image of your choosing to give this feature a more customized look. The Position setting will help you select the focal point of the image you use if it's a different size than the feature has room for! 

An Overlay can be added as well if that will help make the text more legible over the image. You can choose the color of the overlay, as well as the opacity used. 

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 and/or Show images to include them in your feed. 

Map

Empire comes with an eye-catching Map section that businesses with brick-and-mortar locations can use to display contact information and give directions to their store.

SETTINGS

Start by setting the Section height from the top dropdown. Then, add a Heading, then add text content (e.g. Hours & Location). 

Here you can adjust  Text alignment, as well as Desktop and Mobile layout settings to get the display of your Map section's text information just right.  

The  Map address will be the point Google uses to drop its pin. It's the red marker in the image above.

To pull a map into your homepage, you'll need to generate  Google maps API key and paste it into the Google Maps API key field . If you need help, just follow this link to open Shopify's step by step instructions for getting your key setup.  

In the end, what you're looking for is this long string of characters to paste into the API field:

You can also customize the display colors of the map using the Map foreground color and Map background color pickers. 

Note: that these do not control particular components of the map (streets, water, etc.) but rather the swatches are linked to the overall color scheme of the map.

Next, you can upload an  Image that will be used in the event that the map can not be loaded. This can be a screenshot of a map, or anything else you want to display if your customer's browser does not load the map. Use the Image position settings to adjust the focal point for the image.

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.

Rich text

The Rich Text section is a flexible feature to help add valuable content to your homepage. You can use up to two blocks within each Section. 

SETTINGS

You can choose between Regular, Wide and Full Width for the Section width to suit what you're looking for. 

CONTENT

There are two types of content block in the Rich Text section: Text and Page

Choosing the Text block will allow you to enter text directly into a text editor. Then you the text formatting buttons to customize your text.  You can make your text Bold, Italics or add a Link . You can also give your section a Heading and adjust it's height, as well, adjust the Text alignment of the content. 

If you have more complex content to show in the Rich Text section, you can go with a Page block. The Page block allows you to pull in the content from one of your static Pages within the Shopify admin. Just click the Select page button to show a list of the pages you've created and select the one you'd like to display. This block works great if you'd like to utilize the power of a full WYSIWYG editor to customize your text content. Toggle on/off the Show Heading setting to display or hide your page's title and use the Heading size setting to adjust it's size. 

Note: the  Page block is designed to display only the WYSIWYG content of your static page.  This means that if you have a static page that's utilizing the Contact page template, it will still only display the WYSIWYG content.  

A word of caution! If a table is added to a Page that you've choose to show on the Homepage, be sure to preview on mobile. Tables are tricky to scale and tend to break the width on smaller screens.

Video

Use a Video to catch your customers' attention or get into more detail about you and your business.

SETTINGS

Add your Heading if you'd like! Then you can configure your Video–this feature supports Youtube and Vimeo videos only. The setting to enable an Autoplay video is here as well.

You have the control to select the video's Aspect ratio between 16:9 and 21:9. This will set the width in relation to the height as you've selected it! 

We've given you the control to add a Cover image and set the Position as well. This comes in handy when you'd prefer a placeholder to show before the video is selected. But it's worth knowing the Autoplay feature wont work with the Cover image as a placeholder. It's one or the other for these opposite settings.

Whether you choose the Autoplay or Cover image, you can add an Overlay to either. With this setting you can select the overlay color and the opacity as well to get the most control. 



Back to top ↑

Next article:

Empire's products and collections