# 4. Création et personnalisation de votre page Produit

{% embed url="<https://youtu.be/AOjRMSNwDZI>" %}

> 📓 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`.

<figure><img src="https://2184181493-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-26b0ac0faddb78fdbcabd581949b16609e550eb3%2F01-product-template.png?alt=media" alt="Product page template in theme customizer"><figcaption><p>Modèle de page produit dans le personnalisateur de thème</p></figcaption></figure>

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 :

<figure><img src="https://2184181493-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-063e17db3d840e566a6f3aefb043ee11a303bf01%2F02-product-section-showcase.png?alt=media" alt="Product Section 1 (Showcase) settings"><figcaption><p>Paramètres et options de mise en page de la section produit 1 (Vitrine)</p></figcaption></figure>

* **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

<figure><img src="https://2184181493-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-6206954acf4635f6173a2878ce73d687b9892136%2F03-product-section-thumbnail.png?alt=media" alt="Product Section 2 (Thumbnail) settings"><figcaption><p>Section produit 2 (Vignettes) alternative de mise en page</p></figcaption></figure>

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

<figure><img src="https://2184181493-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-e121c9dc06e40f193d4de703c35104ee8bdbda83%2F04-product-image-gallery.png?alt=media" alt="Product image gallery settings"><figcaption><p>Paramètres et options de personnalisation de la galerie d’images produit</p></figcaption></figure>

***

### 🧩 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 :** <https://discord.gg/hcc2GvgZc6>
* 📧 **Envoyez-nous un e-mail à :** <support@openspaces.design>
* 💻 **Discutez en direct avec nous :** Disponible du lundi au vendredi, de 10h à 18h EST, directement sur notre site web