How to Add Variant Selector in Shopify on Collection Pages?

Comment ajouter un sélecteur de variantes dans Shopify sur les pages de collection ?

Un guide étape par étape pour ajouter des sélecteurs de variantes dans Shopify sur les pages de collection.

Un sélecteur de variantes est un outil qui vous permet de créer plusieurs versions du même produit avec des attributs différents. Vous pouvez utiliser cette fonctionnalité sur les pages de collections, de ventes et de panier.

Dans cet article, nous allons discuter de la façon dont vous pouvez ajouter un sélecteur de variantes sur votre page de collection à l'aide de l'outil de création Shopify. Nous allons utiliser l'exemple des "écouteurs à réduction de bruit" à cette fin.

Pour ajouter un sélecteur de variantes à vos pages de collection dans Shopify, vous devez modifier votre modèle de collection.

Voici les étapes à suivre :

  1. Depuis votre administration Shopify, allez dans "Boutique en ligne" puis cliquez sur "Thèmes".
  2. Trouvez le thème que vous souhaitez modifier et cliquez sur le bouton "Actions". Dans le menu déroulant, sélectionnez "Modifier le code".
  3. Dans le répertoire "Templates", cliquez sur le fichier appelé "collection.liquid". C'est le modèle qui contrôle la mise en page et le contenu de vos pages de collection.
  4. Trouvez l'endroit dans le modèle où vous souhaitez ajouter le sélecteur de variantes. Cela se fait généralement en haut de la page, au-dessus des listes de produits.
  5. Ajoutez le code suivant à votre modèle pour afficher le sélecteur de variantes :

    Copier le code

    {% for variant in product.variants %} <label for="variant-{{ variant.id }}"> {{ variant.title }} </label> <input type="radio" id="variant-{{ variant.id }}" name="variant" value="{{ variant.id }}" {% if variant == product.selected_or_first_available_variant %} checked="checked"{% endif %}> {% endfor %}

    Ce code va parcourir toutes les variantes du produit et créer un bouton radio pour chaque variante. La variante sélectionnée sera celle qui est cochée par défaut.

  6. Enregistrez vos modifications et publiez votre thème pour rendre le sélecteur de variantes visible sur vos pages de collection.

Avantages d'utiliser des variantes de produits sur votre site web Shopify

Visibilité accrue des produits : En proposant différentes variations d'un produit (telles que différentes tailles ou couleurs), les clients peuvent plus facilement trouver le produit spécifique qu'ils recherchent, ce qui peut entraîner une augmentation des ventes.

Meilleure organisation : Les variantes de produits peuvent vous aider à garder votre catalogue de produits organisé et facile à parcourir, car les clients peuvent filtrer leurs résultats de recherche par variante.

Gestion des stocks simplifiée : Si vous utilisez un système qui vous permet de suivre l'inventaire au niveau des variantes, vous pouvez gérer plus facilement votre stock et éviter de vendre des articles en rupture de stock.

Opportunités de vente incitative accrues : En proposant des variantes de produits connexes, vous pouvez présenter aux clients des options supplémentaires qui pourraient les intéresser, ce qui pourrait entraîner une augmentation des ventes.

Expérience client améliorée : Offrir des variantes de produits peut améliorer l'expérience d'achat globale des clients en leur donnant plus d'options à choisir et en leur facilitant la recherche des produits qu'ils recherchent.

Conclusion :

Après avoir lu l'article complet, vous pouvez ajouter des sélecteurs de variantes dans Shopify sur la page des collections. Si vous avez besoin de l'aide de designers et de développeurs Shopify pour mettre à jour, modifier et ajouter des fonctionnalités à votre boutique Shopify, contactez-nous dès aujourd'hui.

Vous pouvez afficher le sélecteur de variantes en fonction du matériau, des tailles et des couleurs du produit. Voici les différentes options de sélecteur de variantes que vous pouvez ajouter à votre boutique Shopify avec l'aide de nos concepteurs et développeurs web Shopify.

Retour au blog