# Section flux d’images

### **Ce que vous apprendrez**

* Comment créer une galerie d'images qui défile horizontalement
* Comment contrôler la vitesse, la direction et l'espacement du défilement
* Comment ajouter des légendes et des liens aux images
* Comment ajuster la mise en page et la typographie pour ordinateur et mobile

***

### 🧩 Présentation de la section

La section Flux d'Images est une rangée d'images à défilement horizontal, idéale pour présenter des visuels de campagne, des looks éditoriaux ou des temps forts de la marque. Elle ajoute du mouvement à votre vitrine et peut être configurée pour défiler automatiquement.

***

### Comment ajouter la section

1. Dans le **éditeur de thème Shopify**, cliquez **Ajouter une section**
2. Sélectionnez **Flux d’images**
3. Faites glisser la section à l'emplacement souhaité sur la page

***

### Ajout d'images

Chaque image est ajoutée à l'aide d'un bloc appelé **Image**.

Pour ajouter une image :

* Cliquer sur **Ajouter un bloc**, puis sélectionnez **Image**
* Téléversez ou choisissez votre image
* (Optionnel) Ajoutez une **Légende** – cela apparaît sous l'image

> 💡 Astuce : Gardez les légendes courtes pour une mise en page épurée

***

### Paramètres de la section

#### Contenu & liens

* **Titre de la section** : Ajoutez un titre pour la section (optionnel)
* **URL du lien Voir** : Ajoutez un lien vers un produit, une collection ou une page
* **Texte du lien Voir** : C'est le texte du bouton, comme "ACHETER"

#### Couleurs

* **Couleur d'arrière-plan** : Définissez l'arrière-plan derrière le flux
* **Couleur du titre de la section** : Définissez la couleur du titre et du lien Voir

***

### Mise en page et affichage

* **Images par ligne sur ordinateur** : Choisissez combien d'images s'affichent en largeur (2 à 6)
* **Ratio d'aspect de l'image** : Contrôle la forme de l'image (par ex. Portrait, Carré, Paysage)
* **Mode hauteur**:
  * *Réactif* : Les images sont redimensionnées en fonction du ratio d'aspect
  * *Pleine hauteur* : La section remplit la hauteur de l'écran (le titre et les boutons sont masqués)

Options supplémentaires :

* **Inverser la direction du flux** : Activez pour défiler de droite à gauche
* **Masquer sur mobile** : Masque toute la section sur les téléphones
* **Vitesse de défilement automatique** : Contrôle la rapidité du déplacement des images (mesurée en pixels par seconde)

> ⚠️ Des vitesses de défilement plus lentes paraissent plus fluides et sont plus faciles à suivre

***

### Paramètres de typographie

* **Taille de l'en-tête de section (ordinateur)** : Par défaut c'est 16px
* **Taille de l'en-tête de section (mobile)** : Par défaut c'est 14px
* **Titre de section en gras** : Basculer activé/désactivé
* **Lien Voir en gras** : Basculer activé/désactivé

***

### Paramètres d'espacement

Vous pouvez ajuster l'espacement pour l'ordinateur et le mobile.

**Espacement pour ordinateur**

* Haut : 20px
* Bas : 20px

**Espacement mobile**

* Haut : 16px
* Bas : 16px

**Espacement entre les images**

* Choisissez parmi : Aucun, Petit, Moyen ou Grand

> 💡 Astuce : Utilisez « Aucun » pour un rendu homogène, ou ajoutez de l'espacement pour laisser respirer chaque image

***

### Exemple de structure de section

La section inclut plusieurs blocs d'image, chacun avec sa propre image et sa légende.

Exemple :

* Image – Look 1
* Image – Look 2
* Image – Look 3
* Image – Look 4

***

### **Besoin d’aide ?**

* 💬 **Rejoignez notre communauté 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