1. Quick Start & Installation
Sartorial is built from the ground up for Online Store 2.0, offering blazing-fast native vanilla JavaScript architecture without third-party framework overhead.
- Download the
Sartorial-1.0.0.zipfile from your Shopify account or Theme Store purchase. - In your Shopify Admin, navigate to Online Store > Themes.
- In the Theme library section, click Add theme > Upload zip file.
- Select
Sartorial-1.0.0.zipand click Upload. - Click Customize to open the theme editor.
2. Theme Presets (Styles)
Sartorial includes three distinct aesthetic presets tailored for luxury fashion, design objects, and archival curation:
Sartorial
Warm editorial elegance designed for luxury apparel, tailoring, and bespoke fashion houses. Features alabaster backgrounds, rich contrast, and sophisticated serif typography.
Edition
Crisp, modern architectural minimalism. High-contrast typography, sharp lines, and gallery-focused whitespace for leather goods, design objects, and contemporary accessories.
Archive
Rich, heritage luxury with deeper warm tones and dramatic composition. Ideal for vintage and archival apparel, one-of-a-kind pieces, and heritage brands.
To switch presets, open Theme settings (gear icon) > click the preset dropdown at the top > select your desired preset.
3. Color Schemes & Typography
Sartorial ships with five ready-made color schemes, and you can add your own. The default schemes meet WCAG 2.2 AA contrast ratios (4.5:1 for text, 3:1 for interface boundaries); check contrast again when you change scheme colors.
- Color Schemes: Configure background, foreground text, buttons, borders, and shadows in Theme settings > Colors. Each section can have its own independent color scheme.
- Typography: Customize body and heading fonts, scale multipliers, and font weights in Theme settings > Typography. Native system font fallbacks are automatically handled.
- Motion: Choose None, Subtle or Full in Theme settings > Animations. None disables decorative reveal and page motion. Subtle adds scroll reveals, hover transitions and page transitions. Full adds scroll-linked image unveils, headline reveals, hero parallax and scrolling text drift on supported desktop and mobile browsers. These effects use native CSS; no animation library is loaded in any mode. Browsers without scroll-driven animation support use transition-based reveals. Visitors who ask their device to reduce motion see static decorative content.
4. Signature Sections
Sartorial comes with 33 Online Store 2.0 sections and no third-party code dependencies. Highlights:
- Hero Editorial: Full-viewport and split editorial banners with support for responsive desktop/mobile imagery, focal point controls, and subtitle alignments.
- Complete the Look: Shoppable bundle merchandising tool allowing customers to add complementary products and accessories directly to cart with multi-variant selectors.
- Lookbook: Interactive hotspots over high-resolution imagery displaying product popovers with real-time stock and prices.
- Curated Showcase: Tabbed collection showcases with smooth CSS transitions and keyboard accessibility.
- Featured Product: Standalone product showcase with variant pickers, gallery controls, and native accelerated checkout.
5. Product Detail Page & Media
The product template provides full support for rich shopping experiences:
- 3D Models & Augmented Reality: Native support for
.glb/.gltf3D models with Shopify XR “View in your space” integration on iOS and Android. - Color Swatches: Native Shopify category swatches supporting both solid hex colors and swatch images.
- Live Line Total: Real-time price multiplier that dynamically recalculates total cost as customers adjust quantity, preserving original unit price.
- Gift Card Recipient: Native recipient form fields (name, email, message, send date) for digital gift cards.
- Pickup Availability: Real-time local store inventory and pickup status lookup.
6. Sticky Cart Drawer
Sartorial features an accessible, high-converting AJAX slide-out cart drawer:
- Supports Free Shipping Progress Bar with automatic threshold calculation.
- Optional cart notes and automatic display of line-level discounts.
- Accelerated checkout buttons (Shop Pay, Apple Pay, Google Pay, PayPal).
7. Predictive Search & Filters
Fast, debounced predictive search powered by Shopify’s Predictive Search API:
- Returns instant results for Products, Collections, Pages, and Journal Articles.
- Faceted filtering on collection and search pages with European comma decimal normalizers and live region screen reader announcements.
8. Merchant Support & Updates
Need assistance configuring your store? Visit our Theme Support Portal to submit a ticket, report an issue, or read our FAQ.