Tutoriel - Modèle Boutique Chic

✦ Guide du Modèle Boutique Chic ✦

Retrouvez ci-dessous le code complet de votre thème boutique à grille. Cliquez sur le bouton "Copier le code" pour le récupérer instantanément !

📁 Code source complet (boutique.html)
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Ma Boutique Vitrine</title> <style> body { background-color: #0f172a; color: #e2e8f0; font-family: 'Segoe UI', Arial, sans-serif; margin: 0; padding: 20px; } .boutique-principal { width: 1300px; margin: 0 auto; text-align: center; } .boutique-zone-banniere { width: 1300px; height: 250px; margin-bottom: 25px; border: 4px solid #f43f5e; /* Bordure Rose fuchsia chic */ border-radius: 8px; background: #1e293b; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .boutique-img-banniere { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .boutique-titre-banniere { position: relative; z-index: 2; color: #ffffff; font-size: 40px; font-weight: bold; letter-spacing: 2px; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8); background: rgba(15, 23, 42, 0.6); padding: 10px 30px; border-radius: 6px; } .boutique-nav-haut { margin-bottom: 30px; text-align: center; } .boutique-nav-haut a { display: inline-block; padding: 8px 20px; background: #f43f5e; color: #ffffff; font-family: Arial, sans-serif; font-size: 15px; font-weight: bold; text-decoration: none; border-radius: 4px; margin: 0 8px; box-shadow: 0 4px 10px rgba(244, 63, 94, 0.2); } /* 🌟 LA GRILLE GRANDE LARGEUR EN 5 COLONNES POUR LES PRODUITS */ .boutique-grille-produits { display: grid; grid-template-columns: repeat(5, 1fr); /* Aligne pile 5 colonnes */ gap: 20px; width: 1300px; margin-bottom: 40px; text-align: center; } /* 📦 LES BOÎTES DE PRODUITS AVEC BORDURE DOUBLE CHIC DE 4PX */ .boutique-carte-item { background: #1e293b; border: 4px double #f43f5e; /* Magnifique bordure double 4px fuchsia */ border-radius: 8px; padding: 15px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .boutique-img-item { width: 100%; height: 160px; object-fit: cover; border-radius: 4px; margin-bottom: 12px; background: #0f172a; } .boutique-nom-item { font-size: 16px; font-weight: bold; color: #ffffff; margin: 0 0 8px 0; } .boutique-prix-item { font-size: 15px; font-weight: bold; color: #f43f5e; /* Couleur du prix */ margin: 0 0 12px 0; } .boutique-btn-voir { display: block; width: 100%; padding: 6px 0; background: rgba(254, 242, 242, 0.05); border: 1px solid #f43f5e; color: #ffffff; font-size: 13px; font-weight: 600; text-decoration: none; border-radius: 4px; } .boutique-banniere-bas { width: 1300px; height: 120px; margin: 0 auto; border: 8px solid #f43f5e; border-radius: 10px; background: #1e293b; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .boutique-texte-bas { color: #ffffff; font-size: 22px; font-weight: bold; } </style> </head> <body> <div class="boutique-principal"> <div class="boutique-zone-banniere"> <img src="https://aht.li" alt="Bannière de la Boutique" class="boutique-img-banniere"> <div class="boutique-titre-banniere">MA BOUTIQUE VITRINE</div> </div> <div class="boutique-nav-haut"> <a href="Accueil.html">✦ Accueil</a> </div> <div class="boutique-grille-produits"> <div class="boutique-carte-item"> <img src="https://placeholder.com" alt="Produit 1" class="boutique-img-item"> <h4 class="boutique-nom-item">✦ Grimoire Magique</h4> <div class="boutique-prix-item">25,00 €</div> <a href="#" class="boutique-btn-voir">Détails</a> </div> <div class="boutique-carte-item"> <img src="https://placeholder.com" alt="Produit 2" class="boutique-img-item"> <h4 class="boutique-nom-item">✦ Potion de Chance</h4> <div class="boutique-prix-item">12,50 €</div> <a href="#" class="boutique-btn-voir">Détails</a> </div> <div class="boutique-carte-item"> <img src="https://placeholder.com" alt="Produit 3" class="boutique-img-item"> <h4 class="boutique-nom-item">✦ Baguette de Sureau</h4> <div class="boutique-prix-item">45,00 €</div> <a href="#" class="boutique-btn-voir">Détails</a> </div> <div class="boutique-carte-item"> <img src="https://placeholder.com" alt="Produit 4" class="boutique-img-item"> <h4 class="boutique-nom-item">✦ Cristal de Quartz</h4> <div class="boutique-prix-item">18,00 €</div> <a href="#" class="boutique-btn-voir">Détails</a> </div> <div class="boutique-carte-item"> <img src="https://placeholder.com" alt="Produit 5" class="boutique-img-item"> <h4 class="boutique-nom-item">✦ Chapeau de Sorcière</h4> <div class="boutique-prix-item">30,00 €</div> <a href="#" class="boutique-btn-voir">Détails</a> </div> </div> <div class="boutique-banniere-bas"> <span class="boutique-texte-bas">Merci de votre visite ✦</span> </div> </div> </body> </html>

1. Remplacer la couleur de fond par une image URL

Par défaut, le code applique une couleur unie sombre : background-color: #0f172a; au début de la balise <style>. Pour installer une image de fond de votre choix, remplacez cette ligne par :

background-image: url('VOTRE_LIEN_IMAGE'); background-attachment: fixed; background-size: cover;

2. Image "Locale" vs Image "Hébergée"

3. Comment fonctionne la Grille en colonnes ?

Pour l'affichage, ce modèle utilise un système moderne de Grille (display: grid;) réglé sur 5 colonnes (repeat(5, 1fr)). Cela permet d'aligner automatiquement 5 produits côte à côte sur une même ligne.

Pour ajouter de nouveaux articles : Vous n'avez pas besoin de créer des tableaux ou de recalculer les espaces. Il vous suffit de copier l'un des blocs de produit (depuis <div class="boutique-carte-item"> jusqu'à sa fermeture </div>) et de le coller à la suite. La grille placera le nouvel article sur une deuxième ligne de manière parfaitement alignée !

4. Créer des fiches produits individuelles

Pour lier le bouton "Détails" à une page qui explique le produit en grand :

5. Gérer plusieurs pages de produits (La Pagination)

Si vous avez beaucoup de produits à vendre ou à exposer, il ne faut pas tout mettre sur la même page. Vous devez diviser votre catalogue sur plusieurs fichiers (ex: boutique.html pour la page 1, boutique2.html pour la page 2, etc.).

Pour ajouter les boutons de navigation en bas de votre grille : Repérez la fin de votre grille de produits dans le code, et collez simplement ce petit bloc pour afficher les boutons de pages :

<!-- 🧭 BARRE DE PAGINATION À METTRE SOUS LA GRILLE --> <div style="text-align: center; margin: 30px 0;"> <a href="boutique.html" style="display: inline-block; padding: 6px 12px; background: #f43f5e; color: #ffffff; border: 4px double #f43f5e; border-radius: 3px; text-decoration: none; font-weight: bold; margin: 0 4px;">1</a> <a href="boutique2.html" style="display: inline-block; padding: 6px 12px; background: rgba(30, 41, 59, 0.8); color: #ffffff; border: 4px double #38bdf8; border-radius: 3px; text-decoration: none; font-weight: bold; margin: 0 4px;">2</a> <a href="boutique3.html" style="display: inline-block; padding: 6px 12px; background: rgba(30, 41, 59, 0.8); color: #ffffff; border: 4px double #38bdf8; border-radius: 3px; text-decoration: none; font-weight: bold; margin: 0 4px;">3</a> <a href="boutique2.html" style="display: inline-block; padding: 6px 12px; background: rgba(30, 41, 59, 0.8); color: #38bdf8; border: 4px double #38bdf8; border-radius: 3px; text-decoration: none; font-weight: bold; margin: 0 4px;">Suivant &gt;</a> </div>