ARZ

---

🏠 Homepage

The homepage opens with a full-width hero section — bold typography, a clean call-to-action, and the brand's signature warm palette. Below the hero sits a curated featured products grid, letting customers jump straight into browsing. Every element is intentional: no clutter, no noise — just the brand and the product.

---

🗂️ Collections

The collections page presents the full product catalog in a clean, evenly spaced grid. Each card shows the product image with a smooth multi-image slideshow on hover, the product name, price, and a Quick Add button — so customers can shop without ever leaving the page. Sale and new arrival badges surface automatically based on product tags.

---

🧥 Product Page

The product page is built for clarity and conversion. On the left, a full image gallery with numbered navigation (1 / 5) lets customers cycle through every angle. On the right, the size selector, quantity input, and add-to-cart button are laid out in a logical hierarchy — with a real-time stock indicator that shows low availability when stock drops below the threshold.

Scroll down and the page reveals a size guide (dynamically matched to the product type — Panjabi, Shacket, or Pants) and a "You May Also Like" recommendations section powered by Shopify's product recommendations API.

---

📦 Track Order

A fully custom-built order tracking portal — no third-party apps, no redirects. Customers enter their order number and email directly on-site and get their fulfilment status back in a clean, readable format. Keeps the post-purchase experience inside the brand rather than pushing customers to a generic courier page.

---

✂️ Bespoke (Custom Tailored)

The Bespoke page is ARZ's made-to-measure offering. Customers can submit their exact measurements for a fully custom-tailored piece. The page walks through the process — what to measure, how to submit, and what to expect — keeping it approachable for customers who've never ordered custom clothing before.

---

✨ Features

---

🎨 Design System

Built around ARZ's brand palette — warm, earthy, and understated:

All values are CSS custom properties — swappable from the Shopify customizer without touching code.

---

🗂️ Project Structure

arz final/
├── assets/
│   ├── theme.css                    # Main stylesheet
│   ├── theme.js                     # All client-side logic
│   ├── critical.css                 # Critical above-the-fold styles
│   └── *.svg                        # Brand logos, size charts
│
├── sections/
│   ├── header.liquid                # Header, mega menu, mobile nav
│   ├── product.liquid               # Product detail page
│   ├── footer.liquid
│   ├── hero.liquid                  # Homepage hero
│   ├── featured-products.liquid
│   ├── custom-tracking-portal.liquid
│   └── main-custom-tailored.liquid  # Bespoke page
│
├── snippets/
│   ├── product-card.liquid
│   ├── cart-drawer.liquid
│   └── size-chart.liquid
│
├── templates/                       # JSON page templates
├── layout/theme.liquid              # Global HTML shell
└── config/                          # Theme settings schema

---

🚀 Local Development

# Preview locally against your store
shopify theme dev --store YOUR_STORE.myshopify.com

# Push to live store
shopify theme push --store YOUR_STORE.myshopify.com

# Lint
shopify theme check

---