Zell's Hair Growth Oil - Shopify Theme

A complete Shopify theme setup for Zell's Hair Growth Oil product landing page and hair bar booking system.

📁 File Structure

vermeil-jones/
├── templates/
│   ├── page.zells-landing.json    # Landing page template
│   └── page.hairbar.json          # Booking page template
├── sections/
│   ├── zells-landing.liquid       # Main landing section
│   └── hairbar-booking.liquid     # Booking section
├── assets/
│   ├── zells-landing.css          # Shared styles
│   └── zells-landing.js           # Interactive functionality
└── README.md                      # This file

🚀 Quick Setup Instructions

1. Shopify Store Setup

1. Create/Log in to a Shopify store (or dev store)
2. Online Store → Themes → … → Edit code (keep the current theme—this will add new templates)
3. Create the files below exactly at the paths shown in the file structure above

2. Create Pages

1. Online Store → Pages → Add pages
   • Page 1: "Zell's Hair Growth Oil" → Template: page.zells-landing
   • Page 2: "Hair Bar Booking" → Template: page.hairbar

3. Customize Theme

1. Online Store → Customize → Select each page
2. Upload assets (see Required Images below)
3. Configure settings:
   • Upload logo
   • Set colors (primary: #1f8d69, accent: #e79a19)
   • Fill copy
   • Paste your booking link (Cowlendar/Calendly)
   • Add your Instagram URL
   • Select the product for Add to Cart functionality

4. Navigation Setup

1. Online Store → Navigation → Add both pages to the main menu

5. Product Setup

1. Products → Add product: "Zell's Hair Growth Oil"
2. Upload bottle photos
3. Set price and inventory
4. Link the product in the landing page settings

6. Optional: Set as Homepage

• Link the landing page in your main menu, or
• Duplicate page.zells-landing.json to templates/index.json later

🖼️ Required Images

Upload these images to Online Store → Themes → Assets:

Product Images

• product_main.png - Main product bottle image (4:5 aspect ratio recommended)

Instagram Images (6 images)

• ig1.jpg - Instagram post 1
• ig2.jpg - Instagram post 2
• ig3.jpg - Instagram post 3
• ig4.jpg - Instagram post 4
• ig5.jpg - Instagram post 5
• ig6.jpg - Instagram post 6

⚙️ Theme Features

Landing Page (page.zells-landing)

• ✅ Hero section with logo and product image
• ✅ Benefits section (3 key features)
• ✅ Product card with quantity selector
• ✅ Customer reviews (static for now)
• ✅ Instagram gallery (optional)
• ✅ Hair bar booking section (optional)
• ✅ FAQ section (optional)
• ✅ Newsletter signup
• ✅ Footer with navigation

Booking Page (page.hairbar)

• ✅ Simple booking interface
• ✅ External link to booking system
• ✅ Helpful notes section

Interactive Features

• ✅ Smooth scrolling navigation
• ✅ AJAX Add to Cart (with fallback)
• ✅ External Square checkout integration
• ✅ Quantity controls
• ✅ FAQ accordion
• ✅ Toast notifications
• ✅ Mobile-responsive design

🎨 Customization

Colors (via Theme Customizer)

• Primary: #1f8d69 (green)
• Accent: #e79a19 (orange)
• Text: #111111 (dark gray)

Settings Available

• Logo upload
• Color customization
• Instagram URL
• Booking URL (Cowlendar/Calendly)
• External Buy Now URL (Square)
• Toggle sections on/off
• Product selection for cart

🔧 Technical Details

Dependencies

• Shopify OS 2.0 compatible
• No external dependencies
• Vanilla JavaScript
• Modern CSS Grid/Flexbox

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• Mobile-responsive design
• Progressive enhancement

📱 Mobile Optimization

• Responsive grid layouts
• Touch-friendly buttons
• Optimized images with lazy loading
• Mobile-first CSS approach

🔒 Security Features

• CSRF protection for forms
• Secure external links (noopener)
• Input validation
• XSS prevention

🚀 Performance

• Optimized CSS and JS
• Lazy loading for images
• Minimal HTTP requests
• Efficient DOM manipulation

📞 Support

For technical support or customization requests, contact the development team.

---

Powered by Dojmark • Built for Verzell Jones