Use this guide to configure RiotLoom for an editorial storefront across ready-to-wear apparel, jewellery, leather carry, coastal resortwear, and daily beauty.
Choose a preset
RiotLoom includes five distinct preset directions tailored for specific catalog types:
- RiotLoom: Flagship editorial fashion, ready-to-wear apparel, and boutique collections.
- Lustre: Jewellery featuring gold-tone pieces, pearl imagery, and warm accents (uses the internal technical identifier nightshift in theme files; it is the same preset).
- Keepsake: Structured leather bags, travel objects, and everyday carry.
- Dispatch: Vibrant resortwear, swimwear, and coastal pieces.
- Stillframe: Makeup, lip oils, cheek tints, and daily beauty discovery.
Preset styling vs template layout files
In the Shopify Theme Editor under Theme settings > Presets, selecting a preset applies that preset's coordinated global styling tokens: typography scale, color palette, section spacing, border weights, corner radii, and design direction across existing templates.
Theme Architecture Note: Selecting a preset in Theme settings updates global styling tokens across your active templates, but does not automatically rewrite template section files or replace templates/index.json. The listings/ directory contains development reference files and preset materialization inputs used by the theme system to assemble preset demo configurations; they are not packaged root templates for direct merchant editing. Merchants configure and customize section layouts through the Theme Editor. Your catalog products, collections, navigation menus, and page contents are preserved when switching presets.
Global theme settings
Brand
- Logo: Primary merchant logo. A transparent PNG or SVG is recommended. If left blank, RiotLoom's bundled custom typographic wordmark is used automatically.
- Inverse logo: Optional light logo for dark backgrounds (such as the footer or inverted banners). When blank, the primary logo is used.
- Brand kicker & Wordmark: Short text kicker shown near the logo in some layouts, and optional text wordmark fallback used when no logo image is uploaded.
- Brand tagline: Brand positioning statement used as fallback in editorial sections.
- Favicon: Upload a square icon for browser tabs and mobile shortcuts.
- Social sharing image: Recommended size: 1200 x 628 px. Used when a shared page does not provide its own featured image.
- Product card badges: Automatic Sale & Save % badges when a variant compare-at price exceeds its selling price; Sold out badge when the selected variant is unavailable; and up to two marketing badges (New arrivals, Bestseller, Trending tags in Shopify Admin).
Colors & typography
RiotLoom uses a coordinated 5-color palette system: Text color (color_ink), Background color (color_paper), Accent color (color_accent), Signal background color (color_signal), and Signal text color (color_signal_text). Typography settings configure separate heading (font_heading) and body (font_body) font selections with an adjustable heading scale (90% to 125%).
Design direction & motion
Design direction selects the active aesthetic direction. Layout settings control section spacing (48px to 128px), content width (1200px to 1800px), corner radius (0px to 24px), border weight (0px to 3px), and media treatment (Natural, Crisp contrast, Soft editorial, Monochrome).
The Show preset introduction (enable_preset_intro) setting provides a short, skippable homepage introduction for RiotLoom, Lustre, Keepsake, Dispatch, and Stillframe. The browser remembers it per design direction for the session when session storage is available. It is automatically skipped for reduced motion, the None motion style, fragment-linked navigation, and Theme Editor preview.
Store Setup
Follow these essential setup steps before launching your storefront:
- Add complete product records with title, description, vendor, product type, variants, pricing, inventory tracking, and high-resolution editorial photography.
- Create collections for core categories (such as New Arrivals, Ready-to-Wear, Accessories, Best Sellers, and Lookbooks) with descriptive copy and hero banners.
- Configure primary and footer navigation menus in Shopify Admin > Navigation.
- Publish standard store policies under Shopify Admin > Settings > Policies (Refund, Privacy, Terms of Service, Shipping, and Subscription policies).
- Configure Shopify Markets, multi-currency pricing, multi-language localization, customer accounts, gift cards, local pickup locations, and accelerated checkout if your store uses those features.
Homepage
RiotLoom homepages balance cinematic campaign storytelling with rapid commercial discovery. Rather than a single fixed layout, each preset features tailored section architecture designed for its specific merchandise:
Preset homepage architectures
- RiotLoom Fashion Index (templates/index.json): Editorial campaign hero (riot-hero), policy commitments (feature-strip), category strip, campaign split, product rail, split gallery, flowing type marquee, complete-the-look fit builder, collection list, journal news preview, and email newsletter band.
- Lustre Jewellery Index (Nightshift preset direction): Ambient metal and pearl media hero (rl-lustre-hero), typographic statement (rl-nightshift-editorial-type), tabbed fine jewelry rails (rl-lustre-catalog), light study (rl-lustre-light-study), editorial duet (rl-nightshift-duet), material study (rl-nightshift-material-study), three perspectives (rl-lustre-three-perspectives), and closing signature and shelf (rl-lustre-signature-ending). (Note: Experimental QA fixtures such as pendant-options and ending-options are excluded during package sanitation and are not active merchant sections).
- Keepsake Carry Index (Keepsake preset direction): Video-enabled carry campaign hero (rl-concept-hero), carry product rail with inline video (rl-concept-catalog), brand philosophy statements (rl-editorial-statement), 3-chapter scroll tour detailing Shape, Material grain, and Everyday Carry (rl-editorial-lookbook), secondary carry rail, and 5 storytelling notes (rl-editorial-stack).
- Dispatch Resort Index (Dispatch preset direction): Coastal water-to-shore video hero (rl-concept-hero), multi-angle swimwear gallery (rl-angle-gallery), pinned runway view with Bento feature banners (rl-concept-catalog), dual marquees, 6-scene seaside carousel (shoppable-media-carousel), beach-day video slider (rl-editorial-closing), colour and closing statements, feature strip, and newsletter band.
- Stillframe Beauty Index (Stillframe preset direction): Video-enabled cosmetics hero (rl-stillframe-beauty-hero), tag-filtered makeup rail (rl-stillframe-beauty-rail filtering by Lips, Face, Eyes, Tools), tactile macro swatches (rl-stillframe-colour-study), 3-step beauty routine walkthrough (rl-stillframe-beauty-routine), secondary beauty shelf, and close-up texture film (rl-stillframe-beauty-campaign).
Active vs optional components
Each preset provides an optimized default configuration of active sections alongside optional editorial sections that merchants can add, configure, or reorder directly in the Theme Editor.
Header navigation presentation modes
The Header section includes a Navigation presentation setting: Merchant menu connects directly to standard Shopify navigation menus configured under Online Store > Navigation (supporting up to three nested levels of dropdowns and custom mega-menus; recommended for live stores); Preset demo modes (LUSTRE studio, Keepsake journal, Dispatch channel, Stillframe index) provide curated editorial navigation tailored to demo catalogs; and Preset mega-menu groups assign custom link lists to First, Second, and Third preset mega-menu group settings.
Footer & store services rail
The Footer includes four customizable service message title and description pairs. The store services rail is automatically suppressed on the homepage when using the Dispatch design direction (settings.design_direction == 'dispatch') to preserve the coastal editorial narrative. On inner pages, visibility follows the Footer's Show store services setting.
Product Page
The product detail page (sections/main-product.liquid) combines conversion-focused commerce blocks with rich storytelling options:
16 modular PDP blocks
RiotLoom provides modular block support in sections/main-product.liquid: vendor (with Display label override), title (accessible H1; Product badge configured in section settings), rating (Shopify review metafields), price, sku (auto-updating), buy_buttons, description (rich text with override option), trust_stack (truck, refresh, shield, heart icons), collapsible_row (accordions with open_by_default option), fabric_grid (up to 4 macro material detail images), fit_guide (size diagram and fit notes), pickup_availability (real-time location lookup), pickup_note, reviews_panel, custom_liquid, and @app.
Subscriptions & unit pricing (platform vs theme boundaries)
Recurring subscriptions and unit pricing calculations are platform-level capabilities managed in Shopify Admin: recurring billing rules, subscription intervals, and customer subscription management are governed by Shopify's subscription APIs and apps; statutory unit pricing measurements are configured in product variant inventory settings. RiotLoom cleanly supports these platform features visually by rendering selling plan frequency selectors, subscription allocation prices, unit price measurements, and dynamic subtotal messaging across product pages, cart drawers, and cart summaries.
App blocks placement (@app)
Shopify App Blocks (@app) render in the dedicated Product App Band located below the main product details, rather than inside the compact buy button column. This layout provides full-width space for complex app widgets (such as back-in-stock forms, comprehensive sizing calculators, and third-party review widgets) without disrupting the core buying flow.
Pre-order inventory configuration
RiotLoom includes native pre-order support without requiring third-party apps. Pre-order messaging activates only when all three conditions are met:
- In Shopify Admin: Open the product in Products. Under Inventory, ensure inventory tracking is managed by Shopify, check Continue selling when out of stock, and set the available inventory quantity to 0 or less.
- In Theme Editor: On the Product template, click the Buy buttons block and check Enable pre-order messaging.
- Customize copy: Adjust the Pre-order button label (default: "Pre-order") and Pre-order message as needed.
When a variant meets these conditions, the button switches to the pre-order label, reassurance copy appears, and the item is added to the cart with the line-item property properties[Purchase type] = "Pre-order" for fulfillment tracking.
Product media layouts
Under Main product > Product media layout (gallery_layout), select from 5 supported gallery layouts: Thumbnails (default: hero display with interactive thumbnail tray), Grid (balanced 2-column desktop media grid), Collage (dynamic asymmetrical editorial arrangement), List (full-width vertical scroll stack), and Alternative (minimalist single-media presentation suited for objects, fine jewelry, and cosmetics).
Collection And Search
RiotLoom delivers native Shopify collection filtering, sorting, and merchandising across multiple collection layouts:
Collection templates
Five specialized collection templates are available in the theme: collection.json (default catalog with facet filters and sorting), collection.catalog (dense grid for larger catalogs), collection.dresses (category layout with quick-filter chips and featured cards), collection.editorial (storytelling layout embedding editorial banners between product rows), and collection.minimal (clean, distraction-free grid).
Migrated merchandising tile blocks
Within Main collection, merchants can add up to three Merchandising tile blocks to choose each tile's product, optional destination link, image, or bundled asset. An explicit destination overrides the selected product's link; an uploaded image takes priority over a bundled asset. Reordering these blocks updates tile order in the grid. The section's full merchandising image overrides individual tiles when set. Existing chip, promotion, and featured-collection blocks remain independent controls.
Concept catalog grouped blocks
The shared Preset concept catalog sections used by Lustre, Keepsake, and Dispatch group their editorial controls into Editorial story, Closing image and copy, and Image comparison blocks. Each group is limited to one per section, while category-tab blocks remain separate. The section's phase and visibility controls determine which editorial elements appear. Palette and product-rail controls remain in the section settings.
Faceted filtering & predictive search
Faceted filtering integrates with Shopify's Search & Discovery app to support price ranges, stock availability, product types, vendors, and variant attributes (size, color, material) dynamically. Real-time predictive search provides instant results for products, collections, pages, and articles.
Cart And Checkout
RiotLoom provides a slide-out cart drawer and a dedicated cart page (/cart) with full support for modern Shopify commerce capabilities:
Commerce capabilities
- Selling plans & subscriptions: Full visual support for recurring billing plans, subscription discounts, and delivery frequency selection powered by Shopify subscription platform features.
- Unit pricing: Compliant display of unit prices (measurement and unit) in product summaries, cart drawers, cart pages, and checkout based on Shopify Admin inventory configuration.
- Cart drawer line items: Supports line-item properties, pre-order badges, quantity increments/decrements, item removal, and clean recovery when the cart is emptied.
- Cart notes: Merchant-controlled Show cart note toggle in Main cart settings.
- Accelerated checkout: Dynamic checkout buttons (Shop Pay, Apple Pay, Google Pay) appear automatically when enabled by Shopify.
Cart service band
In the Cart template, open Main cart and enable Show cart service band. Add up to four Cart service blocks to set each item's icon, heading, body text, and optional link. A blank heading suppresses that service item; a link appears only when both its label and destination URL are populated. The service band renders on populated carts to reinforce shipping, returns, and guarantee policies.
Custom Page Templates
RiotLoom includes 12 specialized Online Store 2.0 page templates ready to assign under Online Store > Pages via the Theme template dropdown:
- page.about.json: Brand origin, atelier story, craftsmanship bento, press quote, and design principles.
- page.contact.json: Editorial contact layout with responsive inquiry form and customer care guidance.
- page.customer-care.json: Post-purchase service hub combining care chapters, shipping/returns guidance, and FAQ accordions.
- page.data-sharing-opt-out.json: Clean statutory privacy opt-out page for regional compliance.
- page.faq.json: Self-service question hub featuring icon-driven topics and categorized accordion panels.
- page.find-a-store.json: Showroom directory with appointment scheduling and studio atmosphere gallery.
- page.garment-care.json: Post-purchase textile care guide with washing instructions for linen, knitwear, denim, and delicates.
- page.lookbook.json: Shoppable seasonal looks with product sliders and editorial spreads.
- page.press.json: Media room featuring brand boilerplate, press coverage, and downloadable brand assets.
- page.shipping-returns.json: Delivery options, schedules, shipping rates, and return policy details.
- page.size-guide.json: Comprehensive size tables (inches and cm for bust, waist, hip) with measurement guidance.
- page.sustainability.json: Material responsibility layout detailing fiber composition, circularity, and supply chain ethics.
Storefront Agent Discovery
RiotLoom includes templates/agents.md.liquid, which powers /agents.md and serves as the fallback for /llms.txt and /llms-full.txt. It uses dynamic Shopify agents Liquid objects for storefront URLs, currency, catalog discovery, and sitemaps. It never exposes private contact details, developer credentials, admin URLs, or storefront passwords.
FAQ
Which presets are officially supported in RiotLoom?
RiotLoom includes five distinct preset directions tailored for specific catalog types: RiotLoom (fashion and apparel), Lustre (jewellery; internal configuration name nightshift), Keepsake (leather goods and carry), Dispatch (resortwear and swimwear), and Stillframe (makeup and beauty). Street, Luxe, Drop, Mono, and Pop were early historical working names, not active presets, and should not be advertised.
How does switching presets in Theme settings work?
In the Shopify Theme Editor under Theme settings > Presets, selecting a preset applies that preset's global styling tokens: color palette, typography scale, section spacing, border weights, corner radii, and design direction across active templates. It does not automatically rewrite your existing page template sections or replace templates/index.json. Note that listings/ contains preset materialization source inputs rather than packaged merchant templates. Storefront customization is managed via the Theme Editor without altering catalog product or collection data.
How do navigation presentation modes work in the header?
The Header section includes a Navigation presentation setting: Merchant menu connects directly to standard Shopify navigation menus configured under Online Store > Navigation (recommended for live merchant stores); Preset demo modes (LUSTRE studio, Keepsake journal, Dispatch channel, Stillframe index) provide curated editorial navigation tailored to demo catalogs; and Preset mega-menu groups allow assigning custom link lists to First, Second, and Third preset mega-menu groups.
How do I configure pre-orders?
RiotLoom supports native pre-orders without third-party apps by checking three criteria: 1) In Shopify Admin under Products > Inventory, enable inventory tracking, check Continue selling when out of stock, and set inventory to 0 or less; 2) In Theme Editor on the Product template, check Enable pre-order messaging in the Buy buttons block; 3) Customize the Pre-order button label and Pre-order message. The cart line-item property properties[Purchase type] = "Pre-order" is attached automatically.
Where do App Blocks render on the product page?
In sections/main-product.liquid, Shopify App Blocks (@app) render in the dedicated Product App Band located below the main product details, rather than inside the compact buy button column. This layout provides full-width space for complex app widgets (such as back-in-stock forms, comprehensive sizing calculators, and third-party review widgets) without disrupting the core buying flow.
Why is the footer store services rail hidden on the Dispatch homepage?
In sections/footer.liquid, the store services rail is intentionally suppressed on the homepage when using the Dispatch design direction (settings.design_direction == 'dispatch') to preserve the coastal editorial narrative. On inner pages, visibility follows the Footer's Show store services setting.
Why do filters not show on my collection page?
Shopify filters depend on store data and Search & Discovery configuration. Ensure product attributes (availability, price, type, vendor, size, color, material) are populated, then activate filters in the Shopify Search & Discovery app.
Why do localization selectors not show?
Country and language selectors appear only when Shopify has multiple available countries or published languages configured in Shopify Admin under Settings > Markets and Settings > Languages.
Why does pickup availability not show?
Pickup availability requires products, variants, inventory, and store pickup locations configured in Shopify admin under Settings > Locations.
Is RiotLoom based on another commercial theme?
No. RiotLoom is an original theme system with its own code, structure, naming, assets, interactions, and visual identity.
Is RiotLoom ready for Shopify Theme Store submission?
Not yet. Code-level feature coverage, Online Store 2.0 architecture, and local validation are established, but rendered route QA across all presets, official Shopify checklist testing, Theme Editor stress QA, demo-store setup, and final package auditing remain required.
Support Scope
Theme support covers installation guidance, Theme Editor setup, supported Shopify settings, RiotLoom theme bug fixes, Shopify-native feature compatibility, and documentation walkthroughs.
Theme support does not include custom feature development, third-party app debugging outside RiotLoom integration points, product data entry, photography, copywriting, brand design, or checkout customization outside Shopify-supported theme surfaces.
Release Notes
0.1.0
Initial release candidate prepared for Shopify Theme Store audit. Includes five distinct preset directions (RiotLoom, Lustre, Keepsake, Dispatch, Stillframe), Online Store 2.0 template coverage, 16 modular PDP blocks, faceted search and filtering, responsive video integration, 12 custom page templates, migrated collection merchandising tile blocks, migrated concept catalog grouped blocks, cart service messages, and storefront agent discovery.
Before production launch, complete final demo data setup, route QA across presets, Theme Editor QA, official Shopify testing assets, Lighthouse benchmarks, and listing screenshot evidence.