Usage
The hero slider and the promo banners
Section titled “The hero slider and the promo banners”The hero slider and the two promo banners are banners (Marketing → Banners), shown by the blocks “Hearth hero” and “Hearth promos” on the homepage (Website → Themes → Layouts → Homepage).
- Use Graphic banner with a wide room photo (1920 × 860 px or larger for the hero, about 1300 × 760 px for promos). The banner name is the headline, the banner URL is the main button.
- On the banner page, the section Hearth theme: chapter details (added by the theme) holds the eyebrow (“New autumn collection”), the short text under the headline, the button label, a second button (label and URL) and an optional image for phones. Darker overlay behind the text turns a promo card dark.
- A Text banner shows its own HTML on the floating card instead.
The hero shows one slide at a time with a counter, progress bars and arrows. It advances on its own (block setting “Seconds per slide”) and pauses while the pointer is over it or a button has focus. Visitors who prefer reduced motion always see the first slide until they choose another.
Rooms and categories
Section titled “Rooms and categories”- Shop by room shows your top-level categories with their category image (a room photo works best, 4:3) and the product count. The block “Shop by room” lists them; fill it manually to choose and order the rooms.
- Popular categories shows any categories (also subcategories) as square studio wells with their image.
- The mega menu shows the subcategories of each top-level menu item in columns and the category image of that item as a “Shop the room” tile on the right (desktop only).
- On category pages the subcategories appear as chips with their images; the first paragraph of the category description is the lead under the title.
Product information on cards and product pages
Section titled “Product information on cards and product pages”Hearth reads these product features. Create them in Products → Features with these feature codes (or use your own features with the names in brackets):
| Feature code (name) | Type | Used for |
|---|---|---|
HE_MATERIAL (Material) |
Multiple checkboxes | The material line on cards (“Boucle · Solid oak”, the first two values) and the Material filter. |
HE_COLOUR (Colour) |
Select box | Colour swatches: the variation feature of colour variations, and the Colour filter (dots). |
HE_WIDTH, HE_DEPTH, HE_HEIGHT (Width, Depth, Height) |
Number | The dimensions summary “W 220 × D 95 × H 78 cm” on product pages and a width range filter. |
HE_SEAT (Seat height) |
Number | “seat height 44 cm” next to the dimensions. |
HE_WEIGHT (Weight) |
Number | Shown in the specifications tab. |
HE_DELIVERY (Delivery time) |
Select box | The delivery line on cards and the delivery dates on product pages. |
HE_ASSEMBLY (Assembly) |
Select box | The assembly line of the product page delivery panel. |
Colour swatches
Section titled “Colour swatches”- Variations (core Product variations add-on): when the variation feature is a colour (feature name with “Colour” or “Color”), product pages show round swatches instead of the select box, and cards show one dot per variation that links to it.
- Options: a select option named Colour, Fabric or Finish becomes option chips with a dot on product pages and dots on cards.
- Dots take their colour from the variant name: common colour words (ivory, oat, sage, ink blue, terracotta, mustard, charcoal, rust, oak, walnut, black, brass, stone, clay and many more). Unknown names show a neutral dot with the name as a tooltip.
Delivery times and assembly
Section titled “Delivery times and assembly”Write the delivery time as text with numbers and a unit, for example “Ships in 2-4 days”, “Ships in 1-2 weeks” or “Made to order: 5-7 weeks”. The product page shows “Delivered between Fri 24 Oct and Tue 28 Oct”: the shopper’s browser adds the dispatch window (business days) and two to four days on the road to today’s date. Values with “to order” show a tool icon on cards instead of the truck. Without a number the text is shown as it is.
Complete the look
Section titled “Complete the look”The block “Complete the look” (homepage) shows a room photo next to up to five products, each with a checkbox, and a live total with a button “Add N pieces to cart”. Fill the block manually with the pieces in the photo and set the Room photo URL, Title and Caption in the block settings. Select options are added with their first value; products without a price or out of stock are shown without a checkbox.
Frequently bought together
Section titled “Frequently bought together”Product pages show this product and up to two popular products from the same top-level category (room) but another subcategory, with checkboxes, the total and one add button; the options chosen on the page go in with it. Stores that use the Kavio Frequently Bought Together add-on see that add-on’s block instead.
Multi-Vendor
Section titled “Multi-Vendor”- Shop by maker (homepage) shows your vendors with their logo, city, rating and product count; the static maker wordmarks of the block “Makers we work with” are hidden while vendor cards are shown.
- Vendor pages open with a shop header (logo, name, rating, product count, city and the start of the shop description) and the vendor’s search, above their products and filters.
- Cards show “By
” under the price.
Static sections
Section titled “Static sections”The top bar promises, the promise strip, the maker wordmarks, the review summary, the category promo tile and the footer brand column are HTML blocks: edit their text in Website → Themes → Layouts (block content).