Masquer les variantes épuisées

Vous pouvez empêcher les clients de sélectionner des variantes épuisées en supprimant ou en désactivant celles-ci sur la page du produit.

Limites

Les personnalisations décrites sur cette page ne fonctionnent pas dans les cas suivants :

  • Vos produits comportent plus d’une option de produit.
  • Vous utilisez le thème Express et la page de produit est configurée pour afficher les produits dans une superposition

Thèmes avec et sans sections

Étapes à suivre pour les thèmes avec sections

Sélection de votre thème

Les étapes de cette personnalisation varient selon le thème choisi. Cliquez sur le bouton de votre thème avant de suivre les instructions ci-dessous :

Étapes à suivre pour les thèmes sans sections

Masquer les variantes épuisées

Si vous utilisez un thème sans section, vous pouvez suivre les étapes ci-après pour masquer les variantes épuisées sur la page de produit.

  1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
  2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
  3. Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
  4. Nommez votre nouvel extrait remove-sold-out :
    Add new snippet
  5. Dans votre nouveau fichier d’extrait, collez le code suivant :
{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.remove();
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}
  1. Cliquez sur Save (Enregistrer).
  2. Dans le répertoire Mise en page, cliquez sur theme.liquid.
  3. Vers la fin du fichier, juste avant la balise de fermeture </body>, collez le code suivant :
{% render 'remove-sold-out' %}
  1. Cliquez sur Save (Enregistrer).

Désactiver les variantes épuisées

Si vous utilisez un thème sans section, vous pouvez suivre les étapes ci-après pour désactiver les variantes épuisées. Celles-ci continueront de s’afficher sur la page de produit, mais elles ne pourront pas être sélectionnées.

  1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
  2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
  3. Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
  4. Nommez votre nouvel extrait disable-sold-out :
    Add new snippet
  5. Dans votre nouveau fichier d’extrait, collez le code suivant :
{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.setAttribute('disabled', '');
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}
  1. Cliquez sur Save (Enregistrer).
  2. Dans le répertoire Mise en page, cliquez sur theme.liquid.
  3. Vers la fin du fichier, juste avant la balise de fermeture </body>, collez le code suivant :
{% render 'disable-sold-out' %}
  1. Cliquez sur Save (Enregistrer).

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement