Hearth: Home & Furniture Theme for OpenCart

Overview

Hearth is a home and furniture theme for OpenCart 4.x and 3.0.x by Kavio Labs. It is built for furniture, lighting, rugs, textiles and homeware stores, where shoppers browse by room, compare materials and colours, and want to know when a piece arrives.

What you get

• Room hero slider. Up to three slides with a floating text card on a wide room image (21:9), one or two buttons and optional autoplay. Without an image Hearth shows a built-in illustrated room.
• Room mega menu. Categories marked "Show in top menu" become the room navigation. Their subcategories open in a wide panel with a room photo tile. A Sale link and an optional second link sit on the right.
• Shop by room and popular categories. Room tiles with the category image, name and item count, then six square category wells.
• Studio-sweep product cards. 4:5 images in a soft-lit well, a material line ("Boucle · Solid oak"), colour swatches, a delivery line, a wish list heart and tags (New, sale percentage, Low stock, Sold out and your own labels).
• Colourways. Sell each colour as its own product and give them the same Collection attribute value. Cards and the product page then show every colourway as a swatch.
• Tabbed products. Best sellers, new arrivals and on sale as tabs on the home page, plus a "New arrivals" row.
• Complete the look. A room scene beside a checklist of its products with a live total and one Add to cart button. Shoppers untick what they already have.
• Product page. Large gallery with hover zoom, colour swatches, option chips, a dimensions line ("W 220 x D 95 x H 78 cm"), a delivery panel with delivery dates worked out from a delivery time attribute, assembly and returns lines, and Frequently bought together built from the product's related products.
• Optional home sections. Promo banners, makers strip, reviews and quotes, ideas and inspiration cards, newsletter band. All are switched on or off and written on the theme settings page.
• Four presets. Clay (default), Coast, Rattan and Evening. They change more than colour: corners, card borders, menu case, button shape and, in Evening, the whole page tone.
• Self-hosted fonts. Outfit and Hanken Grotesk (SIL Open Font License 1.1). Hearth makes no requests to font CDNs.
• Safe to install. No core file changes and no OCMOD. A licence problem never blocks the store or the admin panel.

On a phone the menu opens as a slide-in drawer and the home page stacks into one column.

Works with

Other extensions keep working: Hearth keeps the core ids of the product form and the mini cart. Extensions that add buttons to the product page appear under Add to cart.

Versions

One licence covers both packages and includes 12 months of updates and support.

Pages

Installation

OpenCart 4.x

1. Go to Extensions > Installer and upload kv_theme_hearth.ocmod.zip. Click Install (the green + button) next to it.
2. Go to Extensions > Extensions, choose the type Themes, and click Install next to Hearth Home & Furniture Theme by Kavio Labs.
3. Click Edit, check that Status is on, choose a preset and save.
4. Go to System > Settings, edit your store, and on the General tab set Theme to Hearth Home & Furniture Theme by Kavio Labs. Save.

OpenCart 4 has no theme folders. Hearth is a theme extension: it swaps in its own templates while it is the store's theme and switched on. Switch the store back to Default to return to the stock look at any time. The settings page tells you whether Hearth is the active theme.

OpenCart 3.0.x

1. Go to Extensions > Installer and upload kv_theme_hearth-oc3.ocmod.zip.
2. Go to Extensions > Modifications and click Refresh. OpenCart expects this after every upload.
3. Go to Extensions > Extensions, choose Themes, and click Install next to Hearth Home & Furniture Theme by Kavio Labs.
4. Click Edit, check that Status is on, choose a preset, check the image sizes on the Listing & images tab and save.
5. Go to System > Settings, edit your store, and on the General tab set Theme to Hearth Home & Furniture Theme by Kavio Labs. Save.

Recommended settings

• Image sizes. Hearth is built for 4:5 portrait images. Suggested sizes: product list 480 x 600, product image 800 x 1000, popup 1200 x 1500, additional 160 x 200, related 480 x 600, cart 90 x 112, category 600 x 450 (room tiles). On OpenCart 4 set them in System > Settings > Image. On OpenCart 3 they are on the Listing & images tab of the Hearth settings page, with these values as defaults.
• Products per page: 12.
• Categories: set a category image on every room (used for the room tiles and the mega menu photo tile) and tick Show in top menu on the rooms you want in the navigation.
• Product photos: cut-outs or white-background photos look best in the studio wells. With Studio wells off, white backgrounds blend into the page tone.
• Home layout (Design > Layouts > Home): Hearth renders its home sections itself. Modules you add to the Home layout still show, below the Hearth sections.

Demo content

The repository includes a demo importer used for the screenshots in these docs (the "Alder House" store: 8 rooms, 25 subcategories, 55 products with options, attributes, filters, related products, specials, reviews and the Hearth home settings). It is a developer tool and is not part of the installable package.

Uninstall

Click Uninstall in Extensions > Extensions > Themes. On OpenCart 4, Hearth removes its events and settings, and a store that still uses Hearth is switched back to the stock theme first, so it never renders without a theme. Then delete the upload in Extensions > Installer.

Updates

Upload the new package in Extensions > Installer (OpenCart 4: uninstall the old version there first), then refresh modifications on OpenCart 3.

Configuration

All settings are on Extensions > Extensions > Themes > Hearth > Edit, per store. Tabs: General, Header & footer, Home page, Product data, Licence (and Listing & images on OpenCart 3).

General

Header & footer

Home page

Hearth's home page shows, in order: hero slider, promise strip, shop by room, popular categories, product tabs, two promo banners (off by default), Complete the look, new arrivals row, makers strip, reviews, ideas and inspiration (these last three are off by default). Modules of the Home layout follow.

• Links take a category id (20), a category path (20_27), an information page as i:<id>, or a URL. An empty link opens the Specials page.
• Images take a path below image/, for example catalog/room-1.jpg. Hero images are about 1312 x 560, promo images about 900 x 640, the Complete the look image about 1000 x 800. Without one, Hearth uses built-in illustrations where it has them.
• Hero: a slide shows when it has a title. Up to three slides, each with eyebrow, text, two buttons and an image. Autoplay stops on hover, on focus and with reduced motion.
• Promise strip: up to four bold part|small part pairs separated by ;.
• Shop by room: up to eight category ids in order, or empty for the top categories that have an image.
• Product tabs: three tabs. Empty product ids mean best sellers, latest products and products on special. A tab without products, or with an empty title, is not shown.
• Complete the look: two to six product ids. Pieces with a required option or no stock are listed but cannot be ticked; they open their product page.
• Reviews and quotes: write only real figures and quotes. Quotes use Quote|Name|Product.
• Switch Hearth home sections off to show only the modules of the Home layout.

Product data

Hearth reads normal OpenCart attributes (Catalog > Attributes) and options. Name them as below, or change the names on this tab.

Other options: New tag days (30, 0 = off), Low stock quantity (3, 0 = off), the returns line title and text, a fallback text for products without a delivery attribute, and Frequently bought together (on, with its title), which uses the product's Related Products: up to two that can be added with one click, with a live total.

Licence

Enter your licence key on the Licence tab. Fresh installs run a 14-day trial. Without a valid licence Hearth keeps working: the storefront and the admin panel are never blocked, and the settings page shows a reminder with the licence status. The licence check runs from the admin panel only, at most once a day. It sends the licence key, the theme id and version, your store host names and the OpenCart version.

FAQ

Does Hearth change core files or use OCMOD?

No. On OpenCart 4, Hearth is a theme extension that swaps in its templates and adds data through events. On OpenCart 3 it is a theme folder plus a theme extension that adds data through events. Neither version edits core files or adds OCMOD modifications.

I edited a template in Design > Theme Editor. Which one wins?

Your Theme Editor version. Hearth only uses its own template when the Theme Editor has no override for that page.

Can Hearth show real delivery dates?

It works them out from a delivery time attribute you fill in, such as "Ships in 2-4 days" or "Made to order: 5-7 weeks". Dates are an estimate for display: Hearth does not book delivery slots.

How do I show a sofa in several colours?

Create one product per colour and give them the same value in the Collection attribute, plus the colour name in the Colour attribute. Cards and the product page then show swatches that link between them.

What does "Complete the look" add to the cart?

The ticked products with one button. Products with a required option or without stock are shown but cannot be ticked.

Frequently bought together shows nothing. It uses the Related Products tab of the product. Add related products there, or switch the block off with Frequently bought together on the Product data tab.

Can I switch off parts of the home page?

Yes. Every home section has its own switch on the Home page tab, or switch off Hearth home sections to use only the modules of the Home layout.

Do I need product images with a white background?

No. White or transparent cut-outs look best in the studio wells. Turn Studio wells off if your photos are lifestyle shots.

Which fonts does Hearth load?

Outfit and Hanken Grotesk, served from your own store (SIL Open Font License 1.1). Hearth loads no fonts from third-party servers.

Does it work on phones?

Yes. The menu and search open in a slide-in drawer, and the home page stacks into one column (see the phone screenshot in the overview).

What happens when my licence expires?

Nothing changes in your store. The Hearth settings page shows a reminder until you renew. Updates and support need a valid licence.

Is there a demo store?

The screenshots in these docs come from the "Alder House" demo: 8 rooms, 25 subcategories and 55 products with illustrations made for the theme.