Amener les clients à choisir une option

Attention

Les thèmes vintage ne sont pas disponibles dans la Boutique des thèmes. Ces thèmes ne disposent pas des fonctionnalités incluses dans les thèmes Online Store 2.0 de Shopify, et les thèmes vintage gratuits de Shopify ne reçoivent pas d’autres mises à jour que des correctifs de sécurité.

Remarque

Si vous utilisez un thème gratuit de Shopify, vous pourrez peut-être contacter l’assistance de Shopify pour obtenir de l’aide par rapport à ce tutoriel. La conception de cette partie nécessite 15 minutes. Pour plus d’informations, voir Assistance par rapport aux thèmes.

Remarque

Cette personnalisation est faite pour les thèmes vintage de Shopify, et ne s’applique pas aux thèmes Online Store 2.0.

• Découvrez la version de l'architecture de votre thème
• Explorez les personnalisations de thème Online Store 2.0

Lorsque des clients visitent une page de produit dans votre boutique en ligne, la première variante disponible est sélectionnée par défaut. Vous pouvez utiliser cette personnalisation pour désactiver la sélection automatique de la première variante disponible. Ainsi, les clients seront invités à sélectionner manuellement une variante avant qu’il ne s’en affiche une.

Remarque

Comme cette personnalisation empêche la sélection d’une variante par défaut, votre thème risque de ne pas afficher le prix d’un produit avant que les clients n’aient sélectionné une variante. Cela est normal, car aucun prix n’est indiqué pour les produits comportant des variantes. C’est donc la variante sélectionnée qui détermine le prix qui s’affiche.

Thèmes avec et sans sections

Remarque

les étapes de ce tutoriel sont différentes selon que vous utilisez un thème avec sections ou sans section. Un thème avec sections vous permet de glisser-déposer pour organiser la mise en page de votre page d’accueil, tandis qu'un thème sans section ne le permet pas.

Pour déterminer si votre thème prend en charge les sections, accédez à la page Modifier le code du thème. Si le répertoire Sections contient des fichiers, vous utilisez un thème avec sections. Les thèmes sans section ont été publiés avant octobre 2016 et n'ont pas de fichiers dans le répertoire Sections.

Si vous utilisez un thème avec sections, cliquez sur le bouton Thèmes avec sections et suivez les instructions. Si vous utilisez un thème plus ancien, sans section, cliquez sur le bouton Thèmes sans section et suivez les instructions.

É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 :

Boundless

Étapes pour Boundless

Suivez ces étapes pour appliquer la personnalisation à Boundless :

Modification du fichier JavaScript de votre thème

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 Ressources, cliquez sur theme.js ou theme.js.liquid.
4. Recherchez le code initVariantSelectors. En dessous, recherchez le code suivant :

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

Ajoutez le code suivant sur une nouvelle ligne au-dessous :

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Il doit ressembler à ceci :

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Recherchez la ligne de code suivante :

$(selectors.addToCartText).html(theme.strings.soldOut);

Il existe deux instances de cette ligne de code. Toutes deux se trouvent dans la fonction productVariantCallback. Remplacez uniquement la deuxième instance par :

$(selectors.addToCartText).html('Make a Selection');

1. Cliquez sur Save (Enregistrer).

Remarque

Certaines versions du thème Boundless n’incluent pas la ligne de code à remplacer à cette étape. Si vous ne trouvez pas le code, passez à l’étape suivante.

Modification du modèle de la page de produits

Pour modifier le modèle de la page de produits :

1. Dans le répertoire Sections, cliquez sur product-template.liquid.
2. Recherchez la ligne de code suivante :

{% assign current_variant = product.selected_or_first_available_variant %}

Remplacez-le par :

{% assign current_variant = product.selected_variant %}

1. Recherchez le code suivant et supprimez-le :

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Recherchez le code {% schema %}. Collez le code suivant sur sa propre ligne au-dessus de cela :

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Il doit ressembler à ceci :

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Cliquez sur Save (Enregistrer).

Modification des paramètres de langue du bouton Ajouter au panier

Vous pouvez modifier les paramètres de langue du bouton « Ajouter au panier » de sorte que les produits n’apparaissent pas comme « Indisponibles » avant qu’une sélection ne soit faite.

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur ... > Modifier le contenu du thème par défaut.
3. Dans la case Filtre, commencez à taper unavailable pour afficher la traduction « Indisponible ».
4. Remplacez la mention Non disponible par Make a selection.
5. Cliquez sur Save (Enregistrer).

Debut

Étapes pour Debut

Suivez ces étapes pour appliquer la personnalisation à Debut :

Modification du fichier JavaScript de votre thème

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 Ressources, cliquez sur theme.js ou theme.js.liquid.
4. Ajoutez le code suivant au bas du fichier :

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Recherchez le code _updatePrice: function(variant). Remplacez le code suivant :

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
}

par :

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
} */

Si vous ne trouvez pas le code ci-dessus, recherchez le code suivant :

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

Remplacez-le par :

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

1. Recherchez le code this.currentVariant = variant;

Ajoutez le code suivant ci-dessous :

this._updatePaymentButton(variant);

Le résultat doit ressembler à ceci :

this.currentVariant = variant;
this._updatePaymentButton(variant);

1. Recherchez le code _updateImages: function(variant). Remplacez le code suivant :

var currentVariantImage = this.currentVariant.featured_image || {};

par :

if (this.currentVariant != undefined) {
  var currentVariantImage = this.currentVariant.featured_image || {};
}

1. Recherchez le code suivant juste en dessous :

if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
}

Remplacez-le par :

/* if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
} */

1. Recherchez le code _updateSKU: function(variant). Remplacez le code suivant :

if (variant.sku === this.currentVariant.sku) {
  return;
}

par :

if (this.currentVariant != undefined ) {
  if (variant.sku === this.currentVariant.sku) {
    return;
  }
}

1. Recherchez le code _initVariants: function() {. Remplacez le code suivant :

if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
}

par :

/* if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */

Remarque

Ce code ne doit être remplacé que dans la version 17.5.0 de Debut (ou toute version ultérieure).

1. Recherchez la ligne de code suivante :

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

Ajoutez le code suivant, sur une nouvelle ligne, sous le code indiqué ci-dessus :

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

Il doit ressembler à ceci :

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

1. Cliquez sur Save (Enregistrer).

Modification du modèle de la page de produits

Pour modifier le modèle de la page de produits :

1. Dans le répertoire Sections, cliquez sur product-template.liquid.
2. Recherchez la ligne de code suivante :

{%- assign current_variant = product.selected_or_first_available_variant -%}

Remplacez-le par :

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else %}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif %}

1. Recherchez le code suivant et supprimez-le :

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Si vous ne trouvez pas le code ci-dessus, recherchez le code suivant et supprimez-le :

{%- if variant == current_variant %} selected="selected" {%- endif -%}

1. Recherchez la ligne de code suivante :

{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}

Remplacez-le par :

{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

Si vous ne trouvez pas le code ci-dessus, recherchez le code suivant :

{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

Remplacez-le par :

{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}

Remarque

Certaines versions du thème Debut n’incluent pas la ligne de code à remplacer à cette étape. Si vous ne trouvez pas le code, passez à l’étape suivante.

1. Recherchez la ligne de code suivante :

{% unless current_variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Remplacez-le par :

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% elsif current_variant.available %}
  {{ 'products.product.add_to_cart' | t }}
{% else %}
  {{ 'products.product.sold_out' | t }}
{% endif %}

1. Recherchez la ligne de code suivante :

{% if section.settings.enable_payment_button %}
  {{ form | payment_button }}
{% endif %}

Remplacez-le par :

<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
  {% if section.settings.enable_payment_button %}
    {{ form | payment_button }}
  {% endif %}
</div>

1. Recherchez le code {% schema %}. Collez le code suivant sur sa propre ligne au-dessus de cela :

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Il doit ressembler à ceci :

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Cliquez sur Save (Enregistrer).

Modifier l’extrait de prix d’un produit

Pour modifier l’extrait de prix de votre produit :

1. Dans le répertoire Snippets (Extraits), cliquez sur product-price.liquid.
2. Recherchez la ligne de code suivante :

{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif

  assign money_price = price | money
-%}

Remplacez-le par :

{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  elsif product.title
    assign compare_at_price = product.compare_at_price
    assign price = product.price
    assign available = product.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif

  assign money_price = price | money
-%}

Remarque

Certaines versions du thème Debut n’incluent pas le code à remplacer à cette étape. Si vous ne trouvez pas le code, passez à l’étape suivante.

Modification des paramètres de langue du bouton Ajouter au panier

Vous pouvez modifier les paramètres de langue du bouton « Ajouter au panier » de sorte que les produits n’apparaissent pas comme « Indisponibles » avant qu’une sélection ne soit faite.

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur ... > Modifier le contenu du thème par défaut.
3. Dans la case Filtre, commencez à taper unavailable pour afficher la traduction « Indisponible ».
4. Remplacez la mention Non disponible par Make a selection.
5. Cliquez sur Save (Enregistrer).

Minimal

Étapes pour Minimal

Suivez ces étapes pour appliquer la personnalisation à Minimal :

Modification du fichier JavaScript de votre thème

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 Ressources, cliquez sur theme.js ou theme.js.liquid.
4. Recherchez le code initProductVariant: function() {. En dessous, recherchez le code suivant :

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

Ajoutez le code suivant sur une nouvelle ligne au-dessous :

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Il doit ressembler à ceci :

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Cliquez sur Save (Enregistrer).

Modification du modèle de la page de produits

Pour modifier le modèle de la page de produits :

1. Dans le répertoire Sections, cliquez sur product-template.liquid.
2. Recherchez la ligne de code suivante :

{% assign variant = product.selected_or_first_available_variant %}

Remplacez-le par :

{% assign variant = product.selected_variant %}

1. Recherchez le code suivant et supprimez-le :

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Recherchez toutes les occurrences de ce code :

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Remplacez-les par :

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

1. Recherchez le code {% schema %}. Collez le code suivant sur sa propre ligne au-dessus de cela :

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Il doit ressembler à ceci :

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Cliquez sur Save (Enregistrer).

Modification des paramètres de langue du bouton Ajouter au panier

Vous pouvez modifier les paramètres de langue du bouton « Ajouter au panier » de sorte que les produits n’apparaissent pas comme « Indisponibles » avant qu’une sélection ne soit faite.

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur ... > Modifier le contenu du thème par défaut.
3. Dans la case Filtre, commencez à taper unavailable pour afficher la traduction « Indisponible ».
4. Remplacez la mention Non disponible par Make a selection.
5. Cliquez sur Save (Enregistrer).

Narrative

Étapes pour Narrative

Suivez ces étapes pour appliquer la personnalisation à Narrative :

Modification du fichier JavaScript de votre thème

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 Assets (Ressources), cliquez sur custom.js.
4. Ajoutez le code suivant au bas du fichier :

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Cliquez sur Save (Enregistrer).

Modification du modèle de la page de produits

Pour modifier le modèle de la page de produits :

1. Dans le répertoire Sections, cliquez sur product-template.liquid.
2. Recherchez la ligne de code suivante :

{%- assign current_variant = product.selected_or_first_available_variant -%}

Remplacez-le par :

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else -%}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif -%}

1. Recherchez le code {% schema %}. Collez le code suivant sur sa propre ligne au-dessus de cela :

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Il doit ressembler à ceci :

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Cliquez sur Save (Enregistrer).

Modification des paramètres de langue du bouton Ajouter au panier

Vous pouvez modifier les paramètres de langue du bouton « Ajouter au panier » de sorte que les produits n’apparaissent pas comme « Indisponibles » avant qu’une sélection ne soit faite.

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur ... > Modifier le contenu du thème par défaut.
3. Dans la case Filtre, commencez à taper unavailable pour afficher la traduction « Indisponible ».
4. Remplacez la mention Non disponible par Make a selection.
5. Cliquez sur Save (Enregistrer).

Simple

Étapes pour Simple

Suivez ces étapes pour appliquer la personnalisation à Simple :

Modification du fichier JavaScript de votre thème

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 Ressources, cliquez sur theme.js ou theme.js.liquid.
4. Recherchez le code initProductVariant: function() {. En dessous, recherchez le code suivant :

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

Ajoutez le code suivant sur une nouvelle ligne au-dessous :

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Il doit ressembler à ceci :

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Cliquez sur Save (Enregistrer).

Modification du modèle de la page de produits

Pour modifier le modèle de la page de produits :

1. Dans le répertoire Sections, cliquez sur product-template.liquid.
2. Recherchez la ligne de code suivante :

{% assign current_variant = product.selected_or_first_available_variant %}

Remplacez-le par :

{% assign current_variant = product.selected_variant %}

1. Recherchez le code suivant et supprimez-le :

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Recherchez le code {% schema %}. Collez le code suivant sur sa propre ligne au-dessus de cela :

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Il doit ressembler à ceci :

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Cliquez sur Save (Enregistrer).

Modification des paramètres de langue du bouton Ajouter au panier

Vous pouvez modifier les paramètres de langue du bouton « Ajouter au panier » de sorte que les produits n’apparaissent pas comme « Indisponibles » avant qu’une sélection ne soit faite.

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur ... > Modifier le contenu du thème par défaut.
3. Dans la case Filtre, commencez à taper unavailable pour afficher la traduction « Indisponible ».
4. Remplacez la mention Non disponible par Make a selection.
5. Cliquez sur Save (Enregistrer).

Supply

Étapes pour Supply

Suivez ces étapes pour appliquer la personnalisation à Supply :

Modification du fichier JavaScript de votre thème

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 Ressources, cliquez sur theme.js ou theme.js.liquid.
4. Recherchez le code initProductVariant: function() {. En dessous, recherchez le code suivant :

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

Ajoutez le code suivant sur une nouvelle ligne au-dessous :

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Il doit ressembler à ceci :

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Cliquez sur Save (Enregistrer).

Modification du modèle de la page de produits

Pour modifier le modèle de la page de produits :

1. Dans le répertoire Sections, cliquez sur product-template.liquid.
2. Recherchez la ligne de code suivante :

{% assign variant = product.selected_or_first_available_variant %}

Remplacez-le par :

{% assign variant = product.selected_variant %}

1. Recherchez le code suivant et supprimez-le :

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Recherchez toutes les occurrences de ce code :

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Remplacez-le par :

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

1. Recherchez le code {% schema %}. Collez le code suivant sur sa propre ligne au-dessus de cela :

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Il doit ressembler à ceci :

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Cliquez sur Save (Enregistrer).

Modification des paramètres de langue du bouton Ajouter au panier

Vous pouvez modifier les paramètres de langue du bouton « Ajouter au panier » de sorte que les produits n’apparaissent pas comme « Indisponibles » avant qu’une sélection ne soit faite.

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur ... > Modifier le contenu du thème par défaut.
3. Dans la case Filtre, commencez à taper unavailable pour afficher la traduction « Indisponible ».
4. Remplacez la mention Non disponible par Make a selection.
5. Cliquez sur Save (Enregistrer).

Venture

Étapes pour Venture

Suivez ces étapes pour appliquer la personnalisation à Venture :

Modification du fichier JavaScript de votre thème

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 Ressources, cliquez sur theme.js ou theme.js.liquid.
4. Ajoutez le code suivant au bas du fichier :

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Recherchez la ligne de code suivante :

this.currentVariant = this._getVariantFromOptions();

Remplacez-le par :

this.currentVariant = this._getVariantFromOptions() || {};

1. Recherchez le code _updatePrice: function(variant). Remplacez le code suivant :

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

par :

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

1. Cliquez sur Save (Enregistrer).

Modification du modèle de la page de produits

Pour modifier le modèle de la page de produits :

1. Dans le répertoire Sections, cliquez sur product-template.liquid.
2. Recherchez la ligne de code suivante :

{% assign current_variant = product.selected_or_first_available_variant %}

Remplacez-le par :

{% if product.variants.size > 1 %}
  {% assign current_variant = product.selected_variant %}
{% else %}
  {% assign current_variant = product.first_available_variant %}
{% endif %}

1. Recherchez le code suivant et supprimez-le :

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Si vous ne trouvez pas le code ci-dessus, recherchez le code suivant et supprimez-le :

{% if variant == current_variant %} selected="selected" {% endif %}

1. Recherchez toutes les occurrences de ce code :

{% unless current_variant.available %}

Remplacez-le par :

{% unless current_variant.available or product.variants.size == 1 and variant.available %}

1. Recherchez la ligne de code suivante :

{% unless current_variant.available or product.variants.size == 1 and variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Remplacez-le par :

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% else %}
  {% unless current_variant.available or product.variants.size == 1 and variant.available %}
    {{ 'products.product.sold_out' | t }}
  {% else %}
    {{ 'products.product.add_to_cart' | t }}
  {% endunless %}
{% endif %}

1. Recherchez le code {% schema %}. Collez le code suivant sur sa propre ligne au-dessus de cela :

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Il doit ressembler à ceci :

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Cliquez sur Save (Enregistrer).

Modification des paramètres de langue du bouton Ajouter au panier

Vous pouvez modifier les paramètres de langue du bouton « Ajouter au panier » de sorte que les produits n’apparaissent pas comme « Indisponibles » avant qu’une sélection ne soit faite.

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur ... > Modifier le contenu du thème par défaut.
3. Dans la case Filtre, commencez à taper unavailable pour afficher la traduction « Indisponible ».
4. Remplacez la mention Non disponible par Make a selection.
5. Cliquez sur Save (Enregistrer).

Étapes à suivre pour les thèmes sans sections

Ajouter des invites aux menus déroulants de vos variantes

Pour ajouter des invites à vos menus déroulants de variantes :

1. Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
2. Nommez votre nouvel extrait pick-an-option.

1. Dans le nouveau fichier d'extrait, collez ce code hébergé sur GitHub.
2. Cliquez sur Save (Enregistrer).
3. Dans le répertoire Mise en page, cliquez sur theme.liquid.
4. Recherchez la balise de fermeture </body> près du bas du fichier. Sur une nouvelle ligne juste au-dessus de la balise de fermeture </body>, collez le code suivant :

{% render 'pick-an-option' %}

1. Cliquez sur Save (Enregistrer).

2. Recherchez le fichier qui contient le formulaire d'ajout au panier. Il aura un attribut action défini sur /cart/add. Il doit se trouver dans un de ces quatre fichiers :

   • le modèle product.liquid sous Modèles
   • la mise en page theme.liquid sous Mise en page
   • l'extrait product.liquid sous Extraits
   • l'extrait single-product.liquid sous Extraits

3. Recherchez ce code dans le formulaire :

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

ou

<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Remplacez-le par :

<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

1. Recherchez et remplacez le code suivant :
   • Minimal, Pop ou Supply : si vous utilisez le thème Minimal, Pop ou Supply, recherchez toutes les occurrences du code suivant :

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Remplacez-les par :

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

• Autres thèmes gratuits de Shopify : si vous utilisez un autre thème Shopify, recherchez le code suivant :

{% assign current_variant = product.selected_or_first_available_variant %}

Remplacez-le par :

{% assign current_variant = product.selected_variant %}

1. Cliquez sur Save (Enregistrer).

Modification des paramètres de langue du bouton Ajouter au panier

Vous pouvez modifier les paramètres de langue du bouton « Ajouter au panier » de sorte que les produits n’apparaissent pas comme « Indisponibles » avant qu’une sélection ne soit faite.

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur ... > Modifier le contenu du thème par défaut.
3. Dans la case Filtre, commencez à taper unavailable pour afficher la traduction « Indisponible ».
4. Remplacez la mention Non disponible par Make a selection.
5. Cliquez sur Save (Enregistrer).