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 three fixed homepage sections: the Header, Footer, and Contact bar.
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!
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!