Handsome documentation

Getting started

First steps

A launch checklist. Work through these ten steps and your store will look finished and work properly on every device.

1. Logo and favicon

Open Header and upload your logo under Logo. You can set separate desktop and mobile widths, and a light logo for the transparent header. Upload the browser tab icon under Theme settings → Favicon.

2. Colour schemes

Go to Theme settings → Colors and edit the schemes to your brand colours. Every section uses one of these schemes, so this changes the whole store at once. See Colors.

3. Fonts

Under Theme settings → Typography, choose a heading font and a body font. One characterful heading font with a simple body font is a safe pairing.

4. Menus

In admin, go to Content → Menus. Build a main menu for the header and two or three small menus for the footer (for example Shop, Help and Company). Then pick them in Header and in the Footer menu blocks. Add mega menus for your biggest menu items.

5. Home page

Replace the preset's images and text with your own. Keep the order short and purposeful: an opening slideshow or banner, your best products, your collections, one story section and social proof is plenty.

6. Product page

Open a product in the editor and check the Product section blocks: title, price, options, buy buttons, and collapsible rows for details, shipping and returns. Add the Complete the look block if you've set up product pairings.

7. Collection pages and filters

Set up filters in the Search & Discovery app. See Collection filters. Upload a landscape image to each collection for its banner and cards.

8. Cart

Choose what happens after adding to cart under Theme settings → Cart drawer, and set your free shipping threshold if you offer one. See Cart and free shipping.

  • Add your social profiles under Theme settings → Social media.
  • Create your policies in admin under Settings → Policies. They're linked from the footer and checkout.
  • Check the Contact page and the email address its form sends to (Settings → Notifications → Sender email).

10. Test before you publish

The Woof home page on a phone
Always check the phone layout: most shoppers see it first.
  • Place a test order (use Shopify's Bogus Gateway or a 100% discount code).
  • Check the store on a phone, a tablet and a computer.
  • Sign up for the newsletter and check the customer appears in Customers.
  • Search for a product and try the filters.
Speed

Upload images at a sensible size (about 2000–2500 px wide for full-width images) and avoid adding many apps. Handsome loads only what each page uses.