Hannouch Shopify Theme

Shopify theme development repository for Hannouch store.

🚀 Quick Start

Prerequisites

• Node.js installed
• Shopify CLI installed (npm install -g @shopify/cli @shopify/theme)

Local Development

1. Start development server (creates a preview theme and syncs changes):

   npm run dev

   This will:

   • Create a development theme on your store
   • Start a local server with hot-reload
   • Open your browser to preview changes
   • Sync file changes automatically

2. Pull latest theme from store:

   npm run pull

3. Push changes to a theme:

   npm run push

4. Deploy to live theme (use with caution):

   npm run deploy

5. Check for theme errors:

   npm run check

🌿 Branching Strategy

Main Branches

• main - Production-ready code, matches live theme
• develop - Integration branch for features

Feature Branches

• feature/feature-name - New features and enhancements
• fix/bug-name - Bug fixes
• hotfix/urgent-fix - Critical production fixes

Workflow

1. Starting a new feature:

   git checkout develop
   git pull origin develop
   git checkout -b feature/my-new-feature

2. During development:

   • Make changes locally
   • Test using npm run dev
   • Commit frequently with descriptive messages
   • Push to remote: git push origin feature/my-new-feature

3. Merging to develop:

   git checkout develop
   git merge feature/my-new-feature
   git push origin develop

4. Deploying to production:

   git checkout main
   git merge develop
   git push origin main
   # Then deploy: npm run deploy (or push to live theme manually)

📁 Project Structure

.
├── assets/          # CSS, JavaScript, images, fonts
├── config/          # Theme configuration files
├── layout/          # Theme layout templates
├── locales/         # Translation files
├── sections/        # Reusable theme sections
├── snippets/        # Reusable code snippets
├── templates/       # Page templates
└── blocks/          # Section blocks

🔧 Development Tips

• Always test changes locally with npm run dev before pushing
• Use Shopify Theme Inspector for debugging
• Keep commits focused and atomic
• Review changes in Shopify admin before deploying to live
• Use development themes for testing, never push directly to live theme

📝 Notes

• The config/settings_data.json file contains theme settings - be careful when merging
• Some files are auto-generated by Shopify admin - check file headers before editing
• Always pull latest changes before starting new work