Setting up your homepage with Handy

When you first install Handy, you’ll notice that several default homepage sections are already visible: the Header and FooterMega navigation and Contact bar as well as SlideshowFeatured collectionBlog 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 HeaderFooterMega navigation, and Contact bar (note that the footer, mega navigation, and contact bar appear on all pages, but we've put them here because they'll probably be some of the first things you want to set up).

Header

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.

LOGO

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.

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's Header settings, you can select which menu serves as your top-level navigation by selecting from the Main menu dropdown. If you want to edit the links that appear in your chosen menu, use the Edit menu shortcut.

Mega navigation

Handy 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.

SETTINGS

In the Parent link name field, enter the exact name of the link in your list from which you want the mega-nav to stem. You can create or edit your menus by navigating to Online Store>Navigation in the Shopify admin. As an example, you could use the parent link "Catalog," as we have here:

If you want to Show images in your mega navigation, ensure that that option is checked.

You can also select how you would like customers to be able to navigate your collections—by tags, products, or titles only—from the Display dropdown.

If you have a large number of products or tags in your collections, you can use the Truncate list after dropdown to cut your mega navigation links off after a certain number of items.

CONTENT

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.

Contact bar

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.

SETTINGS

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 numberEmail addressHours/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.

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

SETTINGS

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.

CONTENT

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.

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 Handy, you can position your slideshow anywhere!). You can create up to six slides, each with a unique image, message and link.

SETTINGS

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.

CONTENT

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 TitleTextLink, and Link text.

You can add up to six slides to this section.

Collection list

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.

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

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 five 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. 

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: NaturalSquareCropped 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

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.

SETTINGS

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.

CONTENT

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!

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

Instagram feed

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.

Twitter feed

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!