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.

Sectioned themes

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

Para editar tu tema para mostrar números de SKU en las páginas de producto:

Escritorio

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

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

iPhone

1. Desde la app de Shopify, toca Tienda.

2. En la sección Canales de ventas, selecciona Tienda online.

3. Toca Administrar temas.

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

Android

1. Desde la app de Shopify, toca Tienda.

2. En la sección Canales de ventas, selecciona Tienda online.

3. Toca Administrar temas.

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

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

2. Busca la siguiente etiqueta Liquid:

{{ product.title }}

This is the code that renders your product titles on the product page.

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.

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.

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.

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.

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.

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.

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.

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.

Non-sectioned themes

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.

Para editar tu tema para mostrar números de SKU en las páginas de producto:

Escritorio

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

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

iPhone

1. Desde la app de Shopify, toca Tienda.

2. En la sección Canales de ventas, selecciona Tienda online.

3. Toca Administrar temas.

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

Android

1. Desde la app de Shopify, toca Tienda.

2. En la sección Canales de ventas, selecciona Tienda online.

3. Toca Administrar temas.

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

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

2. Busca la siguiente etiqueta Liquid:

{{ product.title }}

This is the code that renders your product titles on the product page.

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) {

If you cannot find the above line of code in `product.liquid`, then you will find it in `theme.liquid`, in the **Layout** directory.

#### Brooklyn and Venture

If you are using Brooklyn or Venture, then you will need to find and edit a different line of code. In the **Assets** directory, click `theme.js.liquid`, and [find](/manual/shopify-admin/productivity-tools/keyboard-shortcuts#find) the following line of code:

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

Your code should look something like this:

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 tus números de SKU:

4. Haz clic en Guardar.