Mostrar números de SKU en las páginas de productos

Los SKU (códigos de artículo) son números, normalmente alfanuméricos, que se usan para ayudar a identificar los productos y hacer seguimiento de inventario. Si una tienda usa los SKU, se asigna un número único a cada variante de producto individual. Puedes mostrar números SKU para variantes en tus páginas de producto editando el código de tu tema:

Ejemplo de SKU de variante

Temas con y sin secciones

Pasos para los temas con secciones

Mostrar números de SKU en las páginas de productos

  1. Desde el panel de control de Shopify, ve a Tienda online > Temas.

  2. Busca el tema que desees editar, haz clic en el botón para abrir el menú de acciones y, luego, haz clic en Editar código.

  3. En el directorio Secciones, haz clic en product.liquid o product-template.liquid.

  4. Busca la siguiente etiqueta Liquid:

{{ product.title }}

Este es el código que renderiza los nombres de tus productos en la página de producto.

  1. En una nueva línea debajo de la línea de código que incluye {{ product.title }}, pega el siguiente código:
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
  1. Haz clic en Guardar.

Seleccionar tu tema

Los pasos siguientes para esta personalización varían según tu tema. Haz clic en el botón de tu tema y sigue las instrucciones.

Boundless

Pasos para Boundless

  1. En el directorio Componentes, haz clic en theme.js.liquid.
  2. Busca variant.sku.

    • Si puedes encontrar variant.sku, habrás completado la personalización.
    • Si no puedes encontrar variant.sku, avanza al siguiente paso.
  3. En la parte inferior del archivo, pega el siguiente código:

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. Haz clic en Guardar.
Brooklyn

Pasos para Brooklyn

  1. En el directorio Componentes, haz clic en theme.js.liquid.
  2. Busca variant.sku.

    • Si puedes encontrar variant.sku, habrás completado la personalización.
    • Si no puedes encontrar variant.sku, avanza al siguiente paso.
  3. En la parte inferior del archivo, pega el siguiente código:

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. Haz clic en Guardar.
Debut

Pasos para Debut

  1. En el directorio Componentes, haz clic en theme.js.
  2. Busca variant.sku.

    • Si puedes encontrar variant.sku, habrás completado la personalización.
    • Si no puedes encontrar variant.sku, avanza al siguiente paso.
  3. En la parte inferior del archivo, pega el siguiente código:

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. Haz clic en Guardar.
Express

Pasos para Express

  1. En el directorio Diseño, haz clic en theme.liquid.
  2. Busca la etiqueta de cierre </body>.
  3. En la línea justo arriba de la etiqueta de cierre </body>, pega el siguiente código:
<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. Haz clic en Guardar.
Minimal

Pasos para Minimal

  1. En el directorio Componentes, haz clic en theme.js.
  2. Busca variant.sku.

    • Si puedes encontrar variant.sku, habrás completado la personalización.
    • Si no puedes encontrar variant.sku, avanza al siguiente paso.
  3. En la parte inferior del archivo, pega el siguiente código:

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. Haz clic en Guardar.
Narrative

Pasos para Narrative

  1. En el directorio Componentes, haz clic en custom.js.
  2. En la parte inferior del archivo, pega el siguiente código:
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. Haz clic en Guardar.
Simple

Pasos para Simple

  1. En el directorio Componentes, haz clic en theme.js.liquid.
  2. Busca variant.sku.

    • Si puedes encontrar variant.sku, habrás completado la personalización.
    • Si no puedes encontrar variant.sku, avanza al siguiente paso.
  3. En la parte inferior del archivo, pega el siguiente código:

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. Haz clic en Guardar.
Supply

Pasos para Supply

  1. En el directorio Componentes, haz clic en theme.js.liquid.
  2. Busca variant.sku.

    • Si puedes encontrar variant.sku, habrás completado la personalización.
    • Si no puedes encontrar variant.sku, avanza al siguiente paso.
  3. En la parte inferior del archivo, pega el siguiente código:

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. Haz clic en Guardar.
Venture

Pasos para Venture

  1. En el directorio Componentes, haz clic en theme.js.
  2. Busca variant.sku.

    • Si puedes encontrar variant.sku, habrás completado la personalización.
    • Si no puedes encontrar variant.sku, avanza al siguiente paso.
  3. En la parte inferior del archivo, pega el siguiente código:

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. Haz clic en Guardar.

Agrega números de SKU a tus variantes de producto desde el panel de control

Para que los SKU aparezcan en tus páginas de producto, debes agregar números de SKU a tus variantes de producto desde el panel de control de Shopify.

  1. Desde tu panel de control de Shopify, ve a Productos.

  2. Haz clic en el producto que deseas editar.

  3. Para productos con múltiples variantes, en la sección Variantes, agrega tus números de SKU:

  4. Haz clic en Guardar.

Pasos para los temas sin secciones

Mostrar números de SKU en las páginas de productos

Pasos:

  1. Desde el panel de control de Shopify, ve a Tienda online > Temas.

  2. Busca el tema que desees editar, haz clic en el botón para abrir el menú de acciones y, luego, haz clic en Editar código.

  3. En el directorio Templates, haz clic en product.liquid.

  4. Busca la siguiente etiqueta Liquid:

{{ product.title }}

Este es el código que renderiza los nombres de tus productos en la página de producto.

  1. En la nueva línea debajo de la línea de código que incluye {{ product.title }}, pega el siguiente:
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
  1. Haz clic en Guardar.
  2. Si usas un tema gratuito de Shopify que no es Brooklyn ni Venture, busca la siguiente línea de código:
var selectCallback = function(variant, selector) {

Si no puedes encontrar la línea de código anterior en product.liquid, lo encontrarás en theme.liquid, en el directorio Diseño.

  • Brooklyn y Venture: si usas alguna de estas plantillas, tendrás que buscar y editar una línea de código distinta. En el directorio Recursos, haz clic en theme.js.liquid y busca la siguiente línea de código:
theme.productVariantCallback = function (variant, selector) {
  1. En una nueva línea debajo, pega el siguiente código:
if (variant) {
      document.querySelector('.variant-sku').innerText = variant.sku;
    }
    else {
      document.querySelector('.variant-sku').innerText = '';
    }

Tu código debería verse así:

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. Haz clic en Guardar.

Agrega números de SKU a tus variantes de producto desde el panel de control

Para que los SKU aparezcan en tus páginas de producto, debes agregar números de SKU a tus variantes de producto desde el panel de control de Shopify.

  1. Desde tu panel de control de Shopify, ve a Productos.

  2. Haz clic en el producto que deseas editar.

  3. Para productos con múltiples variantes, en la sección Variantes, agrega los números de SKU:

    SKUs
    . Para productos sin variantes, en la sección Inventario, agrega el número de SKU:
    SKU for products without variants

  4. Haz clic en Guardar.

¿No encuentras las respuestas que estás buscando? Estamos aquí para ayudarte.