Setting up your homepage with Editions

When you first install Editions, you’ll notice that several default homepage sections are already visible: the  Header and Footer,as well as Slideshow, Rich text, Promotions, Collection list, Featured collection, Blog posts, and Instagram and Twitter. 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.

placeholder-content-example

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.

Fixed homepage sections

Fixed sections are exactly what you’d guess they are—components that are fixed to the top and bottom of your site and cannot be moved. In Editions, there are just two fixed homepage sections: the  Header and the Footer. Here’s what they do and how to set them up in your store:

Header

The header is the rectangular area that runs across the top of your store containing your logo, navigation, search, 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.

LOGO

Your store’s logo provides branding for your site and a clickable link to return to the homepage.

By default, Editions will display your store name as your logo. To replace it, click the  Upload image button and select the file you'd like to use. We recommend an  a 300 x 100px .png image file. Large images will be automatically resized to fit this constraint.

You can also add a  Custom logo width (in pixels) if you wish. This will allow your store to accommodate retina screens (which have a pixel density double that of non-retina screens). By uploading a logo that is 400px wide, but then setting the width to 200px (for example), you’ll ensure your logo looks sharp on both retina and non-retina devices. To learn more, click  here.

NAVIGATION

To add links to your menus, you must leave the theme editor by clicking the back button, and then the  Back to Shopify link in the top left corner. 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 Edit menu or create additional menus by clicking Add menu. For more on how to configure menus, see  Shopify’s instructions.

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 Menu dropdown.

If you want to add dropdown menus to your main navigation, you can do so by creating additional menus in the Shopify admin using the name used in the top-level menu (For example, if you have both a "Story" and a "Mission" page, you might want those to drop down from "About." You would create an "About" menu in the admin, add "Story" and "Mission" as menu items, and you'd get the look you were going for).

If you find the default font size and spacing of any dropdown menus you create to large, you can select the  Condense dropdown menu size option to reduce the overall size.

MEGA NAVIGATION

Editions has an optional mega-navigation setting, which you can activate by completing the  Parent link name field. Mega navigation essentially extends your store's pre-existing "top-level" navigation by creating the opportunity for additional tiers and columns. Using this feature can improve user experience, helping your customers find products faster.

In the Parent link navigation field, enter the exact name of the link in your list from which you want the mega-nav to stem (pay attention to capitalization—it'll make or break you). You can create or edit your menus by navigating to Online Store>Navigation in the Shopify admin. As an example, you could name the trigger "Catalog," as we have here:

mega-nav-example

The menus that display here (Categories and Brands) have been set using the content blocks below. Just click  Add mega navigation tier, then select the menu you want from the Menu dropdown, and it should automatically show up in you store.

Footer

editions-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 that 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. Editions provides the space to display all of these and more.

SETTINGS

Editions gives you the option of displaying an additional menu at the bottom of your store. Just select the menu you want to use from the Menu dropdown (the default Footer menu would be an obvious choice—you can edit and add to this in the Shopify admin) and it should automatically appear at the bottom of your preview screen.

If you want to display payment icons in your footer, ensure that  Enable payment options is checked. With Shopify, you can enable and manage your payment methods from your Shopify admin under Settings>Payments. For more information on configuring your payment settings, click  here.

CONTENT

There are a number of other content types you can display in your footer if you wish. These include: a Footer menu, Rich text, Social media links, and a signup form for your store's Newsletter. You'll add these by clicking Add content and selecting the item you want to add. Here's a quick rundown of each:

FOOTER MENU

If you want, you can display a menu in your store's footer (in addition to or instead of the Additional menu you may have connected above). First, set it up under Online store>Navigation (more information  here), then add a Heading and select your Menu from the dropdown menu.

RICH TEXT

Rich text allows you to add a customized message (heading + text) to your footer. Simply complete the  Heading and Captionfields and you're good to go.

SOCIAL MEDIA LINKS

Want to give customers a shortcut to your social media pages? Just add a  Social accounts block to your footer content! You'll give it a name, and then (if you haven't already) connect your accounts in the Social media section of the General settings.

NEWSLETTER

To help you build your mailing list, Editions comes with a newsletter subscription field that (if enabled) appears in the footer of your store. Add a Newsletter block to your footer content to activate it. All email addresses collected by this 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 sort them by tag under the Custom search tab. Newsletter opt-ins will be findable with the "newsletter" tag.

Dynamic homepage sections

Most of Editions' homepage sections are dynamic, meaning you can add as many of them as you want and rearrange them in the sidebar to create a completely unique layout.

Out of the box, your theme has several dynamic sections enabled already. These are merely   suggestions for how you might structure your homepage. Don’t want to include a section? Delete it! (By clicking on it and clicking Delete section at the bottom.) Want to include something that isn’t already there? Click Add section and find it on the list.

Slideshow

editions-slideshow

The top section of your home page is your store's most valuable real estate. To make the most of it, merchants often use a slideshow to showcase their most recent deals and top-selling products (note that while "above-the-fold" slideshows are the norm, with Editions, you can position your slideshow anywhere!). You can create up to five slides, each with a unique image and link.

SETTINGS

The  Invert slideshow controls colors option allows you to swap the default translucent white "next/previous" buttons for a darker version in order to make them more visible against your slideshow images (if your slideshow includes especially light images).

Below that, you can customize how long each slide displays for by selecting a time period from the  Rotation interval dropdown. If you select None users will still be able to scroll through them manually using left and right arrows at the edge of the slideshow.

CONTENT

Begin by clicking on  Slideto expand the settings. Then upload your image (we recommend a 940 x 444px .jpg file) and add a Link to it. Repeat for up to five slides.

Collection list

collection-list

Collection list sections are designed to help you showcase new or seasonal collections on your homepage. With Editions, you can feature up to three collections at a time.

SETTINGS

Start by assigning a heading to the section in the  Heading field. You can also choose whether or not to Show collection titles or Show product count (in the example above, we have opted to show the former but not the latter).

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>Collection>Add collection section of your Shopify admin. For instructions on how to set up collections see our article,  Getting Started: Shopify Basics.

Featured collection

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 twenty 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, you'll select the  Collection you want to pull products from from the corresponding dropdown menu.

From the  Collection dropdown, select the name of the collection you want to feature. Then select the Products per rowand Number of rows from the corresponding dropdowns, and you're done!

Promotions

promotions-example

Editions gives you the opportunity to show off a featured  Promotion on your homepage with an image, text, and call-to-action. You can add up to four promo boxes to this section.

SETTINGS

Start by assigning a heading to the section in the  Heading field. Something like "Current promotions" or "Our top deals" should do the trick.

If you'd like to  Show text shadow on the text in your promo boxes, make sure the box is checked (note that the shadow will only appear when Text shade is set to Light in the settings below).

CONTENT

Click  Add promotion or on one of the existing Promotion blocks to expand the settings.

Upload (your) image (we recommend a 1440 x 40px .jpg file), then add a Heading and Text, which will overlay your image. You can also add a Link, Button text, and set the Text shade (to best complement your image) in the fields at the bottom. Repeat for up to four promotions.

Blog posts

featured-blog-posts

The Blog posts section allows you to display images and text from your two 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

Start by giving your section a  Heading(like "Blog posts" or "Latest news"). Next, select the blog you want to feature from the Blogdropdown. 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 opt to display either one or two of your latest posts from the  Number of posts dropdown. If you want to Show author or Show date, ensure that those boxes are checked.

Instagram and Twitter

instagram-and-twitter

Want to display your Instagram and Twitter feeds on your homepage? No problem. Just add an  Instagram and Twitter section, then select the type of content you want to include from the Add content dropdown.

SETTINGS

You can select the  Number of columns you want to display from the top dropdown. Note that this setting only works when both social media blocks (Instagram and Twitter) are activated. Two columns will put them side by side on desktop, and one column will stack them.

CONTENT

To integrate your Instagram account, you will need to locate and input your Instagram Access Token. Follow the help link (or click  here) to learn how to generate a token. Copy and paste your token back into the Access token field in the theme editor. You can also add a Heading here and select the Number of posts that appear in your Instagram feed.

To display your store's most recent tweets, add a  Twitter section, input your Username (excluding the '@' symbol), Heading, and select the Number of tweets you want to display. If you would like to Show retweets in your feed, make sure that option is checked.

Rich text

rich-text

Have something you want customers to know that doesn't fit nicely into another section type? Use a  Rich text section to display a heading and content on your home page. Just enter your content in the Heading and Body fields and you're good to go.