When you first install Editions, you’ll notice that several default homepage sections are already visible: the Announcement bar, Header and Footer, as well as Slideshow, Rich text, Promotions, Newsletter, Map, Featured product, Image with text overlay, Video, 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.
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 three fixed homepage sections: the Announcement Bar, Header and the Footer. Here’s what they do and how to set them up in your store:
The Announcement Bar is a great place 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.
First up, the Announcement Bar settings let you easily turn the Announcement bar off and on, using the Show announcement setting. You can also limit the bar to only display on your homepage by turning on the Show on homepage only setting.
You'll notice that the Announcement bar has two text fields. The first is a standard Text field that you use the input the copy you'd like to appear in your Announcement bar. The second field, called Text (mobile), is optional and allows you to enter alternate copy that will only appear to customers visiting your store on mobile devices. We recommend using this field to craft shorter copy, more suitable to the smaller screens of mobile devices.
Lastly, you can add a Link and customize both the Background and Text colors of the Announcement bar so it stands out or match the branding of your store.
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.
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 a 300 x 100px .png image file. Larger 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). For example, 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.
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. For more on how to configure menus click here.
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 adding additional indented tiers to your menu in the Shopify admin ( Online store>Navigation). More on that here.
If you find the default font size and spacing of any dropdown menus you create too large, you can select the Condense dropdown menu size option to reduce the overall size.
If you want to show the product counts in your navigation, ensure you've selected that option at the bottom.
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.
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.
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:
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 allows you to add a customized message (heading + text) to your footer. Simply complete the Heading and Caption fields 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.
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.
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!).
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.
You can add up to five Slides to your slideshow. You'll find all the settings below appear separately for each slide, allowing you to make each slide unique.
Begin by clicking on Slide to expand the settings. Then upload your image (we recommend a 940 x 444px .jpg file. Next, can add a colored overlay with text and a button. The Overlay settings include:
- Button label
- Color (this will be the color of your text)
- Background color (this will be the colored overlay that will appear over your slide's image. You can use this to match the overlay to your branding or to make sure your text is readable over the slide image)
- Background color opacity ( use this slider to tweak the intensity of the overlay if you're using it. 0% is the lightest and will essentially disable the colored overlay; while, 100% is the darkest or most vivid and will make it opaque.)
- Alignment (this will be applied to your text and button and allows you to position it just right over your image)
The Featured product is designed to - you guessed it - draw attention to a single product on your homepage!
Super duper easy - just click Select product and choose which product you'd like to feature. The product images, description, options and an Add to Cart button are automatically pulled in, allowing customers to purchase the product right from the homepage!
From the Layout dropdown, choose between the One and Two column layouts.
You've also got a few other settings to play with:
- Enable image zoom
- Enable cart redirection (this automatically sends customers to the cart page after clicking the add-to-cart button)
- Show quantity selector
- Show variant labels
- Show vendor
- Show share buttons
Image with Text Overlay
The Image with text overlay section is incredibly versatile, allowing you to highlight all sorts of content, whether it's new products, special promotions, or something else entirely!
Give your section a Heading and enable Show shadow text setting if you need your light text to stand out more over your images
You can add up to four Image with text overlay blocks, each with their own custom settings. To setup a block, just select Add image with text overlay and click Select image to upload an image or select one from the image library. Then, you can add your text content: a Heading, Text and Button text with a Link. Last, choose either Light or Dark from the Text shade dropdown.
To help you build your mailing list, Editions comes with a dynamic Newsletter section.
You can give the section an optional Heading and Subheading. Something like "Keep in touch!" and/or "Subscribe to our newsletter" should do the trick.
Upload an Image and use the Desktop image alignment (left/right) and Mobile image alignment (top/bottom) settings to customize it's position in relation to the signup field.
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.
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).
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.
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.
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 row and Number of rows from the corresponding dropdowns, and you're done!
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.
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).
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.
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.
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
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.
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.
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.
Handy 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.
Start by setting the Section height from the top dropdown. Then, add a Heading (something like "Come say hi" or "Our workshop" should work) and Hours & Location (or anything else you think is relevant).
We've also included Text alignment, as well as, Desktop and Mobile layout settings to get the display of your map'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 Google Maps API key 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, and will affect, the entire 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 you map isn't working for some reason. Use the Image position settings to adjust the focal point for the image.
Last, if used any of the Overlay options for the Desktop layout setting, you can use the overlay Color picker to add a colored overlay on the map and use the Opacity slider to adjust it's opacity (note: set opacity slider to 0% to disable overlay).
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.
Edition's Video section is a great way to build your brand, highlight special promotions and products with an immersive, site-spanning video. If you wish, you can overlay text over your video section to tell visitors what the video is about.
First up, you add a section Heading with some Text. These will appear above your video.
Then you can select your Video. This feature supports Youtube and Vimeo videos only. Simply paste in the URL to video, et viola! Here, you can also choose to Enable autoplay for the video. If enable, this means the video with automatically begin playing when a customer visits your store. If you' like customer to have to press play instead, just uncheck this setting.
You have the control to select the video's Aspect ratio between16:9 and 21:9. This will set the width in relation to the height as you've selected it!
Next, you can add an Overlay to the video. This consists of an Image with text and a play button will appear over the embedded video. When a customer clicks the play button, the overlay will disappear and the video will begin to play. 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.
The Overlay settings include:
- Show overlay (turns the Overlay on/off)
- Heading and Text position (this means wether your Heading or Text will appear above or below the play button)
- Text color
- Background color (this act more as a colored overlay over the cover image. This is helpful to make your text readable over the image)
- Background color opacity (turn to 0% to disable the Background color)
- Image (this is your "cover image" and will appear as a placeholder for the video)
- Image position (this adjust the focal point of your image and is helpful if your image's aspect ratio is different then the section's. If the image you are using has roughly the same aspect ratio of the setting, you won't see this setting make sure of an impact)
- Button style (choose between a primary and secondary button style)