Modulus

Hearth — Documentation

Hearth is a warm, editorial Shopify theme built for home goods brands with small, curated catalogs. It ships with zero theme check errors, full Online Store 2.0 support, and a Lighthouse performance score of 89.

Getting started

Requirements

  • Shopify store (any plan)
  • A modern browser for the theme editor

Installation

  1. Purchase Hearth from the Shopify Theme Store.
  2. From your Shopify admin, go to Online Store → Themes.
  3. Your new theme will appear under Theme library. Click Customize to open the editor.
  4. Publish when you're ready to go live.

First steps

After installing, we recommend setting up in this order:

  1. Configure your color scheme and typography under Theme settings → Colors and Typography
  2. Set up your logo and favicon in Theme settings → Logo
  3. Build your header in the Header section
  4. Configure the footer under Footer
  5. Create your homepage by adding sections from the section picker

Theme settings

Colors

Hearth includes two built-in color schemes: Warm (default) and Neutral. You can fully customize either from the theme editor.

| Setting | Description | |---|---| | Background | Main page background | | Surface | Card and input backgrounds | | Text | Primary text color | | Text secondary | Muted/secondary text | | Accent | Button and link highlight color | | Border | Divider and outline color |

Typography

| Setting | Description | |---|---| | Heading font | Used for all headings and display text | | Body font | Used for body copy, labels, and UI text | | Base size | Root font size (default: 16px) | | Heading weight | Bold (700) by default |

Layout

| Setting | Description | |---|---| | Page width | Maximum content width (default: 1280px) | | Content padding | Horizontal padding on mobile and desktop | | Section spacing | Vertical spacing between homepage sections | | Card radius | Corner radius for product and content cards |

Header

| Setting | Description | |---|---| | Logo | Upload your logo image (SVG or PNG recommended) | | Logo width | Maximum logo width in pixels | | Sticky header | Keep the header visible while scrolling | | Navigation style | Inline links or dropdown menus | | Cart icon style | Bag or cart icon |

Sections guide

Hero — Editorial

The flagship hero section. Features an asymmetric layout with a large text block and an offset image.

Settings:

  • Heading text and subheading
  • Background image or video
  • CTA button label and link
  • Layout: Image left / Image right
  • Overlay opacity

Featured collection

Display a curated selection of products from any collection.

Settings:

  • Collection to feature
  • Number of products to show (4, 8, 12)
  • Card style: Standard / Minimal / Editorial
  • Show vendor, price, and compare-at price

Rich text

A centered or left-aligned text block with optional eyebrow label, heading, body, and CTA.

Settings:

  • Eyebrow label
  • Heading
  • Body text (rich text editor)
  • Button label and link
  • Text alignment: Left / Center

Image with text

A two-column section with image on one side and text on the other.

Settings:

  • Image (desktop and mobile)
  • Image position: Left / Right
  • Heading, body text
  • CTA label and link
  • Vertical alignment: Top / Middle / Bottom

Testimonials

A scrollable row of customer quotes.

Settings:

  • Up to 8 testimonial blocks
  • Each block: Quote, author name, source
  • Auto-scroll: On / Off
  • Background: Transparent / Surface

Collection list

A grid of collection cards, great for a "Shop by category" section.

Settings:

  • Up to 12 collection blocks
  • Card image fill style: Cover / Contain
  • Columns on desktop: 2, 3, 4

Newsletter

An inline email signup form connected to Shopify Email or Klaviyo.

Settings:

  • Heading and subheading
  • Placeholder text
  • Button label
  • Success message

Video

A full-bleed or contained video section. Supports YouTube, Vimeo, and hosted MP4.

Settings:

  • Video URL or file
  • Autoplay (muted) / Play on click
  • Aspect ratio: 16:9 / 4:3 / 1:1
  • Poster image (shown before play)

FAQ

Does Hearth support metaobjects? Yes. Hearth includes a metaobject-powered "Ingredients" section and spec table that can be customized for any product type.

Can I use Hearth with a headless setup? Hearth is a standard Liquid/Online Store 2.0 theme. It is not designed for headless commerce.

Is Hearth compatible with Shopify Markets? Yes. Hearth is fully compatible with Shopify Markets for multi-currency and multi-language storefronts.

How do I add custom CSS? Go to Theme settings → Custom CSS and add your styles there. This is the safest place to add overrides without touching theme files.

Does Hearth work with PageFly or other page builders? Hearth works alongside page builders, but its editorial sections are designed as a native alternative. We recommend using Hearth's built-in sections for best performance.

Will Hearth receive updates? Yes. Purchased themes receive free updates through the Shopify Theme Store. You'll be notified when an update is available.

Support

We respond to all support requests within 2 business days.

When contacting support, please include:

  • Your store URL
  • A description of the issue
  • Screenshots or a screen recording if applicable
  • The version of Hearth you're using (visible in Themes → Theme library)