Amener les clients à choisir une option
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. )
Thèmes avec et sans sections
Sur cette page
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 pour Boundless
Suivez ces étapes pour appliquer la personnalisation à Boundless :
Modification du fichier JavaScript de votre thème
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. -
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;
}
}
}
- 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');
- Cliquez sur Save (Enregistrer).
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. -
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;
}
}
}
- 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');
- Cliquez sur Save (Enregistrer).
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. -
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;
}
}
}
- 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');
- Cliquez sur Save (Enregistrer).
Modification du modèle de la page de produits
Pour modifier le modèle de la page de produits :
Dans le répertoire Sections, cliquez sur
product-template.liquid
.Recherchez la ligne de code suivante :
{% assign current_variant = product.selected_or_first_available_variant %}
Remplacez-le par :
{% assign current_variant = product.selected_variant %}
- Recherchez le code suivant et supprimez-le :
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
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 %}
- 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.
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Boutique en ligne.
- Appuyez sur Gérer les thèmes.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Boutique en ligne.
- Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, puis cliquez sur ... > Modifier le contenu du thème par défaut.
Dans la case Filtre, commencez à taper
unavailable
pour afficher la traduction « Indisponible ».Remplacez la mention Non disponible par
Make a selection
.Cliquez sur Save (Enregistrer).
Étapes pour Debut
Suivez ces étapes pour appliquer la personnalisation à Debut :
Modification du fichier JavaScript de votre thème
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. - 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;
}
}
}
})();
-
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;
} */
-
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);
-
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 || {};
}
- 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;
} */
-
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;
}
}
-
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);
} */
- 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');
}
},
- Cliquez sur Save (Enregistrer).
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. - 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;
}
}
}
})();
-
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;
} */
-
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);
-
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 || {};
}
- 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;
} */
-
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;
}
}
-
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);
} */
- 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');
}
},
- Cliquez sur Save (Enregistrer).
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. - 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;
}
}
}
})();
-
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;
} */
-
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);
-
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 || {};
}
- 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;
} */
-
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;
}
}
-
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);
} */
- 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');
}
},
- Cliquez sur Save (Enregistrer).
Modification du modèle de la page de produits
Pour modifier le modèle de la page de produits :
Dans le répertoire Sections, cliquez sur
product-template.liquid
.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 %}
- 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 -%}
- 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 -%}
- 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 %}
- 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>
-
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 %}
- Cliquez sur Save (Enregistrer).
Modifier l’extrait de prix d’un produit
Pour modifier l’extrait de prix de votre produit :
Dans le répertoire Snippets (Extraits), cliquez sur
product-price.liquid
.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
-%}
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.
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Boutique en ligne.
- Appuyez sur Gérer les thèmes.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Boutique en ligne.
- Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, puis cliquez sur ... > Modifier le contenu du thème par défaut.
Dans la case Filtre, commencez à taper
unavailable
pour afficher la traduction « Indisponible ».Remplacez la mention Non disponible par
Make a selection
.Cliquez sur Save (Enregistrer).
Étapes pour Minimal
Suivez ces étapes pour appliquer la personnalisation à Minimal :
Modification du fichier JavaScript de votre thème
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. -
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;
}
}
}
- Cliquez sur Save (Enregistrer).
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. -
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;
}
}
}
- Cliquez sur Save (Enregistrer).
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. -
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;
}
}
}
- Cliquez sur Save (Enregistrer).
Modification du modèle de la page de produit
Pour modifier le modèle de la page de produits :
- Dans le répertoire Sections, cliquez sur
product-template.liquid
. - Recherchez la ligne de code suivante :
{% assign variant = product.selected_or_first_available_variant %}
Remplacez-le par :
{% assign variant = product.selected_variant %}
- Recherchez le code suivant et supprimez-le :
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- 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 %}
-
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 %}
- 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.
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Boutique en ligne.
- Appuyez sur Gérer les thèmes.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Boutique en ligne.
- Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, puis cliquez sur ... > Modifier le contenu du thème par défaut.
Dans la case Filtre, commencez à taper
unavailable
pour afficher la traduction « Indisponible ».Remplacez la mention Non disponible par
Make a selection
.Cliquez sur Save (Enregistrer).
Étapes pour Narrative
Suivez ces étapes pour appliquer la personnalisation à Narrative :
Modification du fichier JavaScript de votre thème
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Assets (Ressources), cliquez sur
custom.js
. - 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;
}
}
}
})();
- Cliquez sur Save (Enregistrer).
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Assets (Ressources), cliquez sur
custom.js
. - 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;
}
}
}
})();
- Cliquez sur Save (Enregistrer).
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Assets (Ressources), cliquez sur
custom.js
. - 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;
}
}
}
})();
- Cliquez sur Save (Enregistrer).
Modification du modèle de la page de produits
Pour modifier le modèle de la page de produits :
Dans le répertoire Sections, cliquez sur
product-template.liquid
.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 -%}
-
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 %}
- 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.
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Boutique en ligne.
- Appuyez sur Gérer les thèmes.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Boutique en ligne.
- Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, puis cliquez sur ... > Modifier le contenu du thème par défaut.
Dans la case Filtre, commencez à taper
unavailable
pour afficher la traduction « Indisponible ».Remplacez la mention Non disponible par
Make a selection
.Cliquez sur Save (Enregistrer).
Étapes pour Simple
Suivez ces étapes pour appliquer la personnalisation à Simple :
Modification du fichier JavaScript de votre thème
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. -
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;
}
}
}
- Cliquez sur Save (Enregistrer).
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. -
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;
}
}
}
- Cliquez sur Save (Enregistrer).
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. -
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;
}
}
}
- Cliquez sur Save (Enregistrer).
Modification du modèle de la page de produits
Pour modifier le modèle de la page de produits :
Dans le répertoire Sections, cliquez sur
product-template.liquid
.Recherchez la ligne de code suivante :
{% assign current_variant = product.selected_or_first_available_variant %}
Remplacez-le par :
{% assign current_variant = product.selected_variant %}
- Recherchez le code suivant et supprimez-le :
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
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 %}
- 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.
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Boutique en ligne.
- Appuyez sur Gérer les thèmes.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Boutique en ligne.
- Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, puis cliquez sur ... > Modifier le contenu du thème par défaut.
Dans la case Filtre, commencez à taper
unavailable
pour afficher la traduction « Indisponible ».Remplacez la mention Non disponible par
Make a selection
.Cliquez sur Save (Enregistrer).
Étapes pour Supply
Suivez ces étapes pour appliquer la personnalisation à Supply :
Modification du fichier JavaScript de votre thème
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. -
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;
}
}
}
- Cliquez sur Save (Enregistrer).
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. -
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;
}
}
}
- Cliquez sur Save (Enregistrer).
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. -
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;
}
}
}
- Cliquez sur Save (Enregistrer).
Modification du modèle de la page de produits
Pour modifier le modèle de la page de produits :
Dans le répertoire Sections, cliquez sur
product-template.liquid
.Recherchez la ligne de code suivante :
{% assign variant = product.selected_or_first_available_variant %}
Remplacez-le par :
{% assign variant = product.selected_variant %}
- Recherchez le code suivant et supprimez-le :
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- 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 %}
-
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 %}
- 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.
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Boutique en ligne.
- Appuyez sur Gérer les thèmes.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Boutique en ligne.
- Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, puis cliquez sur ... > Modifier le contenu du thème par défaut.
Dans la case Filtre, commencez à taper
unavailable
pour afficher la traduction « Indisponible ».Remplacez la mention Non disponible par
Make a selection
.Cliquez sur Save (Enregistrer).
Étapes pour Venture
Suivez ces étapes pour appliquer la personnalisation à Venture :
Modification du fichier JavaScript de votre thème
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. - 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;
}
}
}
})();
- Recherchez la ligne de code suivante :
this.currentVariant = this._getVariantFromOptions();
Remplacez-le par :
this.currentVariant = this._getVariantFromOptions() || {};
-
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;
} */
- Cliquez sur Save (Enregistrer).
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. - 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;
}
}
}
})();
- Recherchez la ligne de code suivante :
this.currentVariant = this._getVariantFromOptions();
Remplacez-le par :
this.currentVariant = this._getVariantFromOptions() || {};
-
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;
} */
- Cliquez sur Save (Enregistrer).
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Ressources, cliquez sur
theme.js
outheme.js.liquid
. - 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;
}
}
}
})();
- Recherchez la ligne de code suivante :
this.currentVariant = this._getVariantFromOptions();
Remplacez-le par :
this.currentVariant = this._getVariantFromOptions() || {};
-
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;
} */
- Cliquez sur Save (Enregistrer).
Modification du modèle de la page de produits
Pour modifier le modèle de la page de produits :
Dans le répertoire Sections, cliquez sur
product-template.liquid
.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 %}
- 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 %}
- 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 %}
- 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 %}
-
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 %}
- 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.
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Boutique en ligne.
- Appuyez sur Gérer les thèmes.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Boutique en ligne.
- Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, puis cliquez sur ... > Modifier le contenu du thème par défaut.
Dans la case Filtre, commencez à taper
unavailable
pour afficher la traduction « Indisponible ».Remplacez la mention Non disponible par
Make a selection
.Cliquez sur Save (Enregistrer).
Ajouter des invites aux menus déroulants de vos variantes
Pour ajouter des invites à vos menus déroulants de variantes :
- Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
- Nommez votre nouvel extrait
pick-an-option
.
- Dans le nouveau fichier d'extrait, collez ce code hébergé sur GitHub.
- Cliquez sur Save (Enregistrer).
- Dans le répertoire Mise en page, cliquez sur
theme.liquid
. -
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' %}
- Cliquez sur Save (Enregistrer).
-
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
- le modèle
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>
- 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 %}
- 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.
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Boutique en ligne.
- Appuyez sur Gérer les thèmes.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Boutique en ligne.
- Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, puis cliquez sur ... > Modifier le contenu du thème par défaut.
Dans la case Filtre, commencez à taper
unavailable
pour afficher la traduction « Indisponible ».Remplacez la mention Non disponible par
Make a selection
.Cliquez sur Save (Enregistrer).