Éléments Shopify – Image de Collection

Dans cet article, vous apprendrez un autre élément de Shopify intitulé Image de collection

À propos de l’élément Image de collection

L’élément Image de collection est créée pour afficher des images de votre collection de Shopify sur votre page afin d’augmenter votre taux de conversion. Vous pouvez utilise cet élément Image de collection pour promouvoir votre collection sur n’importe quelle page sans collection ou sur une page de collection.

Accès à l’élément Image de collection

Étape 1 : Cliquez sur l’icône Ajouter un élément de Shopify dans le Catalogue d’élément

Étape 2 : Cliquez sur l’élément Image de collection dans le menu déroulant

Étape 3 : Faites glisser et déposez l’élément dans l’éditeur de page et puis commencez à utiliser l’élément.

L’élément Image de collection est livrée avec une variante commune mais nous continuerons à ajouter plus de variantes pour vous aider à gagner du temps.

Veuillez noter que vous pouvez chercher cet élément en utilisant la fonction de recherche au lieu de le trouver dans la barre latérale. 

Collection Image

Configuration de l’élément Image de collection

L’élément Image de collection est fourni avec de nombreux paramètres vous permettant d’ajuster l’apparence du contenu pour obtenir le meilleur taux de conversion possible. 

Sélectionner l’élément dans la mise en page pour voir ses paramètres.

Lorsque vous faites glisser et déposez cet élément dans l’éditeur de page, vous avez le choix entre deux choix pour la Source de collection :

  • Auto
  • Collection personnalisée

Collection Image

Notez que si vous êtes dans la Page de collection et que vous utilisez l’élément Image de collection, vous pouvez choisir l’option Source de collection. Cependant, si vous êtes dans une page normale et que vous utilisez cet élément, l’option Source de collection est désactivée et la Collection personnalisée est choisie par défaut.

Si vous choisissez Auto, la collection qui a été attribuée lors de la création de cette page de collection sera affichée dans l’éditeur de page. L’option Auto est l’option par défaut lorsque vous utilisez l’élément Image de collection

Vous pouvez choisir la Collection personnalisée et sélectionner la collection que vous souhaitez. 

Collection Image

Configuration générale de l’onglet

Contenu
Activer la pleine largeur : adapter l’image à la largeur de son conteneur (exemple : colonne).Collection Image
Largeur de l’image : vous pouvez ajuster la largeur de l’image lorsque vous désactivez l’option Activer la pleine largeurCollection Image
Format d’image : Vous pouvez choisir entre 3 types :Original : L’image s’affichera dans sa taille d’origine

Collection Image

Carré : l’image s’affichera sous forme carrée

Collection Image

Personnalisé : vous pouvez ajuster la hauteur de l’image

Collection Image

Hauteur de l’image : vous pouvez ajuster la hauteur de l’image lorsque vous sélectionnez Personnalisé dans le format d’image.Collection Image
Image Object Fit : dans les types Carré et Personnalisé, vous pouvez redimensionner l’image pour l’adapter à son conteneur.Couverture : l’image s’étirera pour s’adapter au conteneur

Collection Image

Contenir : l’image se compressera pour rester à l’intérieur de son conteneur

Collection Image

Position de l’image : Dans les types Carré et Personnalisé, vous pouvez sélectionner la position de l’image à l’intérieur son conteneur.Collection ImageSi l’image correspond à son conteneur, la position de l’image s’affichera comme ceci

Collection Image

 

Relier à la collection : Activer cette option si vous souhaitez relier l’image à la page de collection correspondante lorsqu’un utilisateur clique dessus.Collection Image

Vous pouvez obtenir plus d’informations sur les paramètres d’ATTRIBUTS, de VISIBILITÉ, d’ANIMATION ici

Configuration de style

Vous pouvez consulter plus d’informations sur l’onglet de Style ici

 

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese. Please check the flags on the page header.

I got it!