Set up Hearth

1. From your Shopify admin, go to Online Store > Themes and add Hearth from the Theme Store. It is added to your theme library unpublished, so your live store is not affected.
2. Choose Customize to open the theme editor.
3. Set your logo, fonts and color schemes under Theme settings (the gear icon), then build your home page with sections.
4. Preview the store on desktop and mobile. When you are ready, choose Publish from the theme library.

Hearth ships with one preset, Hearth, in warm linen, walnut and terracotta tones, with Work Sans for headings and body text.

Color schemes live under Theme settings > Colors. Every section has a Color scheme setting, so you can alternate light and dark bands down a page without editing any colors. Changing a scheme updates every section that uses it. Hearth ships with these schemes:

Each scheme sets Background, Background gradient, Text, Button background, Button text, and Borders and dividers.

Before you edit theme code, duplicate the theme (Actions > Duplicate) and work on the copy. Code changes are not covered by theme updates or support.

Open the theme editor and select the gear icon to find these groups.

• Header: choose the Menu and the Customer account menu, turn Show search on or off, set Suggestions per result type, and pick a Search suggestions colour scheme.
• Footer: choose a Menu and turn Show payment icons on or off.
• Menus are edited in your admin under Content > Menus.

Add sections from Add section in the theme editor.

The home page is built from Custom sections, Hearth: Room sets and Hearth: Samples. The product page has Product, Hearth: Delivery, Hearth: Will it fit? and Recently viewed. The cart page has Cart and Gift options. Extra page templates: page.rooms (room sets), page.samples (the samples band) and page.contact.

Recently viewed remembers products in the shopper's own browser. Nothing is stored on your store.

Room sets: add the Hearth: Room sets section, or create a page with the page.rooms template. Add a Room block for each room with an Image of the staged room, a Title (for example Living, Dining or Bedroom), a Caption, and up to four Pieces in the room. Shoppers go straight from the room to the pieces in it.

Delivery and Will it fit read product metafields in the hearth namespace. Create these definitions under Settings > Custom data > Products, then fill them in on each product. A missing value hides that line, and a section with nothing to show stays hidden.

Will it fit: shoppers type the width and depth of their space, and optionally the height. The section compares them with the piece and says whether it fits and how much room is left. It uses hearth.width, hearth.depth and hearth.height when all three are set, otherwise it reads the numbers in hearth.dimensions (for example 82"W x 36"D x 33"H or W 180 x D 90 x H 75 cm). Set Unit to match the unit your product dimensions use. Use {spare} in the Fits message where the clearance should appear.

Samples: create a collection of your fabric swatches and timber samples as products, then choose it as the Samples collection in the Hearth: Samples section, or on a page with the page.samples template. Edit the Heading, Text and Refund note to explain your sample policy.

The samples band only explains your refund policy. If you refund the sample price against a later order, set that up yourself, for example with a discount code.

Hearth uses a cart page.

Gift options add a gift wrap checkbox and a gift note to the cart. In Hearth it is the Gift options section on the cart template.

Settings: Offer gift wrap and Offer a gift note (both on by default), Heading, Note placeholder, and Note maximum length (200 characters by default; keep it short enough to fit your packing slip).

Choices are saved as the cart attributes Gift wrap (Yes when ticked) and Gift note. They appear on the order in your admin and on packing slips from apps that print cart attributes. Keep the names exactly as they are so those apps can read them.

Gift wrap is a free option by default. To charge for wrapping, create a gift wrap product and sell it as a separate item.

The free shipping progress bar is set under Theme settings > Cart. It shows on the cart page and tells shoppers how much more they need to spend, then confirms when free shipping is unlocked.

• Turn on Show free shipping progress.
• Set the Free shipping threshold in your store's default currency (500 by default). For shoppers paying in another currency it is converted automatically.
• Optionally change the Progress message (use [amount] where the remaining amount should appear) and the Unlocked message. Leave them blank to use the default wording, which is translated.

The bar only displays a message. Free shipping itself comes from your shipping rates or an automatic discount, so set the same threshold under Settings > Shipping and delivery.

Hearth uses Shopify's customer accounts. Sign-in, order history, order status, addresses, profile and the Buy again action are hosted by Shopify, so they keep working through theme updates. The theme has no legacy account templates to set up or maintain.

1. In your Shopify admin, go to Settings > Customer accounts and turn on customer accounts.
2. In the theme editor, select the Header section and choose the Customer account menu. It uses the customer-account-main-menu menu by default; edit it under Content > Menus.
3. The account icon appears in the header on desktop and mobile. Shoppers sign in with a one-time code sent to their email, so there are no passwords to manage.

The account icon only shows while customer accounts are turned on. If it is missing, check Settings > Customer accounts first.

Hearth includes the storefront features every Shopify Theme Store theme provides. They use Shopify's own data and apps, so there is nothing extra to install. Where a feature has options, you find them in the theme editor on the section or block that shows it.

• Product page: the product section is built from blocks. Open the product template in the theme editor to add, reorder or remove blocks such as title, price, variant picker, quantity, buy buttons and description. Buy buttons include dynamic checkout buttons, such as Shop Pay, when they are turned on in your payment settings.
• Filtering and sorting: collection and search pages use Shopify storefront filters. Choose which filters appear, such as availability, price, product type, vendor, variant options or metafields, in the free Shopify Search & Discovery app.
• Product recommendations: related and complementary products come from Shopify's product recommendations. Adjust them per product in the Search & Discovery app.
• Country and language selectors: they appear when your store sells in more than one country or language. Set these up under Settings > Markets and Settings > Languages.
• Newsletter signup: email signups are saved as customers in your admin with email marketing consent, ready for Shopify Email or your email app.
• Follow on Shop: when Shop Pay is turned on, shoppers can follow your store in the Shop app from your storefront. Manage this from the Shop channel in your admin.
• Search suggestions: the header search shows suggestions as shoppers type. Set how many appear for each result type in the Header section.

If your copy of Hearth is missing one of these, check your theme library for an update. Updates add a new copy with your settings carried over, so you can review it before publishing.

Hearth is built to be used with a keyboard and screen readers, and animations stop for visitors who prefer reduced motion. Images load at the size the screen needs, and images below the fold load as the shopper scrolls.

• Add alt text to every product and section image in your admin.
• Keep text and background colors in each color scheme at a contrast ratio of at least 4.5:1.
• Compress large images before uploading. Shopify serves them in modern formats automatically.

4.0.0: first Theme Store version, rebuilt on Shopify's Skeleton theme. Room sets linked to products; delivery, lead time, dimensions and materials from metafields; Will it fit calculator; samples band; gift options; free shipping progress bar; recently viewed products; predictive search; Shopify customer accounts.

Send a request from the Hearth support page at happifyapps.com/themes/hearth/support. Include your store URL, what you expected and what happened, and a screenshot if you can. You get an email confirmation straight away and a reply within 2 business days.

• Covered: questions about theme settings, sections and blocks; bugs in the theme; installing and updating the theme.
• Not covered: changes to theme code or problems caused by edited code; third-party apps; custom design or new features. For these we recommend hiring a Shopify Partner.