4. Création et personnalisation de votre page produit

Pour Plain Jane et Interactive

📓 Remarque : Il y a une nouvelle mise en page Product Section Showcase disponible qui n'est pas couverte dans cette vidéo. Pour les instructions d'installation et les détails, visitez : Product Section Showcase

Ce que vous apprendrez

• Comment personnaliser la mise en page de la page produit dans Plain Jane v3 et Interactive v2

• Tous les types de blocs et options de style à l'intérieur de la section produit

• Comment utiliser la section produit Scroll Layout (version archivée)

• Où ajuster la taille de la galerie, les styles de boutons, les accordéons, et plus

📓 Remarque : Le Scroll Layout (anciennement appelé Archived Layout) est une alternative plus ancienne à la section produit par défaut. Il est toujours disponible mais ne propose pas de personnalisation basée sur des blocs.

---

🛠️ Accéder à la page produit dans l'éditeur de thème

1. Aller à Boutique en ligne > Thèmes > Personnaliser les.

2. Utilisez le menu déroulant en haut au centre pour sélectionner Produits > Produit par défaut.

Modèle de page produit dans le personnalisateur de thème

1. Pour prévisualiser un produit différent, cliquez Changer dans la barre de prévisualisation et sélectionnez un autre article.

---

🧱 Blocs principaux de la section produit

La page produit est composée d'un Section produit et d'un blocs en dessous. Vous pouvez réorganiser, supprimer ou personnaliser chacun d'eux.

Blocs courants :

• Étiquette En Promotion : Couleur, padding et espacement personnalisés

• En-tête : Contrôle l'affichage du titre du produit

• SKU : Optionnel, affiche le SKU si disponible

• Prix : Afficher avec ou sans symbole de devise

• Description : Prend en charge la limite de mots et le lien « Lire la suite »

• Galerie : Contrôlé via les paramètres parent de la section produit

• Boutons : Ajouter au panier et sélecteurs de variantes

• Accordéons : À utiliser pour les guides de tailles, politiques de retour, FAQ, etc.

💡 Astuce : Pour ajouter un bloc, cliquez sur le Section produit, puis Ajouter un bloc.

---

🎛️ Paramètres de mise en page de la section produit

Cliquez sur le niveau supérieur Section produit pour accéder à ces options de mise en page :

Paramètres et options de mise en page de la section produit 1 (Showcase)

• Position de l'image: Gauche ou Droite

• Animation de fondu : Contrôle la façon dont le produit apparaît en fondu

• Colonnes de la galerie : De 1 à 6 (disponible seulement si la galerie est à gauche)

• Dimensionnement de l'image (Bureau & Mobile) : Utilisez les curseurs pour ajuster

Section produit 2 (Miniature) alternative de mise en page

⚠️ Certains paramètres (comme les colonnes) ne sont disponibles que lorsque la galerie est à gauche.

Paramètres et options de personnalisation de la galerie d'images produit

---

🧩 Paramètres supplémentaires des blocs

Étiquette En Promotion

• Changer la couleur de fond et du texte de l'étiquette

• Ajuster l'espacement autour du badge

Affichage du prix

• Activer/désactiver le symbole de la devise

• Ajuster la taille de la police pour les styles luxury/minimal

Bloc Description

• Définir la couleur, les marges et la limite de mots

• Active le lien d'extension « Lire la suite »

Boutons et variantes

• Activer/désactiver le bouton Produit suivant

• Personnaliser le rayon des coins, les marges, l'espacement

Accordéons

• Ajouter plusieurs : par ex., Tableau des tailles, Retours/Échanges

• Personnaliser les titres et l'espacement des marges

---

🗂️ Section produit Scroll Layout (archivée)

Le Scroll Layout est une version archivée de la section produit qui affiche une galerie verticale complète.

Comment l'utiliser :

1. Cliquez sur Ajouter une section > Défilement de la section produit

2. Masquez la section produit actuelle pour éviter les doublons

3. Personnalisez en utilisant le panneau de paramètres à droite (cette version n'utilise pas de blocs)

Principales différences :

• Galerie à défilement vertical avec toutes les images empilées

• Parfait pour le mobile et le storytelling produit long format

• Pas de prise en charge des blocs — tous les paramètres sont configurés dans le panneau de section

• Moins de fonctionnalités de personnalisation (par ex., pas de coins arrondis)

💡 Astuce : Utilisez ceci si vous préférez l'ancienne expérience de défilement des versions précédentes du thème.

---

➕ Ajout de sections supplémentaires à la page produit

Vous pouvez ajouter d'autres sections de thème Shopify à la page produit comme sur n'importe quelle autre page :

• Flux d’images

• Inscription par e-mail

• Diaporama

• Liste de collections

Réorganisez et personnalisez celles-ci pour qu'elles correspondent au style de votre marque.

Une fois les comptes hérités activés, utilisez les pages de documentation de cette section pour styliser chaque partie de l'expérience client.

• Besoin d'aide ? Pour le support technique, rejoignez-nous sur Discord : Rejoignez notre communauté sur Discord :

• https://discord.gg/hcc2GvgZc6 📧 Envoyez-nous un e-mail à :

• [email protected] 💻 Chat en direct avec nous :