Comment cacher les variantes non disponibles dans Shopify

Q: ?

Bien que Shopify ne propose pas de fonctionnalité intégrée pour cacher les variantes non disponibles, vous pouvez atteindre cette fonctionnalité en ajoutant un petit extrait de code personnalisé à votre thème. Voici les étapes pour mettre en œuvre cette solution :

Table des matières

Introduction
Comprendre le défi des variantes non disponibles
Pourquoi vous devriez cacher les variantes non disponibles
Solutions alternatives
L'importance de l'expérience utilisateur en e-commerce
Conclusion
Section FAQ

Introduction

Avez-vous déjà ressenti la frustration de naviguer dans un magasin en ligne encombré, pour ne trouver que des variantes de produits non disponibles affichées ? En tant que détaillant en ligne, vous comprenez qu’une expérience d’achat fluide est cruciale pour maintenir l'engagement des clients et encourager les conversions. Lorsque les clients sont confrontés à des options qu'ils ne peuvent pas sélectionner - comme une taille qui n'existe pas pour une certaine couleur - cela peut entraîner de la confusion, voire l'abandon de leur panier d'achat.

Dans le monde de l’e-commerce, chaque détail compte. Gérer efficacement les variantes de produits n'est pas seulement une question d'esthétique ; cela impacte directement l'expérience utilisateur et les ventes. Cet article de blog a pour objectif de vous guider à travers les étapes essentielles sur comment cacher les variantes non disponibles dans Shopify, en veillant à ce que vos clients voient seulement des options qu'ils peuvent réellement acheter. À la fin de cet article, vous comprendrez non seulement les aspects techniques de la mise en œuvre de cette fonctionnalité, mais aussi son importance pour améliorer l'expérience utilisateur.

Nous explorerons les défis posés par l'affichage de variantes non disponibles, les solutions disponibles et comment mettre en œuvre un code personnalisé dans votre thème Shopify. De plus, nous fournirons des aperçus sur l'importance de l'expérience utilisateur et comment une gestion adéquate des variantes peut contribuer au succès de votre marque. Plongeons dans les spécificités !

Comprendre le défi des variantes non disponibles

Lors de la gestion d'un magasin en ligne, en particulier un avec de nombreux produits et options, vous pourriez rencontrer des situations où certaines combinaisons de variantes n'existent pas. Par exemple, si vous vendez des T-shirts dans différentes couleurs et tailles, vous pourriez n'offrir que des tailles spécifiques pour certaines couleurs. Le comportement par défaut de Shopify est d'afficher toutes les variantes possibles - cela comprend celles qui sont non disponibles, ce qui peut être frustrant pour les clients.

L'impact sur l'expérience utilisateur

Lorsque les clients voient des options grises ou marquées comme non disponibles, cela peut nuire à leur expérience d'achat. Cela entraîne de la confusion, car ils peuvent ne pas comprendre pourquoi ils ne peuvent pas sélectionner certaines options. Une page de produit bien organisée qui n'affiche que des variantes disponibles peut améliorer considérablement l'engagement des utilisateurs et réduire le taux de rebond.

En cachant les variantes non disponibles, vous créez une interface d'achat plus propre et plus intuitive. Cela améliore non seulement l'expérience utilisateur mais reflète également positivement la réputation de votre marque.

Pourquoi vous devriez cacher les variantes non disponibles

Expérience utilisateur améliorée : Les clients apprécient une expérience d'achat simple sans distractions inutiles. En affichant uniquement les variantes disponibles, vous rationalisez le processus de décision.
Augmentation des taux de conversion : Réduire la confusion sur les pages de produits peut entraîner des taux de conversion plus élevés. Les clients sont plus susceptibles de finaliser un achat lorsqu'ils voient des options qui répondent à leurs besoins.
Perception de marque améliorée : Un magasin en ligne bien organisé reflète le professionnalisme et l'attention portée aux détails. Cela peut encourager la fidélité des clients et les affaires répétées.
Diminution des demandes des clients : En clarifiant la confusion autour des variantes non disponibles, vous pouvez réduire le nombre de demandes de service client concernant la disponibilité des produits.

Bien que Shopify ne fournisse pas de fonctionnalité intégrée pour cacher les variantes non disponibles, vous pouvez atteindre cette fonctionnalité en ajoutant un petit extrait de code personnalisé à votre thème. Voici les étapes pour mettre en œuvre cette solution :

Guide étape par étape pour mettre en œuvre un code personnalisé

Étape 1 : Accéder à votre panneau d'administration Shopify

Connectez-vous à votre panneau d'administration Shopify.
Naviguez vers Canaux de vente > Magasin en ligne > Thèmes.

Étape 2 : Personnalisez votre thème

Trouvez le thème que vous souhaitez modifier et cliquez sur Personnaliser.
Sélectionnez le modèle de produit où vous souhaitez cacher les variantes non disponibles.

Étape 3 : Ajouter un code personnalisé

Dans la section Informations sur le produit, cliquez sur + Ajouter un bloc et sélectionnez Bloc de liquide personnalisé.
Copiez et collez le code JavaScript personnalisé suivant dans le champ Liquide personnalisé :

<script language="javascript" type="text/javascript">
const pickerType = (document.querySelector('variant-radios')) ? 'radios' : 'selects';
const variantSelects = (pickerType == 'radios') ? document.querySelector('variant-radios') : document.querySelector('variant-selects');
const fieldsets = (pickerType == 'radios') ? Array.from(variantSelects.querySelectorAll('fieldset')) : Array.from(variantSelects.querySelectorAll('.product-form__input--dropdown'));
const productJson = JSON.parse(variantSelects.querySelector('[type="application/json"]').textContent);
let selectedOptions = [];
variantSelects.addEventListener('change', rebuildOptions);
this.rebuildOptions();

function validCombo(inputValue, optionLevel) {
    for(let i = 0; i < productJson.length; i++) {
        if(optionLevel == 1){
            if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == inputValue) {
                return true;
            }
        } else {
            if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == selectedOptions[1] && productJson[i].option3 == inputValue) {
                return true;
            }
        }
    }
    return false;
}

function rebuildOptions() {
    selectedOptions = fieldsets.map((fieldset) => {
        return (pickerType == 'radios') ? Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value : Array.from(fieldset.querySelectorAll('select'), (select) => select.value);
    });

    for(let optionLevel = 1, n = fieldsets.length; optionLevel < n; optionLevel++) {
        const inputs = (pickerType == 'radios') ? fieldsets[optionLevel].querySelectorAll('input') : fieldsets[optionLevel].querySelectorAll('option');
        inputs.forEach(input => {
            input.disabled = (validCombo(input.value,optionLevel)) ? false : true;
            if(pickerType == 'radios'){
                const label = fieldsets[optionLevel].querySelector(`label[for="${input.id}"]`);
                label.style.display = (input.disabled) ? "none" : "";
            } else {
                input.hidden = (validCombo(input.value,optionLevel)) ? false : true;
            }
        });
    }

    for (let optionLevel = 1, fieldsetsLength = fieldsets.length, change = false; optionLevel < fieldsetsLength && !change; optionLevel++) {
        if(pickerType == 'radios'){
            if(fieldsets[optionLevel].querySelector('input:checked').disabled === true) {
                change = (fieldsets[optionLevel].querySelector('input:not(:disabled)').checked = true);
            }
        } else {
            if(fieldsets[optionLevel].querySelector('option:checked').disabled === true) {
                change = (fieldsets[optionLevel].querySelector('option:not(:disabled)').selected = "selected");
            }
        }
        if(change) variantSelects.dispatchEvent(new Event('change', { bubbles: true }));
    }
}
</script>

Cliquez sur Enregistrer pour appliquer les modifications.

Étape 4 : Tester les modifications

Rafraîchissez votre page produit pour vous assurer que les variantes non disponibles sont désormais cachées en fonction des options sélectionnées.
Testez la fonctionnalité en sélectionnant différentes options pour confirmer que seules les variantes disponibles sont affichées.

En suivant ces étapes, vous pouvez efficacement cacher les variantes non disponibles sur votre boutique Shopify, offrant ainsi une expérience d'achat plus propre et plus conviviale.

Solutions alternatives

Si vous préférez ne pas traiter avec le code, il existe d'autres approches pour gérer les variantes non disponibles :

1. Utilisez des applications tierces

Plusieurs applications Shopify peuvent vous aider à gérer les variantes de produits et à cacher les articles en rupture de stock. Parmi les options populaires, citons :

Out-of-Stock Police : Cette application vous permet de cacher complètement les produits et leurs variantes en rupture de stock ou simplement de les pousser vers le bas sur les pages de collection.
King Product Options : Cette application utilise une logique conditionnelle pour gérer et afficher les options de produits en fonction de la disponibilité.

2. Modifier les paramètres d'inventaire

Si vous souhaitez une approche simple, vous pouvez ajuster manuellement les paramètres d'inventaire pour chaque variante :

Accédez à votre panneau d'administration Shopify.
Naviguez vers Produits et sélectionnez l'article.
Dans la section Variantes, décochez l'option de continuer à vendre lorsque le stock est épuisé et mettez la quantité en stock à zéro.

Cependant, gardez à l'esprit que cette méthode supprime complètement les produits de la visibilité, ce qui peut ne pas être idéal pour tous les propriétaires de magasins.

L'importance de l'expérience utilisateur en e-commerce

Créer une expérience utilisateur optimale va au-delà du simple fait de cacher les variantes non disponibles. Cela englobe tous les aspects de votre boutique en ligne, du design à la fonctionnalité. Une expérience utilisateur bien conçue peut mener à une satisfaction client accrue, à une fidélité accrue et, en fin de compte, à des ventes plus élevées.

Collaborer avec des experts

Chez Praella, nous nous spécialisons dans l'expérience utilisateur et le design, offrant des solutions basées sur des données adaptées à vos besoins spécifiques. Notre équipe peut vous aider à créer des expériences de marque mémorables pour vos clients. Que vous ayez besoin de développement web ou de consultation stratégique, nous sommes là pour vous guider dans votre parcours vers une croissance exponentielle. Explorez nos services sur Praella Solutions.

Conclusion

Dans le paysage concurrentiel de l'e-commerce, présenter vos produits de manière organisée et conviviale peut faire la différence pour votre magasin par rapport aux autres. Cacher les variantes non disponibles dans Shopify améliore non seulement l'attrait esthétique de vos pages de produits, mais améliore également considérablement l'expérience d'achat globale de vos clients.

En suivant les étapes décrites dans cet article de blog, vous pouvez vous assurer que vos clients ne voient que des options viables, ce qui peut à son tour mener à des conversions et à une satisfaction client accrues. N'oubliez pas, chaque détail compte dans le monde du commerce électronique.

Si vous cherchez à améliorer davantage votre boutique Shopify ou avez besoin d'assistance pour des solutions personnalisées, envisagez de demander de l'aide professionnelle. Ensemble, nous pouvons explorer comment votre entreprise peut bénéficier de la planification stratégique, du développement web et de services de design exceptionnels.

Section FAQ

Q1 : Puis-je cacher des variantes non disponibles sans coder ?

Oui, vous pouvez utiliser des applications tierces comme Out-of-Stock Police ou King Product Options pour gérer et cacher des variantes non disponibles sans avoir besoin de coder.

Q2 : Et si je cache accidentellement trop de variantes ?

Si vous remarquez que trop de variantes sont cachées, vous pouvez facilement revenir en arrière en supprimant le code personnalisé ou en ajustant les paramètres dans votre gestion des stocks.

Q3 : Cacher les variantes non disponibles affectera-t-il mon SEO ?

Cacher les variantes non disponibles ne devrait pas avoir d'impact négatif sur votre SEO si cela est fait correctement. Assurez-vous que le contenu de votre boutique reste pertinent et accessible aux moteurs de recherche.

Q4 : Comment puis-je améliorer l'expérience utilisateur globale de ma boutique Shopify ?

Améliorer l'expérience utilisateur implique d'optimiser le design de votre site, d'assurer des temps de chargement rapides, de rationaliser la navigation et de fournir des informations claires sur les produits. Envisagez de consulter des professionnels comme Praella pour améliorer ces aspects.

Q5 : Quelles autres fonctionnalités puis-je mettre en œuvre pour augmenter les ventes ?

Envisagez d'incorporer des fonctionnalités telles que des avis d'acheteurs, des listes de souhaits ou des recommandations de produits. Ces éléments peuvent améliorer l'engagement des utilisateurs et augmenter les taux de conversion.

Incorporer ces stratégies non seulement améliorera l'efficacité de votre boutique Shopify mais contribuera également à une expérience d'achat plus agréable pour vos clients.

Comment cacher les variantes non disponibles dans Shopify.