REIGN Atelier

✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦

REIGN Atelier

Premium Luxury Shopify Theme

Crafted for high-end fashion, jewelry & lifestyle brands

✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦

🛍 View on Shopify Theme Store · 📖 Read the Docs · ✉ Contact Support

Overview

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

Features at a Glance

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`

Sections Reference

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.

🎬 Hero Sections

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

🗂 Collection Sections

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

🛒 Product Sections

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

✍️ Content Sections

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

🎬 Media Sections

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

✨ Interactive Sections

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

🌟 Social Proof Sections

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

⚙️ Utility Sections

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

Theme Settings

All settings configured in the Shopify Customizer — no code required.

Typography

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

Colors

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

Layout

Setting	Type	Description
`page_width`	`range`	Max content width 1000–1600px — default `1280px`
`spacing_sections`	`range`	Global section vertical padding multiplier

Cart

Setting	Type	Options
`cart_type`	`select`	`drawer` — AJAX slide-in \| `page` — full `/cart` page
`currency_code_enabled`	`checkbox`	Append currency code to prices

Animations

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 Media

social_facebook · social_instagram · social_twitter · social_tiktok · social_youtube · social_pinterest · social_linkedin · social_snapchat · social_sharing_image

Architecture

Directory Structure

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

JavaScript Patterns

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

No Build Step Required

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.

Page Templates

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

Performance

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

Accessibility

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

Installation

Do not extract the ZIP file. Shopify requires the original compressed archive.

Download reign-atelier-v1.0.0.zip from 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

Documentation

Complete official documentation with every section's settings, all configuration options, developer notes, and troubleshooting:

📖 reignatelier.nexevai.com

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)

Support

Channel	Details
Email	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

License

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

Changelog

v1.0.0 — February 2026 — Initial Release

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-motion fully respected
Mobile-first responsive — every component

✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦

Built by Nexevai · Developer: Rayees Yousuf

Premium Shopify theme development for luxury brands

🛍 View Theme · 📖 Documentation · ✉ Support

✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦ ── ✦

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

REIGN Atelier

Premium Luxury Shopify Theme

Table of Contents

Overview

Features at a Glance

Sections Reference

🎬 Hero Sections

🗂 Collection Sections

🛒 Product Sections

✍️ Content Sections

🎬 Media Sections

✨ Interactive Sections

🌟 Social Proof Sections

⚙️ Utility Sections

Theme Settings

Typography

Colors

Layout

Cart

Animations

Social Media

Architecture

Directory Structure

JavaScript Patterns

No Build Step Required

Page Templates

Performance

Accessibility

Installation

Documentation

Support

License

Changelog

v1.0.0 — February 2026 — Initial Release

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors