No matching chapters. Try another feature name or clear the search.
Merchant handbook
Build an editorial homepage
Add and reorder sections through the editor. Connect real resources before judging empty or placeholder states. The section catalog below includes every implemented section and its exact settings.
Hero and story media
Editorial hero supports art-directed images/mobile media, text, links and Shopify video with native controls. Story media offers a full-width narrative or video treatment. Choose its Background video preset (or Media layout → Background video) for silent looping footage behind editorial copy. Select a Shopify-hosted video and optionally a poster and mobile poster; choose Overlay for text over the film or Editorial frame for a clear film above a separate caption. Editorial frame uses the section color scheme, with a two-column caption on desktop and stacked copy on mobile; a small icon control sits on the film. Both background presentations use a 44px keyboard-accessible play/pause icon with a translated accessible name, rather than a large text button. Height caps the desktop film; mobile uses a landscape crop. The dark overlay applies only to Overlay. Set the content position, then add a heading, text and optional link. Leave the poster blank to use the video’s own preview image, which avoids a visual jump between unrelated scenes. Keep footage short and compressed; inspect the result on a mobile connection before publishing. Keep essential information in the text because background footage is decorative and muted. Use Standard player for narrated or instructional content with native controls, caption and transcript. Background mode does not use the standard caption/transcript fields. Autoplay starts only while visible and pauses offscreen or in a hidden tab. The section requests no video preloading until playback is allowed; browsers may still fetch metadata because preload is a browser hint. Reduced motion, data saving, global motion-off and the Theme Editor disable automatic playback; an explicit Play action remains available. A visible Pause control respects a shopper’s pause choice for that section instance. Blocked playback leaves the poster and a retry control. Without JavaScript or a selected video, the poster and text remain. Initial poster images load eagerly when first on the page; later posters are lazy. A mobile poster changes the still image crop, not the video source. For an editorial homepage, a short background film can connect product merchandising to journal or brand content. Keep the main image hero if the film provides supporting atmosphere. Supply short licensed footage without flashing imagery, and check white text contrast against every frame. Background settings affect only that layout; existing Standard player sections remain unchanged. Supply useful image alternatives and appropriate video captions. Do not use a mobile crop that hides the product or CTA. When a campaign shows packaged products, keep its branding, product name and pack size consistent with the destination catalog. For a wide image used in a square layout, check the entire package and label at mobile and desktop widths; use a separate mobile image when the crop cannot retain them. The edge-to-edge color-panel layout also uses that mobile image from 768 to 1023 pixels, where its image column remains narrow. Other hero layouts switch to their desktop image at 768 pixels. Preview both crops across mobile, tablet and desktop.
Hero compositions
In Editorial hero → Hero layout, Paired image study places a complementary detail photograph below the introduction on desktop and beside the primary photograph on mobile. Choose Detail image and an optional Detail image caption. When both the primary button label and destination are set, the detail photograph links to that same destination with a keyboard focus indicator; otherwise it remains an unlinked image. Paired-image sizing follows the actual columns and content width. The edge-to-edge color-panel image uses the full mobile width and its desktop column width. Hero image candidates never exceed the uploaded source width; upload a sufficiently detailed original for large or high-density displays. For example, a photograph displayed730px wide needs roughly1460 source pixels for a2× screen. Larger requested CDN sizes cannot add detail to a smaller upload; without a detail image it falls back to the ordinary split layout. Image side controls desktop placement. Mobile order controls the entire paired study: Text first puts the introduction above both photographs; Image first places both photographs above the introduction. Image-first markup also puts the detail-image link before the text links for a consistent mobile keyboard and reading order. Desktop keeps the asymmetric composition. Immersive image campaign fills a large opening with photography and keeps the heading, description and links over a dark lower overlay. Choose photographs with clear focal areas, check white text contrast and use the image focal-point controls; a separate mobile image can improve the crop. The primary image loads eagerly when this is the first section. Native video media automatically uses the split layout so its controls are not obscured by campaign copy. Edge-to-edge color panel places the introduction on a solid palette surface beside the image. All compositions share the existing links, heading levels, section color schemes and mobile media settings. Existing Split, Panorama and Heading above room image layouts are unchanged. For a product-led campaign, use a worn or contextual photograph and a front/detail view of the same product. Name that product in the caption and link the primary button to its product page; keep a secondary link to the wider collection. Place Featured products immediately after the hero to continue the selection. These image and URL settings are independent: when changing the campaign, update both and verify that the pictured item is available. Do not imply that styling pieces or an entire outfit are included. For a care-set campaign, use photographs of the actual set variants, label each pictured pack-size selection and link to the corresponding product. Explain that alternative sets are sold separately; use a secondary link for individual products. A combined photograph does not create a bundle or change inventory. Keep captions and links synchronized with the catalog when pack contents or availability change. For products sold by weight, assign each option its matching labelled image in Shopify Admin. Keep the product format and net contents consistent across category imagery, product cards, selected variants and cart. Matching photographic crops do not establish physical package dimensions. If an image is reused by several products, preserve its file and shared alternative text when updating just one product. Upload a separate product-specific image and assign it to the relevant option, then check the other products that use the original.
Collections and products
Featured collections can create a grid or mosaic using collection blocks and image/title overrides. Featured products uses selected products or a collection; individual choices take precedence. Product spotlight presents a selected product with editorial and available purchase controls. Collection, product, journal and editorial cards adapt their heading level automatically: with a section heading they are subheadings; without one they become section-level headings. Their visual size stays unchanged. Keep the page’s main heading in its hero or main template. To present two equally important choices, select two products in Featured products, choose Grid and set desktop columns to 2. Use product-note blocks to explain a verified difference such as whole-bean versus ground format; include available pack sizes only when supported by those products. The notes are merchant-entered and do not automatically track variant changes. Keep them synchronized with the catalog. Present equipment separately when it is not part of a bundle, and state what is included when a styling image shows other items. Do not infer roast, origin, flavour, certification or equipment compatibility from photographs or product names.
Narrative and text
Split narrative pairs photography with story, caption and detail blocks. Editorial text supports rich text and quotations. Use real attribution and permission for quotations. Rich text tables and code have contained scrolling where necessary.
Benefits, logos and testimonials
Editorial columns supports benefits, logo rows and testimonials through its available presets/blocks. Add only merchant-authorized logos, factual benefits and genuine testimonials. The theme does not supply customer review data.
Lookbook and comparison
Image lookbook places product-linked hotspots on a scene. Before/after comparison reveals two supplied images; use honest, comparable images and avoid unsupported results claims. Product comparison presents selected products and authored rows; it does not infer unprovided specifications.
Journal, newsletter and FAQ
Choose a blog for journal cards. Newsletter uses Shopify’s customer form and native feedback. FAQ uses accessible disclosures with authored answers. Avoid unnecessary duplicate newsletter forms; confirm mailing consent and delivery workflow separately. The Serein preset keeps its Point of view and Visual journal sections hidden initially to avoid repeating imagery and editorial messages. Their saved settings remain available: use the visibility control beside the section in the theme editor to show it again. Choose sections that contribute new product information or useful destinations; hiding a section does not delete its saved content.
Collection tabs and dated promotions
Collection tabs groups real collection grids behind accessible manual tabs with a no-JavaScript fallback. A dated promotion uses a fixed merchant-supplied deadline and an ended state; it does not create discounts or reset a deadline for each visitor.
Featured product scale
In Featured products choose two, three or four products per desktop row and one or two per mobile row. Tablet uses up to three. Explicitly selected products take precedence over a collection; choose a varied edit deliberately if a collection’s default order introduces new or sold-out QA examples. Larger cards request appropriately sized responsive images. Other product grids retain their own layout.
Responsive collection and spotlight images
Collection tiles request images for the selected grid or mosaic layout, including the full-width final tile on mobile when the item count is odd. Product spotlights account for the page margins, content-width setting and column gap. Native responsive sources preserve merchant images and focal points. Browsers may reuse a larger cached image shown elsewhere; these hints do not guarantee a fixed download size.
Editorial copy in presets
Presets that include an editorial text section provide editable, original introductory prose. Replace it with your own brand story in the Theme Editor. Demo maintenance fills only matching seeded sections with an empty text setting and preserves existing merchant prose. Demo copy does not assert certifications, customer reviews or product performance.
Room-led layouts
In Editorial hero, choose Heading above room image to place the heading, introduction and links above a wide photograph. Supply a mobile image when a separate crop is needed. In Featured collections, Compact category links creates a small image-and-title navigation row (four columns on desktop, two on mobile). Assign a real collection to make each tile clickable. Compact category thumbnails stay square, including the final item in an odd-length group. An odd final category spans the mobile row to leave room for its label and description; only grid and mosaic layouts give that final image a wide crop. Split narrative’s Edge-to-edge image and text panel connects the image to its text panel; combine it with a color scheme. These options use existing sections and remain reorderable; the design setting alone does not populate them. On wide screens the room image fills its frame with equal side margins, including after reaching its desktop height cap. The connected split-narrative panel is centred at the configured content width; its image and text remain joined, with equal outer margins on larger screens.
Add depth to the Living homepage
Combine the room hero and compact category links with Featured products, Split narrative, Product spotlight, Rich text and quote, and Journal cards. The expanded demo includes eight editable sections. Select a product for the spotlight, connect a published blog for journal cards, and link the editorial introduction to your About page. Keep repeated product stories purposeful and remove sections that do not serve your catalog.
Build a connected product edit
In Featured products, choose Composition → Lead product and companions for a selection of two to four products. The first product receives the larger image; the remaining products form a compact list on desktop and below it on mobile. One product or more than four falls back to your regular grid and column settings. Add Selection note blocks, select a product already included in this section, and write a short role and accurate selection note. Notes follow their matching product rather than its position, work in both compositions, and the first matching note is used. Unmatched notes are not shown. Reorder selected products to change the lead. Responsive photo sizes follow the editorial grid, page gutters and the Content width setting, including the wider companion images on tablets. This changes which image file the browser requests, not the composition or crop. Prices, links, availability badges and quick-add behavior continue to use real product data. No extra scripts or subscription/bundle mechanics are added. Preview long notes, sold-out products, missing images and translations before publishing. In a two-column mobile grid, an odd final product with a selection note spans the last row, with its image beside the note. Unannotated grids keep their existing layout. On desktop, the lead product card and companion column share the same height. The lead image fits without cropping inside its available space; captions and purchase controls remain visible. Mobile retains stacked cards and the configured image ratio.
Quote and logo selector
Add Editorial columns and choose Quote and logo selector. Add Testimonial blocks with an authorized quotation, source name, optional logo and source link. Selection is manual, with arrow keys, Home/End and no automatic rotation. Without JavaScript all quotations remain visible. Selecting a block in the editor shows its quotation. The demo statements express each brand’s point of view; they are not customer or publication endorsements.
Image-backed newsletter
In Editorial newsletter choose an optional background image, mobile crop and darkening strength. Without imagery the existing palette layout remains. The native customer form retains required email validation and Shopify success/error feedback. Verify actual subscription delivery in your store. With a background image, the heading and description are centered above a centered signup form. Email and Subscribe share a row on desktop and stack on narrow screens. The no-image layout is unchanged.
Editorial image gallery
Add Editorial image gallery and up to ten image blocks. Upload your licensed imagery or select a product as the image/link fallback. Add optional captions, image ratio and a profile/journal/collection link. The two-column mobile grid expands to five columns on desktop. This is a manually curated gallery and does not fetch social-platform content.
Service highlights
In Editorial columns enable Compact service row and add Benefit blocks with optional original line icons. Use factual shipping, returns, payment and support copy and link to your own pages. Do not advertise unconfigured services. Icons sit beside the text in compact mobile rows; the layout expands to two columns on tablets and four on desktop. Text wraps without truncation, links retain touch-friendly targets, and blocks without icons use the full text width. Use descriptive link labels such as Delivery information or Contact us. Compact styling only affects this section when enabled; it does not change other editorial columns.
Scroll motion
Theme settings → Layout and motion → Enable subtle motion controls native smooth anchor scrolling and one-time entrance reveals for editorial headings, featured product cards, collection tiles, stories and journal cards. Cards enter with a short stagger and collection photos gently enlarge on pointer hover. First-screen content is never delayed by an entrance animation. Sections already visible when motion initializes stay static; content farther down can reveal once as you reach it. Normal wheel/touch scrolling is preserved. Responsive images below the first screen use native lazy loading; priority hero images load eagerly. There is no scrolling library or image-loading dependency. Reduced motion, disabled motion and editor previews remain static. Content stays available without JavaScript; focusing an animating section cancels its movement.
Merchant handbook
Pages, footer and customer communication
Theme presentation and Shopify form handling are separate from your policies, legal obligations and fulfillment operations.
Footer
Open Footer in the Theme Editor to configure the brand description/short SEO copy, menu blocks, newsletter heading and optional description. The footer presents a newsletter column, editable menu columns and your brand story side by side on wide screens. On mobile the newsletter and brand story span the width while menu groups remain visible in two columns. Email input and subscribe button are stacked. Localization, privacy controls, policies and payment methods sit below the directory. Footer logo override is optional: leave it empty to use Theme settings → Branding → Shared logo. Set Footer logo width independently; mobile scales it down to fit. Without either upload, Text logo or the store name appears. Keep descriptions factual and useful. In Theme settings → Social links, enter complete https:// profile URLs for Facebook, X (Twitter), TikTok, Pinterest and Instagram. The footer shows a compact icon row beneath the brand description, with accessible names and keyboard focus indicators. Empty or non-HTTP(S) destinations are omitted; an entirely empty row is hidden. Existing Instagram and Pinterest settings are preserved. Links open in the same tab, and no social embeds, tracking scripts or platform requests are loaded by the icons. Localization appears only when multiple languages or countries are available. Cookie preferences, actual store policies and enabled payment icons retain their native behavior. Newsletter uses Shopify’s customer form with required email validation and server success/error feedback; verify actual subscription delivery on your store. Disabling the newsletter or removing menu blocks leaves no empty column. No developer-credit or affiliate link is added.
Newsletter invitation
In the Theme Editor → Footer group → Add section, choose Newsletter invitation. This optional non-modal corner panel uses Shopify’s customer form with editable content, palette and delay. Automatic display is once per tab session and off on mobile by default. Closing or pressing Escape dismisses it with no floating reopen button. Shoppers can still subscribe through the footer form. Automatic display waits while consent, navigation, cart, search suggestions or input editing need attention. It does not steal focus or lock scrolling; closing from inside restores the prior focus where available. If session storage is unavailable, automatic display stays off. With JavaScript disabled the invitation stays hidden and the footer form remains available. Selecting the section in the editor opens a preview; deselecting closes it. Server form feedback can reopen the panel after submission. No subscription is created until the shopper submits the form. The invitation also waits while Shopify’s native cookie banner or preferences dialog is visible.
Pages and contact
Use the standard page template for About, FAQ or service content; use the contact template for Shopify’s native contact form. Native validation and success/error feedback are implemented, but actual mail delivery must be verified in your store. Enable Editorial layout in the Page section for a wider illustrated About page, a larger opening paragraph and a separate, smaller scale for section subheadings. The underlying rich text remains editable in Shopify Pages.
Blog and articles
Select and populate a blog, add licensed featured images and useful original articles. Templates support pagination, metadata, topic/neighbor navigation and native moderated comments where enabled. Merchant moderation and spam handling remain store responsibilities.
Password, 404 and gift cards
Theme utility templates provide protected-store forms, recovery search and gift-card display/print features. Shopify’s mandatory client-transfer access screen appears before the theme and cannot be restyled by this theme. Preview the theme password template separately after authenticating.
Account and localization
Account links use Shopify’s customer-account experience. English and French interface and editor translations are supplied; translate your product and editorial content separately. Markets and currency formats follow Shopify settings. Review menus, forms and alignment in every language you offer.
Merchant handbook
Updates and ongoing care
Keep a backup of your storefront and review important shopping journeys whenever your theme, apps or catalog change.
Before updating
Duplicate the current theme and record important settings and custom code. Review the update notes supplied with your theme. Use an unpublished copy to check compatibility with your catalog and installed apps.
Review the updated copy
Confirm your header, menus, homepage sections, product options, cart, forms and language settings. Test at mobile and desktop sizes. Keep the current published theme available while reviewing the replacement.
Custom code and apps
Record custom edits and app-specific instructions before updating. Reapply only the changes you still need, and test each one. Avoid copying an older settings file over a newer theme without reviewing its compatibility.
Find the right guidance
Use documentation supplied with your theme version. Search this handbook for feature names or use the section and settings references below. Keep your own notes about store-specific configuration and customizations.
Section reference
Section and block catalog
41 section references. Use Add section when a section exposes an editor preset. Header, footer, resource templates and internal response sections have specialized placements; not every entry is a general homepage section.
Not found404
sections/404.liquid
Used within a template, section group or theme response; not available in Add section.
Announcement barannouncement-bar
sections/announcement-bar.liquid
Editor presets: Announcement bar
Enabled placements: {"groups":["header"]}
Appsapps
sections/apps.liquid
Editor presets: Apps
Blocks
App block
Compatible installed apps can provide their own controls. Theme code does not define those settings.
Articlearticle
sections/article.liquid
Used within a template, section group or theme response; not available in Add section.
Blogblog
sections/blog.liquid
Used within a template, section group or theme response; not available in Add section.
Cart drawercart-drawer
sections/cart-drawer.liquid
Used within a template, section group or theme response; not available in Add section.
No individual settings are declared here.
Cartcart
sections/cart.liquid
Used within a template, section group or theme response; not available in Add section.
Collection tabscollection-tabs
sections/collection-tabs.liquid
Editor presets: Collection tabs
Excluded placements: {"groups":["header","footer"]}
Blocks
Collection
collection
Collectioncollection
sections/collection.liquid
Used within a template, section group or theme response; not available in Add section.
Collections gridcollections
sections/collections.liquid
Editor presets: Collections grid
Contact formcontact
sections/contact.liquid
Used within a template, section group or theme response; not available in Add section.
Enabled placements: {"templates":["page"]}
Custom Liquidcustom-liquid
sections/custom-liquid.liquid
Editor presets: Custom Liquid
Custom sectioncustom-section
sections/custom-section.liquid
Editor presets: Custom section
Blocks
@theme
No individual settings are declared here.
Dated promotiondated-promotion
sections/dated-promotion.liquid
Editor presets: Dated promotion
Excluded placements: {"groups":["header","footer"]}
Editorial columnseditorial-columns
sections/editorial-columns.liquid
Editor presets: Benefits, Logo row, Testimonials, Quote and logo selector, Service highlights
Excluded placements: {"groups":["header","footer"]}
Blocks
Benefit
benefit
Logo
logo
Merchant testimonial
testimonial
FAQeditorial-faq
sections/editorial-faq.liquid
Editor presets: FAQ
Excluded placements: {"groups":["header","footer"]}
Blocks
Question
question
Editorial image galleryeditorial-gallery
sections/editorial-gallery.liquid
Editor presets: Editorial image gallery
Excluded placements: {"groups":["header","footer"]}
Blocks
Image
image
Newslettereditorial-newsletter
sections/editorial-newsletter.liquid
Editor presets: Newsletter
Excluded placements: {"groups":["header","footer"]}
Rich text and quoteeditorial-text
sections/editorial-text.liquid
Editor presets: Rich text and quote, Editorial quote
Excluded placements: {"groups":["header","footer"]}
Featured collectionsfeatured-collections
sections/featured-collections.liquid
Editor presets: Featured collections, Collection mosaic
Excluded placements: {"groups":["header","footer"]}
Blocks
Collection
collection_tile
Featured productsfeatured-products
sections/featured-products.liquid
Editor presets: Featured products
Excluded placements: {"groups":["header","footer"]}
Blocks
Selection note
product_note
Before / after imagesimage-comparison
sections/image-comparison.liquid
Editor presets: Before / after images
Excluded placements: {"groups":["header","footer"]}
Image lookbookimage-lookbook
sections/image-lookbook.liquid
Editor presets: Image lookbook
Excluded placements: {"groups":["header","footer"]}
Blocks
Product hotspot
hotspot
Journal cardsjournal-cards
sections/journal-cards.liquid
Editor presets: Journal cards
Excluded placements: {"groups":["header","footer"]}
Pagepage
sections/page.liquid
Used within a template, section group or theme response; not available in Add section.
Passwordpassword
sections/password.liquid
Used within a template, section group or theme response; not available in Add section.
Product comparisonproduct-comparison
sections/product-comparison.liquid
Editor presets: Product comparison
Excluded placements: {"groups":["header","footer"]}
Blocks
Comparison row
row
Product recommendationsproduct-recommendations
sections/product-recommendations.liquid
Editor presets: Product recommendations
Enabled placements: {"templates":["product"]}
Product specificationsproduct-specifications
sections/product-specifications.liquid
Editor presets: Product specifications
Enabled placements: {"templates":["product"]}
Blocks
Specification row
specification
Product spotlightproduct-spotlight
sections/product-spotlight.liquid
Editor presets: Product spotlight
Excluded placements: {"groups":["header","footer"]}
Blocks
App block
Compatible installed apps can provide their own controls. Theme code does not define those settings.
Custom Liquid
custom_liquid
Productproduct
sections/product.liquid
Used within a template, section group or theme response; not available in Add section.
Excluded placements: {"groups":["header","footer"]}
Blocks
App block
Compatible installed apps can provide their own controls. Theme code does not define those settings.
Title
title · Per-type limit: 1
Price and availability
price · Per-type limit: 1
No individual settings are declared here.
Introduction
introduction · Per-type limit: 1
Purchase controls
purchase · Per-type limit: 1
Description
description · Per-type limit: 1
Text
text
Collapsible information
accordion
Pickup availability
pickup · Per-type limit: 1
No individual settings are declared here.
Size or material guide
guide
Custom Liquid
custom_liquid
Inventory information
inventory · Per-type limit: 1
Personalization field
personalization
Shipping and returns
policies · Per-type limit: 1
Key product facts
key_facts
Linked products
linked_products
Recently viewed cardrecently-viewed-card
sections/recently-viewed-card.liquid
Used within a template, section group or theme response; not available in Add section.
No individual settings are declared here.
Recently viewedrecently-viewed
sections/recently-viewed.liquid
Editor presets: Recently viewed
Excluded placements: {"groups":["header","footer"]}
Searchsearch
sections/search.liquid
Used within a template, section group or theme response; not available in Add section.
Editorial heroshell-index
sections/shell-index.liquid
Editor presets: Editorial hero
Excluded placements: {"groups":["header","footer"]}
Split narrativesplit-narrative
sections/split-narrative.liquid
Editor presets: Split narrative
Excluded placements: {"groups":["header","footer"]}
Blocks
Detail
detail
Story mediastory-media
sections/story-media.liquid
Editor presets: Story media, Featured video, Full-width story, Background video
Excluded placements: {"groups":["header","footer"]}