A considered storefront, made yours
A good place
to begin.
Hearthline gives home and lifestyle collections room to breathe. This guide takes you from the first preview to a store that feels like your own.
A setup guide for Hearthline 0.1.0. Submitted to Shopify for review; approval and commercial availability are pending.
Set up your first preview →01 / Getting started
Install & preview
- After release, add Hearthline through its official Shopify Theme Store listing. Authorized reviewers can use their supplied review copy in the theme library.
- Open the new theme in the theme editor. Start with a preview and keep a copy of your current theme.
- Add products and collections in Shopify, then select them in the theme sections. Upload your own images and write your store's copy.
- Check the home page, a collection, a product with options, search, and the cart on a phone and a desktop.
- Publish from the theme library when your content, settings, and checkout are ready.
The ZIP contains the theme. Products, inventory, pages, policies, navigation menus, and payment settings belong to your Shopify store and are managed separately.
Start with four decisions
Choose a logo, two readable fonts, a small color palette, and one image that expresses your store. Set those first; then build the rest of the home page around a focused collection.
02 / Your identity
Make it yours
Open Theme settings in the editor. Choose Body font and Heading font under Typography. Use Type scale to adjust their overall size.
Under Colors, set the page background, surfaces, text, borders, accent buttons, and keyboard focus outline. Keep text clearly readable on each background, including the footer and buttons.
Layout controls the maximum page width, side margins, and vertical section spacing. Components controls card and button corners, card treatment, button style, and product image shape. Motion controls reveal effects and their intensity.
The logo and primary menu are in the Header section. The favicon is under Theme settings → Brand. Social profile links are under Social links.
03 / The page, piece by piece
Build your pages
Use the page selector at the top of the theme editor to choose a template. Add, reorder, or remove sections in the sidebar. A template can serve several products or pages, so review every item that uses it before changing its layout.
Header and Footer are shared across storefront pages. To add a menu, create it in Shopify's navigation area, then select it in the Header or a Footer menu block. The mobile menu uses the same primary menu.
A home page with a clear rhythm
Try an Editorial hero, a Featured collection, and an Editorial split. End with a useful FAQ or Newsletter section. Give each section a purpose and let your strongest products do the talking.
| Section | What to put here |
|---|---|
| Editorial hero | Your lead image or Shopify-hosted video, a short heading, and up to two links. Choose split or background media, then check the crop and contrast on mobile. |
| Featured collection | Select a collection, choose the product count and desktop columns, and optionally enable horizontal scrolling on mobile. |
| Editorial split | Pair one image with a concise story. Control the image position, shape, and background. |
| Editorial collage | Build an image-led composition using its blocks. Add only the images and links you need. |
| Shoppable lookbook | Advanced setup requiring additional testing: hotspots are outside the demonstrated launch configuration. Check product links, image positions, keyboard and touch behavior before using them. |
| Featured product | Highlight one selected product with its image, price, description, and a link to its product page. App and Custom Liquid blocks can extend this section. |
| Brand manifesto | A statement about your store, with supporting copy and an optional link. |
| Editorial quote | A clearly attributed quote or studio note. Use customer language only when you have a real quote and permission to publish it. |
| Customer perspectives | Your actual customer feedback. Remove the section if you do not yet have content to use. |
| Comparison table | Compare up to three options. Keep row labels brief and use verifiable product details. |
| Image banner / Image with text | A focused image and message, with an optional destination link. |
| Rich text | Headings, copy, and an optional button with width and alignment controls. |
| Multicolumn benefits | A short group of practical reasons to choose your products or store. |
| Logo list | Logos you are authorized to show. Add meaningful alternative text. |
| Promotional banner | A current promotion with accurate terms and a working destination. |
| FAQ | Answers to questions about your products, delivery, care, or store policies. |
| Blog posts | Select a blog and choose how many articles to show. Publication dates and a view-all link are optional. |
| Newsletter | A clear reason to subscribe. Use your actual email program and an accurate description of what subscribers will receive. |
| Contact form | A heading, introduction, and native Shopify contact form. The phone field is optional. |
| Custom Liquid | Store-specific markup or an integration supplied by a trusted developer. Review changes in a duplicate theme before using them. |
| Announcement bar | One short message with an optional link and accessibility label. |
| Header / Footer | Your logo, navigation, store statement, policy and social links, newsletter, localization controls, and supported payment marks. |
Page-specific sections
Product information, Collection products, Collection list, Search results, Cart, Page, Blog posts, Article, Password, and Page not found provide the main content for their matching templates. Related products can display either related or complementary recommendations. Predictive search supplies results inside the header search panel.
Products and collections chosen in a section must be available to the Online Store channel. Some empty merchandising sections stay hidden on the storefront until you select content.
04 / Product detail
Products & options
Open a product template and select Product information. Use its blocks to arrange the title, price, SKU, availability, options, quantity, buy buttons, pickup information, description, accordions, and supporting content.
Options, prices, and availability
Create options and variants in the product's Shopify record. The theme displays separate option groups and asks Shopify for the selected combination's price, media, availability, and quantity rules. Unavailable choices are visually marked. When Shopify supplies color or image swatches, the option group shows them.
Assign a featured image to a variant to bring it forward when that variant is chosen. Compare-at prices and unit pricing come from Shopify's product data. A product with different prices displays a starting price in product cards.
Product-card alternate images
Place the intended alternate photograph second in the product record. Rollover is conditional on fine-pointer input and the applicable subtle motion setting. Essential information stays visible without hover, including on touch devices.
Images, video, and 3D
Upload product media to the product record. The product gallery supports images, hosted and external videos, and 3D models. Use the Media shape and Desktop gallery layout controls to suit your collection. Where the device supports it, a model can offer a view-in-your-space action.
Keep important details inside the center of images and provide descriptive alternative text. Video controls let visitors decide when to play. Use a clear poster image so the gallery remains useful before playback.
Purchase and pickup controls
The Buy buttons block includes dynamic checkout and payment terms controls. Their availability depends on the store's payment configuration and the customer. Set local pickup locations and stock in Shopify; the theme displays the selected variant's pickup information when it is available.
Related and complementary products
Use the Related products section and its Recommendation type setting. Manage recommendations with Shopify Search & Discovery. The section displays products returned by Shopify and stays empty when none are available.
Add app blocks through the editor when an installed app provides them. Review the app's settings and its effect on layout, speed, and accessibility.
05 / Finding the right thing
Search & collections
The header search offers product suggestions as a visitor types. Pressing Enter opens the full results page. Visitors can use the keyboard to enter suggestions and Escape to close them.
Create collections in Shopify and assign product images, descriptions, and products. In Collection products, choose the column count, products per page, and whether vendor information and the description appear.
In Collection list, choose the collections to feature and their order. Leaving the selector empty displays every collection. Use H1 — page title for the main collection-directory heading and H2 — section title when placing the section within another page. Keep one main heading per page.
Configure the filters you want to offer in Shopify Search & Discovery. The submitted build displays filters supplied by Shopify on collection and full search-results pages. Sorting and filtering depend on the current collection and its available product data.
Use descriptive menu labels and a small number of clear destinations. Check that every link in the Header, Footer, hero, banners, and lookbook points to the intended page.
06 / A wider audience
Languages & currencies
Configure your markets, supported countries, currencies, and published languages in Shopify first. Then open Footer and enable Show country and currency selector and Show language selector.
A selector appears when there is more than one available choice. Visitors choose their preferences and apply them with the form button. Currency availability and checkout behavior depend on Shopify Markets and your payment configuration.
Storefront interface wording can be edited with Shopify's theme language tools. Product descriptions, pages, and other store content need their own translations. Preview longer translations on mobile and check text direction where applicable.
When Shopify reports that taxes are included, the product page and cart display that information. Configure taxes in Shopify; changing the theme does not change tax calculations.
07 / The useful details
Forms & gift cards
Contact requests
Create a page, assign the contact template, and add it to a menu. The native Shopify form collects a name, email, message, and optional phone number. Check the store's notification address and run a controlled delivery test before directing customers to it.
Newsletter signup
The Newsletter section and Footer signup use Shopify's customer form. Confirm your email marketing setup, consent wording, and confirmation flow. A successful form submission does not by itself create a complete welcome-email program.
Gift card recipients
For a Shopify gift card product, the product form offers a recipient option. The buyer can enter the recipient's email, an optional name and message, and an optional send date. Leaving the date empty requests immediate delivery through Shopify. Scheduling is limited to 90 days ahead.
Recipient details stay with the cart item and are displayed in the cart. The theme does not issue gift cards or send their emails itself; review Shopify's gift card notification settings and test the complete flow in a development store.
Cart
Visitors can update quantities, remove items, and proceed to checkout. Enable an order note in the Cart section when it is useful for your business. Product properties, selling plans, and applied discounts appear when Shopify supplies them.
08 / Care and attention
Accessibility & speed
- Write useful image descriptions, clear link labels, and short, logical headings.
- Check text, buttons, borders, and the focus outline against their backgrounds after changing colors.
- Walk through navigation, option selection, search, and the cart using only a keyboard. Keep the visible focus outline.
- Review mobile layouts, longer translations, and a browser zoom of 200%.
- Upload appropriately sized images, favor a focused first screen, and avoid adding several competing videos or apps.
- Use Motion settings to reduce visual movement. The theme also respects the visitor's reduced-motion preference.
Measure the populated store after content and apps are configured. Scores depend on the page, device, network, app scripts, and media. A theme code check does not replace a real storefront performance or accessibility test.
09 / When something needs attention
Troubleshooting
Use a duplicate preview, confirm the version and change one thing at a time. Preserve your live theme while investigating.
On a small screen, scroll the table sideways to see all three columns.
| Symptom | First checks | Proof to collect / escalate when |
|---|---|---|
| Missing product/section | Correct template and preview; section enabled; resource selected; Online Store availability | URL, section name, version; escalate if a configured available resource still disappears |
| Filter missing or empty | Search & Discovery filter configuration; catalog values; collection/search context | Filter name, data example, expected result; escalate if valid data is not rendered |
| Wrong variant price/image | Actual product combination, inventory and featured-media mapping; retry after a failed selection request | Steps and expected SKU/media; urgent if wrong item/price reaches cart |
| Add to cart fails | Inline error, selected option, stock, quantity rule, gift-recipient requirements | Browser, steps, message; contact support urgently if all eligible products cannot be purchased |
| Quantity/removal behaves incorrectly | Reproduce single line then multiple lines; distinguish selling plans/properties | Before/after cart state without customer data; escalate duplicate/wrong lines immediately |
| Cart wraps at tablet width | Confirm your theme version and check the layout on your tablet or at the affected browser width | Send a screenshot, theme version and device or browser width |
| Image crops awkwardly | Product image fit, media ratio, focal point, source composition | Desktop/mobile comparison; show subject and chosen shape |
| Hover image absent | Second image exists; fine pointer; subtle motion setting | Setup notes; touch absence alone is expected |
| Recommendations absent | Related vs Complementary setting, eligible products and configuration | Product and configuration; distinguish no data from network/rendering failure |
| Menu or search traps focus | Reproduce with keyboard, Escape and resize | Focus sequence, browser and width; prioritize inability to continue shopping |
| Video/model fails | Valid media and poster; target device/network; supported controls | Media type, console error sanitized, fallback behavior; no universal AR promise |
| Currency/language control hidden | More than one choice; Footer toggles; published Markets/languages | Actual configured choices; single choice is expected to remain hidden |
| Contact email not received | Form success/error, store notification settings, spam and provider behavior | Timestamp and test label; do not ask for an inbox password |
| Newsletter welcome email missing | Marketing-service setup, consent/confirmation flow | Submission result and service responsibility; signup alone is not a welcome workflow |
| App-only layout failure | Duplicate theme with app block disabled in that copy, fresh preview | App name/version and minimal reproduction; coordinate with vendor without blaming prematurely |
| Editor differs from preview | Saved state, intended theme/template, lifecycle and fresh preview | Add/remove/reorder/save/reload steps; no live-theme save to test a guess |
| Low speed score | Check the actual storefront page, theme version, image/video size and installed apps | Share the report, page and test conditions; measure your actual storefront rather than its password page |
For support, include expected and actual behavior, steps, affected page, version and a sanitized screenshot. Never include customer records or credentials.
10 / Keeping your store in good shape
Updates
Before an update, duplicate your current theme and record any custom code or app changes. Install the new version as a separate theme, transfer the settings you need, and review your key pages before publishing.
Review version 0.1.0
The current candidate adds separate product option groups, swatch support, refreshed variant details, predictive product search, localization controls, gift card recipient fields, complementary recommendations, and 3D media controls to the Hearthline editorial layouts.
Before publishing your store, review the populated storefront with your own products, content, apps, and Shopify settings. Theme Store acceptance and a commercial availability date have not been confirmed.
Common questions
Hearthline FAQ
Is Hearthline available to buy?
It is under Shopify review. Approval and a release date have not been announced. The submitted listing price is USD $380; confirm the published listing when available.
Who is it designed for?
Home and lifestyle merchants with curated assortments, including decor, textiles, tableware and furniture. Fit depends on your catalog and required workflows.
Does it include demo products, photographs or reviews?
No. Add your own product data, licensed photography and authentic content. Demo products are fictional and are not endorsements.
Do I need code to arrange the pages?
The documented settings, sections and blocks are configured in the theme editor. Bespoke functionality can require development.
Where are the logo and favicon?
Logo is in Header; favicon is in Theme settings → Brand.
Can I change fonts and colors?
Yes. Use the theme's Typography and Colors settings and check readability, focus and layout afterward.
Can I make a nested menu?
Create the structure in Shopify's navigation area, choose Primary menu in Header, and test both desktop and mobile presentations.
Why does choosing a finish not change the image?
Assign the correct featured image to that variant in the product record. Test the exact combination in preview.
How does the second image on a product card work?
Use the second product image for the alternate view. The hover effect is conditional on fine-pointer input and the applicable subtle motion setting. Mobile shopping does not require hover.
Does it include zoom, quick buy or a cart drawer?
Those are not offered as verified features of this release. Hearthline uses a cart page.
Where do product swatches come from?
Shopify supplies the option swatch data. Text options still need accurate product configuration.
Where do care and delivery details go?
Use the product description and Collapsible information blocks. Enter your own facts and policies; these do not calculate delivery dates.
Are search and collection filters included?
The submitted build displays Shopify-provided filters on both. Populate the relevant catalog attributes and configure filters in Search & Discovery.
Why are recommendations missing?
Check eligible products, the recommendation configuration and the section's Related/Complementary setting. Shopify may return no results.
Can I create a FAQ page?
Add the FAQ section to a page template and enter Question blocks, then assign that template to the page.
Does it support video or 3D?
The product gallery has those controls. Upload valid media and test the target devices; device-specific model/AR behavior is not universal.
Can I use lookbook hotspots immediately?
Hotspots need additional setup and testing and are outside the demonstrated launch configuration. Check the populated layout, crops and touch/keyboard behavior before relying on them.
Will every app work?
App insertion points are available, but each integration needs its own preview test and app-vendor support where appropriate.
Does the theme send newsletter or gift-card emails?
Shopify and your email/subscription services handle delivery. Configure and test those systems separately.
Is it translated into five languages?
No completed five-language pack is claimed. Configure Shopify languages and translate store content and interface labels.
Does buying a theme guarantee faster sales or a particular speed score?
No. Content, apps, traffic and store configuration affect results. Assess your own populated store.
What help is included?
Setup questions and investigation/fixes for theme defects. Bespoke design and third-party work are separate; paid extras are not a condition for receiving bug support.
How soon will someone respond?
Brandon handles support Monday–Friday and replies within two business days. An automatic receipt confirms delivery; it is not the substantive answer.
What should I include in a request?
Store URL, theme version, affected page, expected/actual behavior, steps, device/browser and sanitized screenshot links. Share only what is needed and never include credentials or customer records.
Where do I ask for help?
Use the Hearthline support form. You can reply with follow-up details to happythemessupport@gmail.com. Keep the original request context together.
11 / We're here to help
Get support
HappyThemes provides support for Hearthline setup and theme issues. Brandon handles support Monday–Friday and replies within two business days. Submit a request below; a copy is emailed to you for reference. For follow-ups, include the original request details so we can keep the investigation together.
Open the Hearthline support form →
Prefer email? Write to happythemessupport@gmail.com. For follow-ups, include your original request details.
What support covers
Support includes questions about Hearthline's settings and built-in features, help reproducing theme errors, and fixes for confirmed theme defects. Custom design or code work, third-party app changes, store administration, and content entry are separate services and are not included in the theme price.
For a store issue, begin with a preview of an unmodified copy of Hearthline. Do not disable apps or publish a different theme on a live store just to troubleshoot. If the issue needs access to your store, we will explain the scope before requesting Shopify collaborator access.
Help us reproduce the issue
- Your store URL, such as
your-store.myshopify.com, and Hearthline version. - The affected page and a short description of what you expected and what happened.
- The steps that trigger the issue, including the product options used, and the device or browser.
- An optional viewable screenshot link with private details removed, and any relevant app or customization. The form accepts links rather than file uploads.
Do not include passwords, access tokens, payment details, customer records, or gift-card codes. Only send information needed to explain the issue. Support details are used to investigate and reply to your request.
If checkout or the store is unavailable
Describe the impact at the beginning of your message and include the affected page. Shopify's own help channels handle platform outages, billing, payments, and account access. For a suspected theme issue, keep a working published theme available while we investigate a preview.
Safe customizations
Duplicate your theme before editing its code, and keep a record of your changes. We can explain Hearthline's built-in behavior; custom code and third-party integration work need their own review. A Shopify Partner can help with custom development.