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
- In your Shopify admin, open Online Store → Themes.
- Choose Add theme → Upload zip file and select
FRONTROW-1.0.0.zip(or the Galerie ZIP). - 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.
| Preset | Made for | Character |
|---|---|---|
| Street | Streetwear | Flagship: full-screen film, minimal header with live clock, 12px tracked type, centred product page |
| Gallery | Fashion, art | Warm off-white, serif headings, centred header |
| Train | Activewear, gym | Heavy condensed headlines, nav left and logo centre, grey product wells, black pill buttons |
| Layer | Underwear, basics | Grey paper with grain, italic condensed wordmark, condensed captions, offset grid |
| Club | Running, outdoor | Navy 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.