Amener les clients à choisir une option

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

Lorsqu’un client visite 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, le client sera invité à sélectionner manuellement une variante avant qu’une autre ne s’affiche. )

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 le client n’ait 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.

Sectioned themes

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

Pour modifier le fichier JavaScript de votre thème :

Bureau

1. Depuis votre 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.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

1. Dans le répertoire Ressources, cliquez sur theme.js ou theme.js.liquid.

2. 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);

Add the following code on a new line below:

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;
    }
  }
}

It should look something like this:

// 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);

There are *two instances* of this line of code, both found within the `productVariantCallback` function. Replace only the *second* instance with:

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

> Note:
> Some versions of Boundless do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.

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 %}

Replace it with:

{% 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 %}

It should look something like this:

{% 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 Ajout au panier afin que les produits n'apparaissent pas comme « Indisponibles » avant que la sélection ne soit faite.

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

Android

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

1. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le contenu du thème par défaut.

2. Dans la case Filtre, commencez à taper unavailable pour afficher la traduction « Indisponible ».

3. Remplacez la mention Non disponible par Make a selection.

4. Cliquez sur Save (Enregistrer).

Debut

Étapes pour Debut

Suivez ces étapes pour appliquer la personnalisation à Debut :

Modification du fichier JavaScript de votre thème

Pour modifier le fichier JavaScript de votre thème :

Bureau

1. Depuis votre 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.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

1. Dans le répertoire Ressources, cliquez sur theme.js ou theme.js.liquid.

2. 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;
}

with:

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

If you can't find the above code, then find the following code:

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

Replace it with:

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

1. Recherchez le code this.currentVariant = variant;

this._updatePaymentButton(variant);

The result should look something like this:

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

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

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

with:

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;
}

Replace it with:

/* 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;
}

with:

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);
}

with:

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

> Note:
> This code only needs to be replaced in Debut version 17.5.0 and above.

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
    })
  );
},

Add the following code, on a new line, below the above code:

_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');
  }
},

It should look something like this:

_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 -%}

Replace it with:

{%- 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 %}

If you can't find the code above, then find this code and delete it:

{%- 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 -%}

Replace it with:

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

If you can't find the code above, then find this code:

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

Replace it with:

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

> Note:
> Some versions of Debut do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.

1. Recherchez la ligne de code suivante :

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

Replace it with:

{% 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 %}

Replace it with:

<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 %}

It should look something like this:

{% 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
-%}

Replace it with:

{%- 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
-%}

> Note:
> Some versions of Debut do not include the code to be replaced in this step. If you can't find the code, then skip to the next step.

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

Vous pouvez modifier les paramètres de langue du bouton Ajout au panier afin que les produits n'apparaissent pas comme « Indisponibles » avant que la sélection ne soit faite.

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

Android

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

1. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le contenu du thème par défaut.

2. Dans la case Filtre, commencez à taper unavailable pour afficher la traduction « Indisponible ».

3. Remplacez la mention Non disponible par Make a selection.

4. Cliquez sur Save (Enregistrer).

Minimal

Étapes pour Minimal

Suivez ces étapes pour appliquer la personnalisation à Minimal :

Modification du fichier JavaScript de votre thème

Pour modifier le fichier JavaScript de votre thème :

Bureau

1. Depuis votre 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.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

1. Dans le répertoire Ressources, cliquez sur theme.js ou theme.js.liquid.

2. 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();
}

Add the following code on a new line below:

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;
    }
  }
}

It should look something like this:

// 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 produit

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 %}

Replace it with:

{% 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 %}

Replace with:

{% 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 %}

It should look something like this:

{% 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 Ajout au panier afin que les produits n'apparaissent pas comme « Indisponibles » avant que la sélection ne soit faite.

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

Android

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

1. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le contenu du thème par défaut.

2. Dans la case Filtre, commencez à taper unavailable pour afficher la traduction « Indisponible ».

3. Remplacez la mention Non disponible par Make a selection.

4. Cliquez sur Save (Enregistrer).

Narrative

Étapes pour Narrative

Suivez ces étapes pour appliquer la personnalisation à Narrative :

Modification du fichier JavaScript de votre thème

Pour modifier le fichier JavaScript de votre thème :

Bureau

1. Depuis votre 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.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

1. Dans le répertoire Assets (Ressources), cliquez sur custom.js.

2. 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 -%}

Replace it with:

{%- 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 %}

It should look something like this:

{% 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 Ajout au panier afin que les produits n'apparaissent pas comme « Indisponibles » avant que la sélection ne soit faite.

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

Android

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

1. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le contenu du thème par défaut.

2. Dans la case Filtre, commencez à taper unavailable pour afficher la traduction « Indisponible ».

3. Remplacez la mention Non disponible par Make a selection.

4. Cliquez sur Save (Enregistrer).

Simple

Étapes pour Simple

Suivez ces étapes pour appliquer la personnalisation à Simple :

Modification du fichier JavaScript de votre thème

Pour modifier le fichier JavaScript de votre thème :

Bureau

1. Depuis votre 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.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

1. Dans le répertoire Ressources, cliquez sur theme.js ou theme.js.liquid.

2. 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);

Add the following code on a new line below:

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;
    }
  }
}

It should look something like this:

// 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 %}

Replace it with:

{% 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 %}

It should look something like this:

{% 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 Ajout au panier afin que les produits n'apparaissent pas comme « Indisponibles » avant que la sélection ne soit faite.

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

Android

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

1. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le contenu du thème par défaut.

2. Dans la case Filtre, commencez à taper unavailable pour afficher la traduction « Indisponible ».

3. Remplacez la mention Non disponible par Make a selection.

4. Cliquez sur Save (Enregistrer).

Supply

Étapes pour Supply

Suivez ces étapes pour appliquer la personnalisation à Supply :

Modification du fichier JavaScript de votre thème

Pour modifier le fichier JavaScript de votre thème :

Bureau

1. Depuis votre 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.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

1. Dans le répertoire Ressources, cliquez sur theme.js ou theme.js.liquid.

2. 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);

Add the following code on a new line below:

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;
    }
  }
}

It should look something like this:

// 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 %}

Replace it with:

{% 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 %}

Replace it with:

{% 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 %}

It should look something like this:

{% 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 Ajout au panier afin que les produits n'apparaissent pas comme « Indisponibles » avant que la sélection ne soit faite.

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

Android

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

1. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le contenu du thème par défaut.

2. Dans la case Filtre, commencez à taper unavailable pour afficher la traduction « Indisponible ».

3. Remplacez la mention Non disponible par Make a selection.

4. Cliquez sur Save (Enregistrer).

Venture

Étapes pour Venture

Suivez ces étapes pour appliquer la personnalisation à Venture :

Modification du fichier JavaScript de votre thème

Pour modifier le fichier JavaScript de votre thème :

Bureau

1. Depuis votre 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.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

1. Dans le répertoire Ressources, cliquez sur theme.js ou theme.js.liquid.

2. 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();

Replace it with:

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;
}

with:

/* 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 %}

Replace it with:

{% 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 %}

If you can't find the code above, then find this code and delete it:

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

1. Recherchez toutes les occurrences de ce code :

{% unless current_variant.available %}

Replace it with:

{% 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 %}

Replace it with:

{% 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 %}

It should look something like this:

{% 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 Ajout au panier afin que les produits n'apparaissent pas comme « Indisponibles » avant que la sélection ne soit faite.

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

Android

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

1. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le contenu du thème par défaut.

2. Dans la case Filtre, commencez à taper unavailable pour afficher la traduction « Indisponible ».

3. Remplacez la mention Non disponible par Make a selection.

4. Cliquez sur Save (Enregistrer).

Non-sectioned themes

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.

3. Dans le nouveau fichier d'extrait, collez ce code hébergé sur GitHub.

4. Cliquez sur Save (Enregistrer).

5. Dans le répertoire Mise en page, cliquez sur theme.liquid.

6. 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.

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>

or

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

Replace it with:

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

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

Replace with:

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

### Other free Shopify themes
If you use any other Shopify theme, then find this code:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% 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 Ajout au panier afin que les produits n'apparaissent pas comme « Indisponibles » avant que la sélection ne soit faite.

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

Android

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

1. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le contenu du thème par défaut.

2. Dans la case Filtre, commencez à taper unavailable pour afficher la traduction « Indisponible ».

3. Remplacez la mention Non disponible par Make a selection.

4. Cliquez sur Save (Enregistrer).