Setting up your homepage with Handy
When you first install Handy, you’ll notice that several default homepage sections are already visible: the Header, Footer, and Contact bar as well as Slideshow, Featured collection, Blog posts and several other dynamic sections. 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 certain areas of your site and cannot be moved. In Handy, there are four fixed homepage sections: the Announcement Bar, Header, Footer, and Contact bar.
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 the 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 to standout 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, currency converter, account login, 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, Handy 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 400 x 200 px .png image file.
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.
If your store's logo is fairly wide, you may want to consider uploading a separate Mobile logo image. Ideally, this is an "abridged" version of your logo (your insignia without your name spelled out, for example) that will take up less space in the mobile navigation. Again, you can set a Custom mobile logo width (in pixels), allowing you to constrain your logo (and make it retina-compatible). About 25 pixels will make it proportional to the focused search icon to the left.
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 the menus are set up in our Handy-Light demo.
For more on how to configure menus (including dropdown menus), check out our instructions here.
Back in the theme editor, under Header>Navigation, you'll "connect" the menu you want to display as your top-level navigation to your header. By default, it will display the Main menu, but you can connect any menu you like from the Main menu dropdown. If you need to edit the links in your chosen menu, use the Edit menu shortcut.
If you want to convert a dropdown menu to a mega menu (again, here's the instructions for creating dropdown menus in the Shopify admin) you can do that under Content. Each block allows you to convert a regular dropdown menu to a mega menu. Simply select one, add the name of the menu, and check Show collection images if you'd like to show those.
Here's what it looks like when you've got it all tricked out:
Pretty nice, huh?
Start by selecting the collection you want to display in your mega navigation from the Collection dropdown.
By default, Handy will pull collection images from the Products>Collections section of your Shopify admin. If you would prefer to show a Custom image here, you can use the Upload image function. We recommend a 400 x 400px .jpeg file.
You can add as many collections as you want to your mega navigation. Users will be able to scroll through them horizontally on desktop and view them in a nested list in the focused search on mobile.
Handy comes with a unique contact bar section that appears as a set of stylish icons either along the bottom of the navigation drawer on mobile, or as a hover interaction over the “ Contact” menu (or any menu you want, come to think of it) on desktop. This allows customers to easily call or email you, get directions, and check store hours.
In the Parent link name field, enter the exact name of the link in your list from which you want your contact bar to stem. You can create or edit your menus by navigating to Online Store>Navigation in the Shopify admin. Probably the most logical thing to do here would be to have it stem from your contact page. The contact bar will appear when users hover over the item in your main menu navigation. (Note that this setting applies only to the desktop user experience).
The subsequent fields allow you to input your Phone number, Email address, Hours/store information, and Street address. If you would like to Show (a) map (it will display to the left of your contact bar links), ensure you have checked that option.
You can even customize the Map zoom level from the dropdown, and customize the map colors using the Map foreground/background color swatches.
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. Handy provides the space to display all of these and more.
Handy comes with a newsletter subscription field that (if enabled) appears in the footer of your store. Check Enable newsletter 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.
If you want to include links to your social accounts in your footer, you can click Enable social accounts. You'll connect your social accounts to your store in the Social media section of the General settings.
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.
Handy gives you the option of adding additional content to your footer in the form of menus, rich text, and "customer links" which show register, login, and other account links to your customers. Just click Add content, select the type of content you would like to add, and complete the relevant fields.
Dynamic homepage sections
Most of Handy's 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 Handy, you can position your slideshow anywhere!). You can create up to six slides, each with a unique image, message and link.
Autoplay slideshows are a no-no when it comes to mobile, which is why Handy gives you the option of switching it off, or customizing the rotation speed from the Autoplay dropdown.
Start by clicking on a Slide to expand the settings. Then upload your Image, select a Text layout (note that this only affects desktop and tablet devices) and Text color, add your Title, Text, Link, and Link text.
You can add up to six slides to this section.
Collection list sections are designed to help you showcase new or seasonal collections on your homepage. With Handy, you can feature up to six collections at a time.
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 (there's a Collection image box on the right hand site of each collection screen). For instructions on how to set up collections see our article, Getting Started: Shopify Basics.
You can specify the Text alignment for each collection, as well as toggle Show description on or off. Collection descriptions are set in the Products>Collections section of your Shopify admin (just click on the collection and edit the Description). If you'd like to override a collection description, you can add an alternate Custom description in the bottom box.
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.
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.
Product aspect ratio refers to the proportional relationship between a product image's width and height. With Handy, you can select cropped or uncropped versions of your product images in the following aspect ratios: Natural, Square, Cropped or Tall. Click through the options to see how they display on your store.
You can also Enable product quickshop on your featured collections sections by checking that option. Enabling quickshop means customers will be able to add products to their cart from a modal popup instead of being directed to a product page.
You can select how many products display in this section from the Number of products dropdown.
By default, your products will appear in a single row of uniform product images, however, you can also opt to create an alternate layout that creates a mosaic emphasizing one product by selecting Emphasize product. Note that this setting only affects larger screens (desktops and some tablets in landscape mode).
Mobile collections are a unique type of section that are only visible on mobile screens. They pull the collections menu (or mega navigation) our of the navigation and feature it a section on your homepage for a quicker collections overview and improved product discoverability.
To preview a mobile collection in your store, ensure that you've selected Small screen in the bottom left corner of the theme editor.
Start by assigning a heading to the section in the Heading field. We've suggested "Browse by" but you can use anything you want.
If you want to Show images (collection thumbnail images beside the collection titles, that is) check that box.
You can customize how customers browse your products using the Display dropdown. You can display: Tags, Products, or Titles only. You can also opt to Truncate list after, meaning that only your specified number of items will show as nested tags/products.
Just select a Collection and add a Custom image (we recommend a 400 x 400 .jpeg file) if you wish to use something besides the collection image, and you're golden!
Image with Text Overlay
The Image with text overlay section is a great way to use immersive, high-res images, build your brand, and highlight special promotions and products.
Begin by setting the Section height of your section (Small, Medium, Large or Original aspect ratio).
Next, upload the I mage you want to use, or select it from your image library. You can customize its position using the Position setting. This will determine the point on your image that the section will centre. This setting will have 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 Heading and some Text.
Use the Text color setting to match the color of your text to your branding or ensure the text is readable over the image. The Content position setting also adds another layer of customizability, allowing you to position the text exactly where you want it.
The Background color will be applied as an overlay on your image which is a semi-transparent "filter" that lies on top of your image to make the text easier to read (and/or look cool). Then, use the Opacity using the slider at the bottom to set the opacity of the overlay (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.
Lastly, you can add a custom Button with Link.
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, options, descriptopns and an Add to Cart button are automatically pulled in, allowing customers to view and purchase the product right from the homepage!
Next, you can choose whether to Show product vendor and/or Enable social sharing.
To help you build your mailing list, Handy 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.
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).
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.
You can choose between Regular, Wide and Full Width for the Section width to suit what you're looking for.
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 the Heading size (Small, Medium, Large) , 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.
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 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.
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 customize the Heading for your section here.
The Twitter section displays your store's most recent tweet. Simply enter your Username (excluding the '@' symbol) in the corresponding field and enter a Heading for your section in the field above. Voila, tweets!
Video sections are a great way to build your brand, highlight special promotions and products with either an immersive, wide-screen video or a half-screen player with text.
There are two options when it comes to how you display your video. If you just want to display a video player, all you need to do is add your URL and a Placeholder image if you wish. This will create a wide-screen display.
If, however, you want to add some additional information (like a Heading and a Description) this will shrink the player to half-width. You can use the Video alignment dropdown to customize they layout of your video/text.
For both options, you can also customize the Placeholder button style (light or dark). Note that this will only be visible if a placeholder image has been selected.