Documentation · version 1.0.0

FRONTROW

Everything is set up in Shopify's theme editor. No code needed. This guide covers both FRONTROW and FRONTROW Galerie; Galerie-only features are marked.

Install

  1. In your Shopify admin, open Online Store → Themes.
  2. Choose Add theme → Upload zip file and select FRONTROW-1.0.0.zip (or the Galerie ZIP).
  3. The theme arrives unpublished. Click Customize to set it up, then Publish when it looks right.

The homepage ships with a finished demo layout and bundled photos, so it looks complete before you add your own images. Replace them section by section.

Presets

A preset is a starting point: typography, colours and Look settings chosen for one kind of brand. Pick one in Theme settings → Theme styles.

PresetMade forCharacter
StreetStreetwearFlagship: full-screen film, minimal header with live clock, 12px tracked type, centred product page
GalleryFashion, artWarm off-white, serif headings, centred header
TrainActivewear, gymHeavy condensed headlines, nav left and logo centre, grey product wells, black pill buttons
LayerUnderwear, basicsGrey paper with grain, italic condensed wordmark, condensed captions, offset grid
ClubRunning, outdoorNavy and bronze, light serif headlines and product names, extended labels

Look settings

Theme settings → Style → Look holds the settings each preset combines. Mix them freely:

Header layout
Menu left with logo centred · Logo left with inline menu · Logo above a centred menu · Giant full-width wordmark that scrolls away.
Wordmark style
Plain or outline. Applies when you show your store name as text instead of a logo image.
Buttons
Square or pill.
Product cards
Image well or framed.
Texture
Film grain on editorial images. Never over text or product photos.

The header can also sit transparently over a hero: Header → Transparent over hero. It turns solid when visitors scroll. Upload a light version of your logo under Logo over hero if your logo is dark.

Logo, fonts, colours

  • Logo: Header → Logo. Any aspect ratio; set the width with the slider.
  • Favicon: Theme settings → Layout → Favicon (square, at least 32 × 32 px).
  • Fonts: Theme settings → Typography. Pick from Shopify's font library, or paste the URL of your own font file to use it for headings or body text.
  • Colours: Theme settings → Colors: background, text, accent, labels and the sold-out dot.
  • Social media: Theme settings → Social media. Icons appear in the footer for every account you fill in.

Homepage sections

Campaign slideshow
Up to six slides, each with an image or video and up to two buttons. Thin progress lines show the time per slide; visitors can pause.
Campaign hero
One full-bleed image or video with a headline and button.
Product showcase
One product at a time on a large stage, cropped in close, with thumbnails to switch. Use Image zoom for eyewear and jewellery.
Product carousel
A swipeable row of tall product tiles, with optional ranking numbers for bestsellers.
Lineup
Full-length cut-outs standing on an arc. Drag, swipe or let it turn; the centre look links to its product. Use transparent PNG or WebP images with the feet at the bottom edge.
Floating collage
Product cut-outs drifting over a film, photo or colour, with your name large behind them. Visitors can pick pieces up and throw them; a click opens the product.
Explore scene
One wide photo of your store or set that visitors swipe across, with pulsing points that link to collections and products.
Statement
A still, full-screen photo with one line of type that types itself out, fades up, blurs in or runs as a marquee.
Category tiles, featured collection, image with text, rich text, image stream, video spotlight, FAQ
The building blocks for the rest of the page.

Drops and launches

  • Countdown section: set the launch date and time (store timezone, YYYY-MM-DD HH:MM). When it reaches zero, the done message replaces the timer.
  • Bag timer: Cart drawer → Drop closes at. Shows a countdown in the bag until your real drop close time, then "This drop has closed". Leave empty to hide. Only use a real deadline.
  • Pre-order: Buy buttons block → Show pre-order button. Variants that are out of stock but set to continue selling show "Pre-order" and your note (for example the shipping date), which is also added to the order.
  • Password page: an opening-soon page with countdown and email signup, for launches.
  • Entrance page and preloader (Theme settings → Motion) for a brand moment before the store.

Product pages

  • Every element is a block: vendor, title, price, buy buttons, description, pickup, complementary products, size and fit, plus app blocks.
  • Thumbnail scrubber: Product section → Show thumbnail scrubber (desktop, stacked gallery).
  • Size and fit block: model info, a five-step fit scale and a size guide that opens a page. Create a page with your size table and pick it in Size chart page. To set fit per product, connect a product metafield to Fit position and Model info.
  • Colour swatches: set swatch colours or images in Shopify's product options; the theme shows them automatically.

Lookbooks

Create a page and choose the page.lookbook template. Add looks to the Lookbook section and link the products in each look; visitors can shop the look in place. A page with the page.lookbooks template lists all your lookbooks as an archive.

Galerie rooms Galerie

  • Room: an illustrated or photographed space with product hotspots (wall labels) and doorways to other rooms. Use the page.room template; doorways link rooms into a walk-through with a zoom transition.
  • Runway: a pinned horizontal scroll through looks.
  • Salon hang: works hung on a wall with depth and parallax.
  • Manifesto: kinetic text, one line at a time.

The GSAP animation library loads only on pages that use these sections.

Motion and accessibility

Theme settings → Style → Motion: Expressive, Subtle or Off. Visitors who ask their device for reduced motion always get a still version. Everything that moves on its own has a pause button.

Support

Email hello@neverskipbreakfast.com with your store URL and a short description.