1
Ouvrir le thème
Dans Shopify Admin, allez dans Online Store, puis Themes.
Contenu du ZIP
Le kit est volontairement simple. Il contient une section Liquid, un template de démo optionnel et ce guide HTML.
INSTALLATION.html |
Le guide à ouvrir dans un navigateur après extraction du ZIP. |
|---|---|
package/sections/scratch-to-reveal-offer.liquid |
La section Shopify à copier dans le dossier nommé sections. |
package/templates/page.scratch-to-reveal-demo.json |
Un template de page optionnel pour créer une page de démo. |
1. Installer la section
Cette installation demande une seule intervention dans le code du thème. Toute la personnalisation se fait ensuite dans Shopify.
2
Éditer le code
Cliquez sur les trois points du thème, puis sur Edit code.
3
Créer la section
Dans sections, ajoutez une section nommée scratch-to-reveal-offer.
4
Coller le fichier
Collez tout le contenu de scratch-to-reveal-offer.liquid, puis sauvegardez.
2. Ajouter la section à une page
La section peut être placée sur une fiche produit, une page de collection, une page promotionnelle ou un template de démonstration.
- 1 Retournez dans Online Store, puis cliquez sur Customize.
- 2 Ouvrez le template où l'offre doit apparaître.
- 3 Cliquez sur Add section et cherchez Scratch to reveal offer.
- 4 Ajoutez la section, configurez les réglages, puis sauvegardez.
3. Personnaliser sans coder
Tous les textes visibles doivent être remplacés dans le customizer. Le kit ne dépend d'aucune phrase de boutique source.
| Textes | Titre court, grand titre, introduction, cartes explicatives, boutons, textes verrouillés et popup. |
|---|---|
| Cartes à gratter | Nom, valeur, badge, description, message popup, code promo, ID de variante cadeau et palier requis. |
| Paliers | Libellé, sous-titre, quantité ou seuil affiché, et nombre de cartes débloquées. |
| Design | Couleurs, fonds, typographies, rayon, largeur, hauteur des cartes, colonnes et espacements. |
4. Brancher le panier Shopify
Le bouton peut rester informatif ou agir avec les endpoints Ajax Shopify. Les cadeaux et codes ne fonctionnent que si les objets existent déjà dans Shopify.
A
Mode simple
Désactivez le bouton d'ajout au panier et utilisez la section comme bloc promotionnel.
B
Produit lié
Sélectionnez un produit dans les réglages ou placez la section sur une fiche produit.
C
Cadeau automatique
Collez un ID de variante cadeau et activez l'ajout des cadeaux révélés.
D
Code de réduction
Créez le code dans Shopify Admin, puis renseignez ce code dans la carte concernée.
Un code de réduction ou une variante cadeau invalide ne peut pas être inventé par la section. Shopify doit déjà connaître le code ou la variante.
5. Tester avant lancement
Avant d'envoyer des visiteurs sur l'offre, testez le parcours complet sur mobile et desktop.
- ✓Le changement de palier débloque les bonnes cartes.
- ✓Les cartes verrouillées restent impossibles à gratter.
- ✓La popup affiche le bon nom, la bonne valeur et le bon message.
- ✓Le bouton ajoute le produit attendu au panier.
- ✓Les cadeaux sont ajoutés uniquement si les variantes existent et sont disponibles.
- ✓Les codes de réduction s'appliquent seulement si Shopify les accepte.
Dépannage rapide
Les problèmes courants viennent presque toujours du nom du fichier, du placement ou des IDs Shopify.
| La section n'apparaît pas | Vérifiez le dossier sections, le nom scratch-to-reveal-offer.liquid et rechargez le customizer. |
|---|---|
| Le bouton est désactivé | Sélectionnez un produit, installez la section sur une fiche produit ou renseignez un Variant ID forcé. |
| Le cadeau ne s'ajoute pas | Vérifiez l'ID de variante, la disponibilité du produit cadeau et le réglage d'ajout automatique. |
| Le code promo ne marche pas | Vérifiez que le code existe dans Shopify Admin et que les règles de compatibilité Shopify l'autorisent. |