Un thème Shopify moderne et flexible, conçu pour offrir une expérience e-commerce exceptionnelle avec une personnalisation poussée.
- 🎯 Vue d'ensemble
- ✨ Fonctionnalités
- 🏗️ Architecture
- 🚀 Installation
- ⚙️ Configuration
- 🎨 Personnalisation
- 📱 Sections disponibles
- 🔧 Développement
- 📈 Roadmap
- 🤝 Contribution
- 📄 Licence
Sahq est un thème Shopify moderne basé sur le Skeleton Theme de Shopify, enrichi avec des fonctionnalités avancées et un design contemporain. Il combine la robustesse de l'architecture Shopify avec la flexibilité de Tailwind CSS pour créer une expérience e-commerce exceptionnelle.
- Mobile-first : Optimisé pour tous les appareils
- Performance : CSS critique et optimisations avancées
- Accessibilité : Conforme aux standards WCAG
- Flexibilité : Personnalisation poussée via l'éditeur de thème
- Typographie moderne : Poppins pour les titres, Roboto pour le contenu
- ✅ Sections modulaires : Ajout/suppression/réorganisation facile
- ✅ Design responsive : Adaptation parfaite sur tous les écrans
- ✅ Optimisation SEO : Meta tags, structured data, performance
- ✅ Accessibilité : Navigation clavier, screen readers, contrastes
- ✅ Internationalisation : Support multi-langues complet
- ✅ Gestion des produits : Galeries, variantes, recommandations
- ✅ Panier intelligent : Drawer, calculs, codes promo
- ✅ Recherche avancée : Filtres, tri, suggestions
- ✅ Comptes clients : Inscription, connexion, historique
- ✅ Checkout optimisé : Processus fluide et sécurisé
- ✅ Système de couleurs : Palette personnalisable
- ✅ Typographie flexible : Poppins (titres) + Roboto (contenu)
- ✅ Animations fluides : Micro-interactions et transitions
- ✅ Glassmorphism : Effets modernes et élégants
- ✅ Dark mode ready : Support pour thème sombre
Sahq/
├── 📁 assets/ # Fichiers statiques (CSS, JS, images)
│ ├── critical.css # CSS critique pour performance
│ ├── custom-fonts.css # Fonts Poppins et Roboto
│ ├── Poppins-*.ttf # Famille Poppins complète
│ ├── Roboto-*.ttf # Famille Roboto complète
│ └── tailwind.output.css # CSS Tailwind compilé
├── 📁 blocks/ # Blocs réutilisables
├── 📁 config/ # Configuration du thème
│ ├── settings_schema.json # Paramètres de personnalisation
│ └── settings_data.json # Valeurs par défaut
├── 📁 layout/ # Layouts principaux
│ └── theme.liquid # Layout principal
├── 📁 locales/ # Fichiers de traduction
├── 📁 sections/ # Sections de contenu
│ ├── hero.liquid # Section Hero moderne
│ ├── header.liquid # Navigation principale
│ ├── footer.liquid # Pied de page
│ └── ... # Autres sections
├── 📁 snippets/ # Composants réutilisables
├── 📁 templates/ # Templates de pages
└── 📄 package.json # Dépendances et scripts
- Shopify CLI (dernière version)
- Node.js (v16 ou supérieur)
- Compte Shopify (development store recommandé)
- Cloner le repository
git clone https://github.com/Mandroso22/Sahq_SHOPIFY.git
cd Sahq_SHOPIFY-
Installer les dépendances
npm install
-
Lancer le développement
npm run dev- Compiler Tailwind CSS (dans un autre terminal)
npm run dev:tailwind
- Build pour production
shopify theme push- Ou via l'interface Shopify
- Admin → Online Store → Themes
- Upload theme files
Le thème offre une personnalisation complète via l'éditeur Shopify :
- Heading Font : Poppins (par défaut) - Police pour les titres
- Body Font : Roboto (par défaut) - Police pour le texte principal
- Accent Font : Poppins SemiBold (par défaut) - Police pour les éléments d'accent
- Background Color : Couleur de fond principale
- Foreground Color : Couleur du texte
- Input Corner Radius : Rayon des coins des formulaires
- Page Width : Largeur maximale du contenu (90rem/110rem)
- Page Margin : Marges latérales (10-100px)
:root {
--font-heading--family: "Poppins", sans-serif;
--font-body--family: "Roboto", sans-serif;
--font-accent--family: "Poppins", sans-serif;
--color-accent: #007bff;
--color-accent-dark: #0056b3;
}Le thème inclut toutes les variantes de Poppins et Roboto :
- Poppins : Thin, ExtraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold, Black
- Roboto : Thin, Regular, Medium, SemiBold, Bold, ExtraBold
- Toutes les variantes italiques sont également disponibles
- Créer le fichier section
<!-- sections/my-section.liquid -->
<section class="my-section">
<h2>{{ section.settings.title }}</h2>
<p>{{ section.settings.description }}</p>
</section>
{% schema %}
{
"name": "My Section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title",
"default": "My Section"
}
]
}
{% endschema %}- Ajouter au template
// templates/index.json { "sections": { "my_section": { "type": "my-section", "settings": { "title": "Welcome" } } }, "order": ["my_section"] }
-
Via l'éditeur Shopify
- Theme Settings → Colors
- Modifier les couleurs principales
-
Via CSS personnalisé
/* assets/custom-styles.css */ .my-custom-element { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
| Section | Description | Fonctionnalités |
|---|---|---|
| Hero | Section d'accueil moderne | Image/vidéo background, overlay, CTA, responsive |
| Header | Navigation principale | Menu, logo, panier, compte client |
| Footer | Pied de page | Liens, newsletter, réseaux sociaux |
| Product | Page produit | Galerie, variantes, recommandations |
| Collection | Page collection | Grille, filtres, tri, pagination |
| Cart | Panier | Items, quantités, codes promo |
| Search | Recherche | Résultats, filtres, suggestions |
| Section | Description | Statut |
|---|---|---|
| Features | Mise en avant des fonctionnalités | 🚧 En développement |
| Testimonials | Avis clients | 🚧 En développement |
| Newsletter | Inscription newsletter | 🚧 En développement |
| Social Feed | Réseaux sociaux | 🚧 En développement |
| FAQ | Questions fréquentes | 🚧 En développement |
# Développement
npm run dev # Lance le serveur de développement
npm run dev:tailwind # Compile Tailwind en mode watch
# Production
shopify theme push # Déploie le thème
shopify theme pull # Récupère les modifications- BEM : Block__Element--Modifier
- Variables CSS :
--component-property - Responsive : Mobile-first avec
min-width - Performance : CSS critique séparé
- Snippets : Réutilisables et paramétrables
- Sections : Modulaires avec schema
- Traductions : Clés organisées par contexte
- Performance : Lazy loading des images
- VS Code avec extension Shopify Liquid
- Shopify CLI pour le développement
- Theme Check pour la validation
- Lighthouse pour les performances
- Section Features avec icônes
- Section Testimonials avec carousel
- Section Newsletter signup
- Optimisation des performances
- Support dark mode
- Section FAQ accordion
- Section Social media feed
- Quick view des produits
- Wishlist functionality
- Advanced product filtering
- Mega menu navigation
- Advanced cart drawer
- Product comparison
- Customer reviews system
- Advanced analytics integration
Nous accueillons les contributions ! Voici comment participer :
- Vérifier les issues existantes
- Créer une nouvelle issue avec le template bug report
- Inclure les étapes de reproduction et captures d'écran
- Créer une issue avec le template feature request
- Décrire la fonctionnalité et son utilité
- Discuter avec l'équipe
- Fork le repository
- Créer une branche feature :
git checkout -b feature/amazing-feature - Commit les changements :
git commit -m 'Add amazing feature' - Push vers la branche :
git push origin feature/amazing-feature - Ouvrir une Pull Request
- Suivre les conventions de code existantes
- Tester sur différents appareils
- Documenter les nouvelles fonctionnalités
- Respecter les standards d'accessibilité
Ce projet est sous licence MIT. Voir le fichier LICENSE.md pour plus de détails.
- Email : support@sahq-theme.com
- GitHub : @Mandroso22
Sahq Theme - Construit avec ❤️ pour la communauté Shopify
