✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦
Crafted for high-end fashion, jewelry & lifestyle brands
✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦
🛍 View on Shopify Theme Store · 📖 Read the Docs · ✉ Contact Support
- Overview
- Features at a Glance
- Sections Reference
- Theme Settings
- Architecture
- Page Templates
- Performance
- Accessibility
- Installation
- Documentation
- Support
- License
- Changelog
REIGN Atelier is a luxury Shopify theme engineered from the ground up for high-end fashion, jewelry, accessories, and lifestyle brands. It pairs editorial elegance with serious commerce infrastructure — a complete, zero-compromise storefront on Shopify Online Store 2.0.
Every pixel, interaction, and line of code is crafted to match the visual standards of luxury brands — without sacrificing the conversion mechanics that make a store commercially successful.
Built by Nexevai · Developer: Rayees Yousuf · Version 1.0.0 · February 2026
| Feature | Details |
|---|---|
| Platform | Shopify Online Store 2.0 — JSON templates, App Blocks, Section Everywhere |
| Sections | 75+ drag-and-drop sections, fully configurable in the native Customizer |
| JavaScript | Zero external dependencies — 100% vanilla ES6+, no jQuery |
| Performance | Lazy loading, responsive images via srcset, deferred scripts, Section Rendering API |
| Accessibility | WCAG 2.1 AA foundations — ARIA, keyboard nav, focus states, reduced-motion |
| Animations | Scroll reveals, parallax, character-reveal text, magnetic hover, 3D tilt |
| Cart | AJAX drawer cart with free-shipping bar, upsell product, and order notes |
| Mobile | Mobile-first responsive design + optional fixed mobile bottom nav bar |
| Search | Live predictive search with product images and prices |
| Typography | Dual-font system via Shopify Font Picker — heading serif + body sans |
| Colors | Full CSS custom property system — every color token set in the Customizer |
| Localization | All strings translatable via en.default.json |
75+ fully configurable drag-and-drop sections across 8 categories. Every section exposes granular controls for spacing, colors, typography, animation, and scoped custom CSS — no code required.
| Section | File | Key Features |
|---|---|---|
| Hero Banner | hero-banner.liquid |
Full-width background image, overlay, heading, rich text, CTA button, configurable height |
| Hero Simple | hero-simple.liquid |
Separate desktop/mobile images, overlay opacity, text position, button |
| Hero Collection | advanced-hero-collection.liquid |
Full-bleed editorial hero — eyebrow tag, heading, subheading, CTA, all alignment/animation controls |
| Slideshow | slideshow.liquid |
Multi-slide carousel, autoplay, arrows, dots — each slide has own image/text/CTA |
| Split Screen | split-screen.liquid |
50/50 media + text — supports video, image shape masks, all content block types |
| Section | File | Key Features |
|---|---|---|
| Featured Collection | featured-collection.liquid |
Grid from any collection, columns 2–4, quick view, vendor, View All |
| Featured Collection Grid | featured-collection-grid.liquid |
Editorial grid — image ratio, hover swap, quick add, sale badges, gap control |
| Collection List | home-collection-list.liquid |
Multi-collection image tile grid — "Shop by Category" style |
| Collection Tabs (AJAX) | collection-tabs-ajax.liquid |
Tab switching between collections without page reload — up to 5 tabs, configurable tab style |
| Collection Banner | collection-banner.liquid |
Full-width banner for collection pages with background image |
| Category Tags | category-tags.liquid |
Pill-style tag navigation strip — each tag is a block with label + URL |
| Section | File | Key Features |
|---|---|---|
| Featured Product | featured-product.liquid |
Full buy interface (gallery, variants, ATC) for any product, anywhere on the page |
| Product Carousel | product-carousel.liquid |
Horizontal touch-swipe carousel from a collection, autoplay, eyebrow/heading/subtitle |
| Advanced Product Carousel | advanced-product-carousel.liquid |
Enhanced carousel — image swap, swatch hover preview, quick add, custom color palette per section |
| Vertical Product Carousel | vertical-product-carousel.liquid |
Infinite vertical scroll ticker in multiple columns, pause on hover, alternate direction |
| Trending Products Reveal | trending-products-reveal.liquid |
Oversized background text + product grid with scroll-reveal animation |
| Product Card Hover Showcase | product-card-hover-showcase.liquid |
Luxury hover grid — secondary image, color/size swatch preview, custom overlay, ATC on hover |
| Product Tabs | product-tabs.liquid |
Tab-based product showcase, one collection per tab block |
| Section | File | Key Features |
|---|---|---|
| Image with Text | image-with-text.liquid |
Classic 50/50 layout — image left or right, heading/text/button blocks |
| Image with Text Overlay | image-with-text-overlay.liquid |
Full-bleed image/video — parallax, Ken Burns hover, popup video, overlay opacity |
| Split Image & Text | split-image-text.liquid |
Optional sticky image on desktop scroll — for long-form editorial content |
| Rich Text | rich-text.liquid |
Full Shopify rich text editor — headings, captions, text, buttons |
| Multi-Column | multi-column.liquid |
2–6 column grid — image, heading, text per column. USP rows, feature highlights |
| Icon Row | icon-row.liquid |
SVG icon strip with labels — Free Shipping / Returns / Sustainability rows |
| FAQ Accordion | faq-accordion.liquid |
Animated expand/collapse — optional multi-open, max-width, full color scheme control |
| Story Timeline | story-timeline.liquid |
Vertical milestone timeline for brand history — year, heading, description, image per block |
| Team Members | team-members.liquid |
Photo grid — configurable image shape (square/circle/arch), card style, columns |
| Contact Form | contact-form.liquid |
Pre-styled form — floating labels, phone field, inquiry dropdown, info blocks, sidebar image |
| Newsletter | newsletter.liquid |
Email capture — connects to Shopify Email, Klaviyo, Omnisend, Mailchimp |
| Stats Counter | stats-counter.liquid |
Animated count-up numbers on scroll — suffix support (+, %, K), background image + parallax |
| Text Reveal | text-reveal.liquid |
Word-by-word cinematic scroll animation — for brand manifestos & mission statements |
| Custom Liquid | custom-liquid.liquid |
Insert any Liquid/HTML/JS anywhere, with color scheme, padding, and scoped CSS |
| Spacer | spacer.liquid |
Vertical space with optional decorative divider — desktop/mobile heights independently set |
| Section | File | Key Features |
|---|---|---|
| Video Section | video-section.liquid |
Full-width video — Shopify-hosted, YouTube, Vimeo. Autoplay, loop, poster image |
| Video with Text | video-with-text.liquid |
Side-by-side video + text — aspect ratio, shadow, all content block types |
| Interactive Video Parallax | interactive-video-parallax.liquid |
3D tilt + parallax video — oversized background text, configurable tilt axes and parallax speed |
| Gallery Masonry | gallery-masonry.liquid |
Pinterest-style masonry grid — configurable columns, row height, gap, overlay text per image |
| Image Banner | image-banner.liquid |
Standalone image with optional heading/text/CTA overlay — configurable height |
| Before / After Slider | before-after.liquid |
Interactive drag slider comparing two images — for product transformations, campaigns |
| Brand Logos | brand-logos.liquid |
Logo grid — stockists, press, certifications |
| Logo List | logo-list.liquid |
Compact logo strip — simpler alternative to Brand Logos |
| Section | File | Key Features |
|---|---|---|
| Image Hotspot | image-hotspot.liquid |
Shoppable tags on any image — hotspot markers with tooltip info cards |
| Shop The Look | shop-the-look-hotspots.liquid |
Full lookbook with animated pulsing product hotspots — quick-view card with ATC |
| Lookbook | lookbook.liquid |
Editorial lookbook with tappable product markers |
| Interactive Split Showcase | interactive-split-showcase.liquid |
Full-viewport hover-expand product panels — name, price, description, CTA per panel |
| Section | File | Key Features |
|---|---|---|
| Wall of Love | reviews-wall.liquid |
Masonry review card grid — stars, headline, quote, avatar initials, summary text, CTA |
| Testimonials Grid | testimonials-grid.liquid |
Clean testimonial grid — quote size, shadow, border, avatar, stars, columns |
| Testimonials | testimonials.liquid |
Simple testimonial carousel/stack |
| Trust Badges | trust-badges.liquid |
Security/trust icon strip — layout type, icon position, card style, shadow, columns |
| Section | File | Key Features |
|---|---|---|
| Scrolling Marquee | marquee.liquid |
Infinite ticker — mix Text, Image, Icon blocks. Speed, direction, pause-on-hover |
| Moving Announcement | advanced-marquee.liquid |
Single-line promo marquee — custom bg/text colors, speed, direction |
| Marquee Text | marquee-text.liquid |
Oversized typographic ticker — two lines, filled/outlined/mixed text styles |
| Scrolling Icons / Logos | scrolling-icons.liquid |
Auto-scrolling logo strip — grayscale filter, fade edges, borders |
| Countdown Timer | countdown-timer.liquid |
Live Days:Hours:Mins:Secs countdown — target date, optional CTA, color scheme |
| Promotional Countdown | promotional-countdown-banner.liquid |
Full section countdown — timer styles, urgency badge, solid/gradient/image bg, redirect on expire |
| Promotional Scroll Banner | promotional-scroll-banner.liquid |
Three text lines with outline + fill typography — scroll-reveal animation |
| Popup Promo | popup-promo.liquid |
Lightbox popup — delay, cookie frequency, position, blur overlay, email capture blocks |
| Featured Blog | featured-blog.liquid |
Blog post cards from any blog — date, author, excerpt, columns, View All |
| Split Promo Banners | split-promo-banners.liquid |
2–3 campaign tile banners side-by-side — image, heading, description, link per tile |
| Mobile Bottom Nav | mobile-bottom-nav.liquid |
Fixed bottom tab bar for mobile — Home, Collections, Search, Account, Cart with badge |
All settings configured in the Shopify Customizer — no code required.
| Setting | Type | Description |
|---|---|---|
type_header_font |
font_picker |
Heading font — applied to H1–H6, section titles, product names |
type_body_font |
font_picker |
Body font — paragraphs, buttons, labels, navigation |
| Setting | Type | Description |
|---|---|---|
color_text |
color |
Primary text — default #1A1A1A |
color_text_light |
color |
Secondary/muted text |
color_background |
color |
Page background — default #FAFAF8 |
color_accent |
color |
Brand accent — links, hover states, decorative elements — default #C9A96E |
color_border |
color |
Dividers, card borders, input outlines |
color_button |
color |
Primary CTA button background |
color_background_alt |
color |
Surface/card background |
color_background_inverse |
color |
Dark/inverse section background |
color_sale |
color |
Sale badge and discount indicators |
| Setting | Type | Description |
|---|---|---|
page_width |
range |
Max content width 1000–1600px — default 1280px |
spacing_sections |
range |
Global section vertical padding multiplier |
| Setting | Type | Options |
|---|---|---|
cart_type |
select |
drawer — AJAX slide-in | page — full /cart page |
currency_code_enabled |
checkbox |
Append currency code to prices |
| Setting | Type | Description |
|---|---|---|
enable_animations |
checkbox |
Master toggle for all scroll animations |
animation_type |
select |
Fade Up, Fade In, Slide Left/Right, Scale In, Stagger Children |
animation_speed |
select |
Fast (0.3s) / Normal (0.5s) / Slow (0.8s) |
animation_stagger |
range |
Delay between stagger child elements (ms) |
enable_parallax |
checkbox |
Global parallax on background images |
enable_magnetic |
checkbox |
Magnetic hover on CTA buttons |
enable_char_reveal |
checkbox |
Character-by-character heading reveal |
social_facebook · social_instagram · social_twitter · social_tiktok · social_youtube · social_pinterest · social_linkedin · social_snapchat · social_sharing_image
reign-atelier/
│
├── assets/
│ ├── base.css # Reset, CSS variables, core utilities
│ ├── animations.css # Scroll animations, keyframes, transitions
│ ├── component-card.css # Product card component styles
│ ├── component-price.css # Price display styles
│ ├── theme.js # Main JS: cart drawer, header, animations
│ ├── global.js # Shared utilities and event helpers
│ └── intersection-observer-counters.js # Counter animation module
│
├── config/
│ ├── settings_schema.json # All theme settings definitions
│ └── settings_data.json # Runtime settings values
│
├── layout/
│ └── theme.liquid # Master layout template
│
├── locales/
│ └── en.default.json # All translatable strings
│
├── sections/ # 89 section files (75+ customer-facing)
├── snippets/ # Reusable Liquid partials
└── templates/ # JSON page templates (OS 2.0)
└── customers/ # Account page templates
| Pattern | Usage |
|---|---|
| Custom Elements / Web Components | Cart drawer, product form, variant picker, predictive search — encapsulated and app-compatible |
| IntersectionObserver | All scroll animations, lazy loading, counter triggers — zero scroll event listeners |
| Fetch API + Section Rendering API | AJAX cart operations, collection tab switching — no full page reloads |
| Custom DOM Events | cart:add, cart:update — loose coupling between cart drawer, product form, header count |
| ES Modules | Code split by responsibility — no monolithic bundle |
REIGN Atelier uses modern CSS (custom properties, clamp(), grid, flex) and vanilla ES6+ JavaScript. No webpack, no preprocessors, no compilation needed — edit and ship directly.
All templates built as Shopify OS 2.0 JSON templates — every block is drag-and-drop in the Customizer.
| Template | File | Notes |
|---|---|---|
| Homepage | index.json |
Fully custom via drag-and-drop sections |
| Product | product.json |
OS 2.0 blocks — variant picker, tabs, sticky bar, related products |
| Collection | collection.json |
Storefront filtering, sorting, grid columns, quick add |
| Cart | cart.json |
Two-column layout with order summary and express checkout |
| Blog | blog.json |
2–3 column article grid with pagination |
| Article | article.json |
Full-width with share buttons and related articles |
| Search | search.json |
Products, pages, articles with filter grid |
| Page | page.json |
Generic rich-text page |
| About | page.about.json |
Pre-configured for brand story sections |
| Contact | page.contact.json |
Pre-configured with Contact Form section |
| FAQ | page.faq.json |
Pre-configured with FAQ Accordion section |
| List Collections | list-collections.json |
Auto-generated collection grid |
| Password | password.json |
Coming Soon / pre-launch page |
| 404 | 404.json |
Styled not-found page with search |
| Gift Card | gift_card.liquid |
Shopify native gift card |
| Login / Register | customers/login.json · customers/register.json |
Styled account auth |
| Account Dashboard | customers/account.json |
Orders, details, logout |
| Order | customers/order.json |
Full order details |
| Addresses | customers/addresses.json |
Manage saved addresses |
| Password Reset | customers/reset_password.json |
Native flow, fully styled |
| Activate Account | customers/activate_account.json |
Account activation |
| Optimization | Implementation |
|---|---|
| Lazy Loading | Native loading="lazy" on all below-fold images. First image uses loading="eager" for LCP |
| Responsive Images | image_url filter with widths + sizes → automatic srcset per device |
| No Render-Blocking JS | All scripts loaded defer or type="module" |
| Section Rendering API | AJAX features fetch only required HTML fragments — no full page reloads |
| Font Display | font-display: swap + preconnect hints on all Google Font loads |
| Critical CSS | Above-fold styles in <head>. Section CSS inlined within section files |
| Zero jQuery | No heavy library overhead — pure vanilla JS throughout |
REIGN Atelier is built to WCAG 2.1 AA standards as a foundation.
| Feature | Implementation |
|---|---|
| Semantic HTML | Correct heading hierarchy (H1–H6), landmark elements (<header>, <main>, <nav>, <footer>) |
| ARIA Labels | All icon-only buttons, close controls, carousel navigation include aria-label |
| Keyboard Navigation | Full keyboard support — dropdowns, modals, cart drawer, search use correct focus management |
| Focus Styles | Visible focus outlines on all interactive elements — not hidden with outline: none |
| Reduced Motion | All animations disabled via CSS @media (prefers-reduced-motion: reduce) |
| Color Contrast | Default palette meets WCAG AA contrast ratios |
| Alt Text | Passed through from Shopify Admin product/file alt text |
Do not extract the ZIP file. Shopify requires the original compressed archive.
- Download
reign-atelier-v1.0.0.zipfrom your purchase source - Go to Shopify Admin → Online Store → Themes
- Click Add theme → Upload ZIP file
- Select the ZIP → click Upload
- Click Publish to make it live, or Preview to test first
First setup checklist:
- Set fonts: Theme Settings → Typography
- Set colors: Theme Settings → Colors
- Upload logo: Header → Logo
- Upload favicon: Theme Settings → Favicon
- Set cart type: Theme Settings → Cart
- Add social URLs: Theme Settings → Social Media
- Build your homepage with drag-and-drop sections
- Configure the product page blocks in the Customizer
- Preview on mobile before publishing
Complete official documentation with every section's settings, all configuration options, developer notes, and troubleshooting:
The documentation covers:
- Full installation walkthrough
- Every theme setting explained
- All 75+ sections with settings reference
- Page template configuration
- Architecture & developer guide
- Custom CSS / JS patterns
- Performance & accessibility notes
- FAQ (12 questions) and Troubleshooting (9 common issues)
| Channel | Details |
|---|---|
| rayeesyousuf80@gmail.com | |
| Response Time | 24–48 business hours, Monday–Friday |
| Covered | Theme bugs, usage questions, Customizer help |
| Not Covered | Custom code modifications, third-party app conflicts, general Shopify questions |
When contacting support, include:
- Your store URL
- A clear description and steps to reproduce
- Screenshot or screen recording if applicable
- Any recently installed apps or theme code changes
Single-store license. One purchase covers one live Shopify store.
- ✅ Use on one live store
- ✅ Use on staging / development stores for the same project
- ❌ Use on multiple separate live stores (requires additional purchase per store)
- ❌ Redistribution, resale, or sharing of theme files
- 75+ drag-and-drop sections across 8 categories
- Shopify Online Store 2.0 — JSON templates, App Blocks, Section Everywhere
- Advanced animation system — scroll reveals, parallax, character reveal, magnetic hover, 3D tilt
- AJAX cart drawer with free-shipping bar, upsell product block, and order notes
- Interactive Split Showcase — full-viewport hover-expand product panels
- Shop The Look / Lookbook with animated pulsing hotspot product markers
- Interactive Video Parallax with 3D tilt and configurable parallax speed
- Before / After interactive drag slider
- Promotional Countdown Banner — solid/gradient/image backgrounds, urgency badge, redirect-on-expire
- Popup Promo — configurable delay, cookie duration, position, content blocks
- Wall of Love masonry review section and Testimonials Grid
- Gallery Masonry section
- Vertical Product Carousel — infinite scroll, multi-column, alternate directions
- Trending Products Reveal with oversized background text element
- Marquee, Moving Announcement, Marquee Text, Scrolling Icons/Logos
- Collection Tabs with AJAX collection switching (no page reload)
- Mobile Bottom Navigation fixed tab bar
- Live predictive search with product images and prices
- Enhanced Footer with full block-based column system
- Zero external JavaScript dependencies
- WCAG 2.1 AA accessibility foundations
prefers-reduced-motionfully respected- Mobile-first responsive — every component
✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦
Built by Nexevai · Developer: Rayees Yousuf
Premium Shopify theme development for luxury brands
🛍 View Theme · 📖 Documentation · ✉ Support
© 2026 Nexevai. All rights reserved.
✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦