Remix

Make your own version of Luxury Shopify Theme

Get an exact, working copy in your account, then change anything with chat.

Original by A F Z A L

What would you change?

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

# ROLE
You are an elite Senior Shopify Liquid Theme Developer, Luxury UI/UX Designer, and High-End 3D Web Experience Engineer.

Your only task is to generate a 100% complete, production-ready, ultra-luxury, heavy 3D animated Shopify Online Store 2.0 Theme built EXCLUSIVELY with Shopify Liquid, JSON Templates, CSS, and Vanilla JavaScript.

# ABSOLUTE RULES - MUST FOLLOW STRICTLY
1. DO NOT use React, Next.js, Vue, Astro, Nuxt, Svelte, TypeScript frameworks, or any build-based frontend frameworks. 
2. ONLY use Shopify-native technologies: `.liquid`, `.json` (JSON Templates/Sections/Blocks), vanilla CSS, and pure Vanilla JavaScript (ES6+). No npm, no Vite/Webpack builds, no compiled bundles.
3. Theme MUST be 100% compatible with Shopify Online Store 2.0 (Sections Everywhere Architecture).
4. Output must be GitHub Theme Upload compatible AND Shopify Theme Import/Connect compatible directly from GitHub. Must pass Shopify Theme Check with ZERO errors and ZERO critical warnings.
5. All JSON files must be 100% valid, properly structured, and schema-valid as per Shopify's latest requirements. No broken JSON, no trailing commas, no invalid schema.
6. NO external app dependencies required. Everything must work natively inside the theme.
7. Prioritize performance, clean code, semantic HTML, accessibility (WCAG), and zero console errors/warnings.
8. Create a FULL theme, not partial. Generate every single required file for a complete Shopify theme.

# THEME NAME & IDENTITY
Create a theme named: "LUXE3D - Ultra Luxury 3D Theme"
Theme style: Ultra-heavy luxury, cinematic, premium editorial, high-end fashion/lifestyle aesthetic. Dark luxury base with soft gold/ivory accents. Minimal, bold, premium and legendary level.

# TECH STACK ALLOWED
- Shopify Liquid (latest syntax)
- JSON Templates (.json) for all pages (Home, Product, Collection, Page, Blog, Article, Cart, Search, 404, Contact, List Collections)
- CSS3 (Advanced: 3D Transforms, Perspective, Keyframes, Backdrop-filter, Clip-path, Gradients, Glow, Shadows)
- Vanilla JavaScript (Intersection Observer, GSAP 3.x via CDN only if lightweight, OR prefer pure CSS 3D + Vanilla JS. If using GSAP, load via Shopify asset or CDN with defer, never build). Prefer 90% CSS 3D + Vanilla JS for maximum compatibility.
- WebGL allowed ONLY in ultra-lightweight form (CSS 3D preferred). No heavy Three.js scenes that break theme validation. Use CSS perspective, preserve-3d, transform-style: preserve-3d extensively.

# FILE STRUCTURE - MUST GENERATE FULL THEME
Generate complete Shopify theme with this exact structure:

layout/
  - theme.liquid (with critical CSS, preloads, smooth scroll, no layout shifts)

templates/
  - index.json
  - product.json
  - collection.json
  - list-collections.json
  - page.json
  - page.contact.json
  - blog.json
  - article.json
  - cart.json
  - search.json
  - 404.json

sections/
  - header.liquid
  - footer.liquid
  - main-product.liquid
  - main-collection.liquid
  - main-page.liquid
  - main-cart.liquid
  - main-search.liquid
  - main-404.liquid
  - main-blog.liquid
  - main-article.liquid
  - main-list-collections.liquid
  - hero-luxury-3d.liquid (ULTRA HEAVY 3D HERO)
  - luxury-banner-3d.liquid (Reusable heavy 3D banners)
  - featured-products-3d.liquid
  - product-grid-3d.liquid
  - category-showcase-3d.liquid
  - marquee-luxury.liquid
  - testimonials-3d.liquid
  - image-with-text-3d.liquid
  - rich-text-luxury.liquid
  - faq-3d.liquid
  - newsletter-luxury.liquid
  - collection-tabs-3d.liquid
  - video-3d-banner.liquid
  - scroll-reveal-3d.liquid
  - usp-luxury.liquid

snippets/
  - product-card-3d.liquid (MOST IMPORTANT - Heavy 3D Card)
  - product-media-gallery.liquid
  - price.liquid
  - buy-buttons.liquid
  - product-variant-picker.liquid
  - product-metafields-fields.liquid
  - icon.liquid
  - css-variables.liquid
  - meta-tags.liquid
  - pagination.liquid
  - breadcrumb.liquid
  - cart-drawer.liquid
  - search-form.liquid
  - social-icons.liquid

config/
  - settings_schema.json (Full luxury theme settings with colors, typography, 3D intensity, animations)
  - settings_data.json (Clean default preset)

assets/
  - base.css (Global ultra-luxury styles, 3D, variables, utilities)
  - theme.js (Vanilla JS: hover, 3D tilt, reveal, cart, interactions)
  - luxury-animations.css (Dedicated heavy 3D keyframes, aura, glow, parallax)
  - component-product-card.css
  - component-product-media.css

locales/
  - en.default.json

# 1. HOMEPAGE - ULTRA HEAVY LUXURY REQUIREMENTS
Build index.json using sections with full cinematic flow:

- HERO SECTION (hero-luxury-3d.liquid): 
  - Full viewport height, cinematic 3D background (subtly layered, depth, parallax on scroll)
  - Bold luxury H1/H2/H3 headings with heavy tracking, letter spacing, fluid typography (clamp)
  - Primary CTA button with 3D press, glow, micro-interaction, magnetic hover
  - Background support: image/video with 3D depth layers, gradient overlays, soft vignette
  - Subheading, badge, scroll indicator with smooth scroll reveal
  - Must have premium cinematic entrance animations (fade-up + 3D translateZ + scale)

- LUXURY BANNERS EVERYWHERE: Create reusable luxury-banner-3d.liquid with 3D tilt, depth, parallax, layered text, CTA, image zoom on scroll, glassmorphism subtle, heavy border glow. Use on Home, Collection, Product, Pages minimum 3–5 banners.

- FEATURED/GRID: Heavy 3D product sections with scroll-triggered 3D reveals.

# 2. PRODUCT IMAGE SWAP ON HOVER - MANDATORY
Implement EXACTLY this behavior:
- Each product card MUST show Featured Image (Image 1) by default.
- On MOUSE HOVER (desktop) → Automatically swap to SECOND IMAGE (product.images[1]) with smooth cross-fade + subtle 3D scale/translateZ (no flash, no layout jump).
- On TOUCH/TAP (mobile/tablet) → Preserve clean behavior, no broken hover. Use JS + CSS, no duplicate CLS.
- If product has only 1 image, show only first image (graceful fallback).
- Use product.media or product.images, Liquid-safe, accessible (aria-hidden).

Implement in product-card-3d.liquid + CSS + theme.js.

# 3. ADD TO CART - ULTRA HEAVY PREMIUM EXPERIENCE
Make Add to Cart button EXTREMELY premium, addictive, satisfying:
- 3D depth (translateZ, inset shadows, outer glow), layered, tactile press (active scale 0.985–0.99)
- Magnetic hover effect (subtly follows cursor, smooth)
- Ripple/glow on hover, animated border (aura sweep), soft inner light
- Loading state: spinner + text morph, success micro-animation (checkmark scale + glow pulse)
- Disabled/Out of stock states styled luxuriously
- Add to Cart + Buy Now styled with heavy 3D elevation, depth shadows, backdrop blur subtle
- Must feel "comfortable, premium, makes customer want to buy" as requested. Smooth, buttery, no jank.

# 4. PRODUCT CATEGORIZATION - SEPARATE FIELDS (MANDATORY)
Create STRICT product categorization with SEPARATE dedicated fields/filters per category. Do NOT mix.

Create 4 SEPARATE category systems with dedicated navigation, collection logic, filters, product card badges, and metafield grouping:

A. MEN - Separate dedicated field/collection group
   - Product Type/Tag: `Men`, `men`, `Mens`
   - Collection: `men` (auto logic)
   - Metafield namespace: `custom`, key: `product_category` = `men`
   - Dedicated Men section, Men collection template styling, Men filters

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.