Afficher les numéros de SKU sur les pages de produit

Attention

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

Remarque

Si vous utilisez un thème gratuit de Shopify, vous pouvez contacter l’assistance Shopify pour obtenir de l’aide par rapport à ce tutoriel. La conception de cette partie nécessite 15 minutes. En savoir plus sur la Politique en matière de conception de Shopify.

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

Les SKU (unités de gestion des stocks) sont des chiffres (généralement alphanumériques) utilisés pour identifier les produits et suivre les stocks. Si une boutique utilise des SKU, un numéro unique est attribué à chaque variante de produit. Vous pouvez afficher les numéros de SKU des variantes sur vos pages de produit en modifiant le code de votre thème :

Thèmes avec et sans sections

Remarque

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

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

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

Étapes à suivre pour les thèmes avec sections

Afficher les numéros de SKU sur les pages de produit

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
3. Dans le répertoire Sections, cliquez sur product.liquid ou sur product-template.liquid.
4. Recherchez la balise Liquid suivante :

{{ product.title }}

Il s’agit du code qui restitue vos titres de produits sur la page de produit.

1. Sur une nouvelle ligne, sous la ligne de code contenant {{ product.title }}, collez le code suivant :

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>

1. Cliquez sur Save (Enregistrer).

Sélection de votre thème

Les prochaines étapes de cette personnalisation varient selon votre thème. Cliquez sur le bouton de votre thème et suivez les instructions.

Boundless

Étapes pour Boundless

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

2. Recherchez variant.sku :

   • Si vous parvenez à trouver variant.sku, vous avez terminé la personnalisation.
   • Si vous ne trouvez pas variant.sku, passez à l’étape suivante.

3. Au bas du fichier, collez le code suivant :

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(function() {
    const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
    if (productJson.length > 0) {
      productJson.forEach((product) => {
        const sectionId = product.id.replace("ProductJson-", "shopify-section-");
        const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
        const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
        const productInfo = JSON.parse(product.innerHTML);
        const inputValues = [];
        const optionValues = [];
        let count = 0;
        inputSelects.forEach((input) => {
          inputValues.push(input.value);
          optionValues.push(count);
          input.addEventListener('change', (evt) => {
            const currentValue = evt.currentTarget.value.toString();
            const changedIndex = inputSelects.indexOf(evt.target);
            inputValues[changedIndex] = currentValue;
            variantSKU.innerText = ' ';
            productInfo.variants.forEach((variant) => {
              if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
                variantSKU.innerText = variant.sku;
              }
            });
          });
          count += 1;
        });
      });
    }
  }, 100);
});

1. Cliquez sur Save (Enregistrer).

Brooklyn

Étapes pour Brooklyn

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

2. Recherchez variant.sku :

   • Si vous parvenez à trouver variant.sku, vous avez terminé la personnalisation.
   • Si vous ne trouvez pas variant.sku, passez à l’étape suivante.

3. Au bas du fichier, collez le code suivant :

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const productInfo = JSON.parse(product.innerHTML);
      const radioButtons = document.querySelector('.single-option-radio');
      let inputSelects;
      if (radioButtons !== null) {
        inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-radio')];
      } else {
        inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector__radio')];
      }
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        if (radioButtons !== null) {
          inputValues.push(input.firstElementChild.value);
        } else {
          inputValues.push(input.value);
        }
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.target.value.toString();
          const changedIndex = inputSelects.indexOf(evt.currentTarget);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
      count += 1;
      });
    });
  }
});

1. Cliquez sur Save (Enregistrer).

Debut

Étapes pour Debut

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

2. Recherchez variant.sku :

   • Si vous parvenez à trouver variant.sku, vous avez terminé la personnalisation.
   • Si vous ne trouvez pas variant.sku, passez à l’étape suivante.

3. Au bas du fichier, collez le code suivant :

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

1. Cliquez sur Save (Enregistrer).

Express

Étapes pour Express

1. Dans le répertoire Mise en page, cliquez sur theme.liquid.
2. Recherchez la balise de fermeture </body>.
3. Sur la ligne située juste au-dessus de la balise de fermeture </body>, collez le code suivant :

<script>
document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[data-product-json]')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = "shopify-section-" + product.closest('[data-section-id]').dataset.sectionId;
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .form__input--select')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});
</script>

1. Cliquez sur Save (Enregistrer).

Minimal

Étapes pour Minimal

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

2. Recherchez variant.sku :

   • Si vous parvenez à trouver variant.sku, vous avez terminé la personnalisation.
   • Si vous ne trouvez pas variant.sku, passez à l’étape suivante.

3. Au bas du fichier, collez le code suivant :

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

1. Cliquez sur Save (Enregistrer).

Narrative

Étapes pour Narrative

1. Dans le répertoire Assets (Ressources), cliquez sur custom.js.
2. Au bas du fichier, collez le code suivant :

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[data-product-json]')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = "shopify-section-" + product.closest('[data-section-id]').dataset.sectionId;
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

1. Cliquez sur Save (Enregistrer).

Simple

Étapes pour Simple

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

2. Recherchez variant.sku :

   • Si vous parvenez à trouver variant.sku, vous avez terminé la personnalisation.
   • Si vous ne trouvez pas variant.sku, passez à l’étape suivante.

3. Au bas du fichier, collez le code suivant :

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

1. Cliquez sur Save (Enregistrer).

Supply

Étapes pour Supply

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

2. Recherchez variant.sku :

   • Si vous parvenez à trouver variant.sku, vous avez terminé la personnalisation.
   • Si vous ne trouvez pas variant.sku, passez à l’étape suivante.

3. Au bas du fichier, collez le code suivant :

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

1. Cliquez sur Save (Enregistrer).

Venture

Étapes pour Venture

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

2. Recherchez variant.sku :

   • Si vous parvenez à trouver variant.sku, vous avez terminé la personnalisation.
   • Si vous ne trouvez pas variant.sku, passez à l’étape suivante.

3. Au bas du fichier, collez le code suivant :

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

1. Cliquez sur Save (Enregistrer).

Ajouter des numéros de SKU à vos variantes de produit à partir de l’interface administrateur

Pour que les SKU apparaissent sur vos pages de produit, vous devez ajouter des numéros de SKU à vos variantes de produit à partir de l’interface administrateur Shopify.

1. Depuis votre interface administrateur Shopify, allez à Produits.

2. Cliquez sur le produit que vous souhaitez modifier.

3. Pour les produits comportant plusieurs variantes, ajoutez vos numéros de SKU dans la section Variantes :

4. Cliquez sur Save (Enregistrer).

Étapes à suivre pour les thèmes sans sections

Afficher les numéros de SKU sur les pages de produit

Remarque

Cette personnalisation ne fonctionne pas pour le thème Boundless, car il ne contient pas de sections. En effet, les thèmes sans sections ont été lancés avant octobre 2016 et ils ne contiennent aucun fichier dans le répertoire Sections.

Étapes :

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
3. Dans le répertoire Templates (Modèles), cliquez sur product.liquid.
4. Recherchez la balise Liquid suivante :

{{ product.title }}

Il s’agit du code qui restitue vos titres de produits sur la page de produit.

1. Sur une nouvelle ligne, sous la ligne de code contenant {{ product.title }}, collez ce qui suit :

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>

1. Cliquez sur Save (Enregistrer).
2. Si vous utilisez un thème Shopify gratuit autre que Brooklyn ou Venture, recherchez la ligne de code suivante :

var selectCallback = function(variant, selector) {

Si vous ne trouvez pas la ligne de code ci-dessus dans product.liquid, vous la trouverez dans theme.liquid, dans le répertoire Mise en page.

• Brooklyn et Venture : si vous utilisez Brooklyn ou Venture, vous devrez trouver et modifier une ligne de code différente. Dans le répertoire Ressources, cliquez sur theme.js.liquid et recherchez la ligne de code suivante :

theme.productVariantCallback = function (variant, selector) {

1. Sur une nouvelle ligne en dessous, collez le code suivant :

if (variant) {
      document.querySelector('.variant-sku').innerText = variant.sku;
    }
    else {
      document.querySelector('.variant-sku').innerText = '';
    }

Votre code doit ressembler à ceci :

var selectCallback = function(variant, selector) {

      if (variant) {
        document.querySelector('.variant-sku').innerText = variant.sku;
      }
      else {
        document.querySelector('.variant-sku').innerText = '';
      }

        self.productPage({
          money_format: theme.moneyFormat,
          variant: variant,
          selector: selector,
          translations: {
            add_to_cart : theme.productStrings.addToCart,
            sold_out : theme.productStrings.soldOut,
            unavailable : theme.productStrings.unavailable
          }
        });
      };

1. Cliquez sur Save (Enregistrer).

Ajouter des numéros de SKU à vos variantes de produit à partir de l’interface administrateur

Pour que les SKU apparaissent sur vos pages de produit, vous devez ajouter des numéros de SKU à vos variantes de produit à partir de l’interface administrateur Shopify.

1. Depuis votre interface administrateur Shopify, allez à Produits.

2. Cliquez sur le produit que vous souhaitez modifier.

3. Pour les produits comportant plusieurs variantes, dans la section Variantes, ajoutez vos numéros de SKU :

   

   Pour les produits sans variantes, dans la section Stock, ajoutez votre numéro de SKU :

   

4. Cliquez sur Save (Enregistrer).