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

Precaución

Los temas vintage no están disponibles en la tienda de temas. Estos temas no tienen las funciones incluidas en los temas de la Online Store 2.0 de Shopify, y los temas Vintage gratuitos de Shopify no reciben actualizaciones más allá de las correcciones de seguridad.

Nota

Si usas un tema gratis de Shopify, puedes comunicarte con atención al cliente de Shopify para que te ayude con este tutorial. Requiere 15 minutos de tiempo de diseño. Para obtener más información, consulta Soporte de temas.

Nota

Esta personalización es para temas vintage de Shopify, y no se aplica a temas de Online Store 2.0.

• Conocer la versión de la arquitectura del tema
• Explorar las personalizaciones de temas de Online Store 2.0

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:

Temas con y sin secciones

Nota

Los pasos para este tutorial dependen de si estás utilizando un tema con secciones o sin secciones. Un tema con secciones te permite arrastrar y soltar elementos para organizar el diseño de tu página de inicio, y un tema sin secciones no lo hace.

Para averiguar si tu tema admite secciones, ve a la página del tema Editar código. Si hay archivos en el directorio de Secciones, estás usando un tema con secciones. Los temas sin secciones se publicaron antes de octubre de 2016 y no tienen archivos en el directorio de Secciones.

Si estás utilizando un tema con secciones, haz clic en el botón de Temas con secciones y sigue las instrucciones. Si estás utilizando un tema más antiguo, sin secciones, haz clic en el botón Temas sin secciones y sigue las instrucciones.

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

Nota

Esta personalización no funcionará para el tema Boundless sin secciones. Los temas sin secciones se lanzaron antes de octubre de 2016 y no tienen archivos en el directorio Secciones.

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:

   

   . Para productos sin variantes, en la sección Inventario, agrega el número de SKU:

   

4. Haz clic en Guardar.