Skip to Content
DocumentationTemplatesHome page

Home Page

The Home page template is the storefront landing page. It combines Fit Check’s strongest merchandising sections: Hero banner, Fit Check grids, product links, product carousel, editorial sections, FAQ, marquee, review carousel, countdown, and location carousel.

Setup Order

  1. Open the Home page templateIn the theme editor top bar, choose Home page.
  2. Configure the first screenStart with the Hero banner and make sure the heading, call to action, media, overlay, and mobile height work together.
  3. Connect products and collectionsAssign real products, collections, or custom links to product-link blocks, product carousel items, and collection carousel items.
  4. Review editorial sectionsTune Rich text, Showcase, FAQ, marquee, review carousel, countdown, and location carousel sections for the store launch story.
  5. Test mobile firstCheck the first screen, product links, carousel controls, and section spacing on mobile before publishing changes.

Default Composition

The default Home page template includes these section families:

SectionPurpose
Hero bannerFirst-screen campaign message, media, and call to action.
Fit Check gridShoppable image grid using product-link blocks.
Fit Check imageFocused shoppable image composition.
Products carouselProduct-card carousel with media, title, price, and swatches.
Fitcheck explorerEditorial product-link rows for guided discovery.
Fitcheck carouselScrollable shoppable media carousel.
ShowcaseMedia-led storytelling section.
Rich textBrand copy, editorial copy, or campaign explanation.
Collections carouselCollection discovery carousel.
FAQCommon customer questions with accordion rows.
Marquee textShort repeated announcement or brand statement.
Review carouselCustomer quote carousel.
CountdownEvent, launch, or promotion timer.
Location carouselStore, event, or stockist location cards.

Content Checklist

Video review cards

Choose a product once in Product link card. Set the optional Button’s Link destination to Same as product card to follow that card’s product or custom link automatically. New buttons use this mode; existing buttons retain Custom link and their saved URLs. Use exactly one Product link card per Review for automatic linking. With no valid destination or multiple product cards, the automatic button is hidden from shoppers; the editor keeps a disabled preview. Choose Custom link for an independent destination. A blank button label hides the button. View Product opens the product page; it does not add to cart.

In Review carousel, add a Review block with a Video, Product link card, and Button, in that order. The video sits above one shared content panel.

  • The Review block’s Background color, Card padding, and Card border radius style the lower panel. Content gap controls spacing between its blocks and between the media and panel.
  • Leave Use product card backgrounds off for a single, continuous panel. Turn it on to use each Product link card’s own background, border, corner radius, padding and backdrop settings. Product text, image, price and link settings remain available in either mode.
  • Standard buttons fill the panel width. Choose the button’s custom style to control its desktop/mobile width and appearance independently.
  • The Video block still controls its media styling and optional Show controls setting. Reviews without videos keep their existing layout.
  • For uploaded videos, enable Autoplay to start the centered video muted when the section enters view. With Autoplay off, playback waits for a shopper action. Reduced-motion visitors also start with playback paused.
  • Selecting another video moves its card toward the center and pauses the previous video. Carousels with three or more uploaded-video reviews loop continuously, so the first and last videos can be centered with neighboring previews. Smaller carousels and provider embeds retain bounded scrolling. While swiping or scrolling horizontally, focus and playback switch together to the card nearest the center. The carousel remembers the shopper’s pause and sound choices while they browse; videos pause when the section leaves view or the browser tab is hidden. Cards do not advance automatically.
  • With Show controls enabled, the selected uploaded video uses one pair of sound and play/pause buttons in the top corner. These replace the native control bar in the review carousel. Include captions in your uploaded clips so muted playback remains useful.
  • Automatic video ratios show the selected uploaded video uncropped in a 9:16 frame on desktop and mobile, with shorter cropped previews beside it. Card widths and the carousel’s reserved height stay steady. Custom aspect ratios remain unchanged. On mobile, the one-column video layout reveals neighboring previews beside the active card; a fresh carousel with three or more reviews starts in the middle. The two-column setting remains available. New Reviews sections default to no navigation arrows and square video corners.
ContentWhat to check
MediaReplace blank image/video settings with real campaign media before using the section in a live store.
Product linksAssign products or custom links wherever product-link blocks are visible.
Calls to actionKeep primary actions pointed at active collections, products, pages, or search paths.
Collection cardsUse populated collections so cards have meaningful titles and imagery.
FAQ rowsReplace generic questions with store-specific shipping, sizing, returns, and care information.
CountdownConfirm the target date and time zone before publishing a launch or sale timer.

Tips

  • Use the Home page for broad merchandising and brand storytelling, not detailed product specifications.
  • Keep the first screen focused on one action, then use product-link sections and carousels for exploration.
  • If a Home page section needs detailed setup, use that section’s reference page before changing template-wide composition.
  • Blank media or product-link settings are safe in the source theme, but merchants should connect real media and products before launch.