# 4. Création et personnalisation de votre page Produit {% embed url="" %} > 📓 Remarque : Il y a un **nouveau modèle de section produit Vitrine** disponible qui n’est pas couvert dans cette vidéo. Pour les instructions d’installation et les détails, visitez : [Section produit Vitrine](https://openspaces-labs.gitbook.io/openspaces/pages-and-menus/product-page/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 Mise en page Scroll (version archivée) * Où ajuster la taille de la galerie, les styles de boutons, les accordéons, et plus > 📓 Remarque : La `Mise en page Scroll` (anciennement appelée `Mise en page archivée`) est une alternative plus ancienne à la section produit par défaut. Elle est toujours disponible mais ne permet pas de personnalisation par blocs. *** ### 🛠️ Accéder à la page produit dans l’éditeur de thème 1. Aller à **Boutique en ligne** > **Thèmes** > **Personnaliser**. 2. Utilisez le menu déroulant en haut au centre pour sélectionner `Produits > Produit par défaut`. 3. 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 individuels** en dessous. Vous pouvez réordonner, supprimer ou personnaliser chacun d’eux. **Blocs courants :** * **Étiquette en promotion**: Couleur, rembourrage 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 monétaire * **Description**: Prend en charge la limite de mots et le lien « Lire la suite » * **Galerie**: Contrôlée via les paramètres parent de la section produit * **Boutons**: Ajouter au panier et sélecteurs de variantes * **Accordéons**: À utiliser pour les tableaux des 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 : * **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 uniquement si la galerie est à gauche) * **Dimensionnement de l’image (Bureau & Mobile)**: Utilisez les curseurs pour ajuster > ⚠️ Certains paramètres (comme les colonnes) sont disponibles uniquement lorsque la galerie est à gauche. *** ### 🧩 Paramètres supplémentaires du bloc #### Étiquette en promotion * Modifier la couleur de fond et du texte de l’étiquette * Ajuster l’espacement autour du badge #### Affichage des prix * Basculer le symbole monétaire * 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 Mise en page Scroll (Archivée) La Mise en page Scroll est une version archivée de la section produit qui affiche une galerie verticale complète. #### Comment utiliser : 1. Cliquer sur **Ajouter une section** > `Section produit Scroll` 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) #### Différences principales : * Galerie défilante verticale avec toutes les images empilées * Idéal pour le mobile et la narration produit longue * 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 (p. 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 du 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-les pour correspondre au style de votre marque. ### **Besoin d’aide ?** * 💬 **Pour l'assistance technique, rejoignez-nous sur Discord :** * 📧 **Envoyez-nous un e-mail à :** * 💻 **Discutez en direct avec nous :** Disponible du lundi au vendredi, de 10h à 18h EST, directement sur notre site web --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/plain-jane-docs-v2-fr/readme-1/getting-started/4.-creating-and-customizing-your-product-page.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.