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. Theme Store acceptance and commercial availability have not been confirmed.
Set up your first preview →01 / Getting started
Install & preview
- In Shopify, open Online Store → Themes and upload the supplied theme ZIP to your 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, an Editorial split, and a Shoppable lookbook. 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 | Select a scene image and add product hotspot blocks. Set each position to match the object in the image; check those positions on a phone. |
| 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.
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 theme displays filters supplied by Shopify. 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
A section or product is missing
Check that the section is enabled, its product or collection is selected, and that content is available to Online Store. Confirm you are viewing the right template and the intended theme preview.
A variant will not load
Use the retry button shown beside the purchase area. If it still fails, reload the page and check the option combination in Shopify. Purchase controls stay unavailable until the current selection can be verified.
An item cannot be added to the cart
Read the message below the buy buttons. Check stock, quantity rules, the selected option, required recipient fields, and the product's availability. Try in an unmodified copy of the theme to help identify an app conflict.
My recommendations are empty
Confirm that eligible products exist and that Search & Discovery has recommendations for the selected product. Choose Related or Complementary in the section to match the recommendations you configured.
I cannot see a language or currency selector
Enable the relevant Footer setting, then confirm Shopify has more than one available country or published language. One available choice does not need a selector.
A contact or signup message did not arrive
Check whether the form displayed an error or success message. Verify store notification and email marketing settings, spam folders, and any app responsible for follow-up emails.
My image crops differently on mobile
Check the selected media shape and layout. Move essential content toward the center of the source image, choose a less restrictive ratio, or use a layout that gives the image more room.
A button appears without the right label
Review the section's button label and link together. If you do not need the action, remove both. Check theme translations when only one language is affected.
The editor behaves differently from the storefront
Save the theme, open a fresh preview, and confirm the preview is for that same theme. App previews and recommendations can depend on store data. Include both the editor and storefront behavior when reporting a problem.
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.
Release candidate 0.1
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.
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.