# 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

<figure><img src="/files/ab8e0d0bf5f97539bb3dcd59df60c1a7792c3313" alt=""><figcaption></figcaption></figure>

***

### 🧩 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


---

# 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/sections-and-features/image-stream-section.md?ask=<question>
```

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.
