Section Flux d'images

Ce que vous apprendrez

  • Comment créer une galerie d'images à défilement horizontal

  • Comment contrôler la vitesse de défilement, la direction et l'espacement

  • Comment ajouter des légendes et des liens aux images

  • Comment ajuster la mise en page et la typographie pour ordinateur et mobile

🧩 Aperçu de la section

La section Flux d'images est une rangée d'images à défilement horizontal, idéale pour afficher des images de campagne, des looks éditoriaux ou des points 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 :

  • Cliquez sur Ajouter un bloc, puis sélectionnez Image

  • Téléversez ou choisissez votre image

  • (Optionnel) Ajoutez une Légende – ceci apparaît sous l'image

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

Paramètres de la section

Contenu et 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: Il s'agit du 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 rangée sur ordinateur: Choisissez combien d'images s'affichent horizontalement (2 à 6)

  • Ratio d'aspect de l'image: Contrôle la forme de l'image (par ex. Portrait, Carré, Paysage)

  • Mode de hauteur:

    • Responsive: Les images s'adaptent 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 vitesse de 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 16px

  • Taille de l'en-tête de section (Mobile): Par défaut 14px

  • Titre de section en gras: Activer/désactiver

  • Lien Voir en gras: Activer/désactiver

Paramètres d'espacement

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

Espacement pour ordinateur

  • Haut : 20px

  • Bas : 20px

Espacement pour mobile

  • Haut : 16px

  • Bas : 16px

Espace 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 comprend 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

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.

PrécédentSection sélecteur d'imagesSuivantSection Marquee

Mis à jour