Mostrar números de SKU en las páginas de productos
Esta página fue impresa el Apr 25, 2024. Para acceder a la versión actual, por favor visita https://help.shopify.com/es/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku.
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.
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
Desde el panel de control de Shopify, ve a Tienda online > Temas .
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 .
En el directorio Secciones , haz clic en product.liquid
o product-template.liquid
.
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.
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>
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.
Pasos para Boundless
En el directorio Componentes , haz clic en theme.js.liquid
.
Busca variant.sku
.
Si puedes encontrar variant.sku
, habrás completado la personalización.
Si no puedes encontrar variant.sku
, avanza al siguiente paso.
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 );
});
Haz clic en Guardar .
Pasos para Brooklyn
En el directorio Componentes , haz clic en theme.js.liquid
.
Busca variant.sku
.
Si puedes encontrar variant.sku
, habrás completado la personalización.
Si no puedes encontrar variant.sku
, avanza al siguiente paso.
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 ;
});
});
}
});
Haz clic en Guardar .
Pasos para Debut
En el directorio Componentes , haz clic en theme.js
.
Busca variant.sku
.
Si puedes encontrar variant.sku
, habrás completado la personalización.
Si no puedes encontrar variant.sku
, avanza al siguiente paso.
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 ;
});
});
}
});
Haz clic en Guardar .
Pasos para Express
En el directorio Diseño , haz clic en theme.liquid
.
Busca la etiqueta de cierre </body>
.
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>
Haz clic en Guardar .
Pasos para Minimal
En el directorio Componentes , haz clic en theme.js
.
Busca variant.sku
.
Si puedes encontrar variant.sku
, habrás completado la personalización.
Si no puedes encontrar variant.sku
, avanza al siguiente paso.
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 ;
});
});
}
});
Haz clic en Guardar .
Pasos para Narrative
En el directorio Componentes , haz clic en custom.js
.
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 ;
});
});
}
});
Haz clic en Guardar .
Pasos para Simple
En el directorio Componentes , haz clic en theme.js.liquid
.
Busca variant.sku
.
Si puedes encontrar variant.sku
, habrás completado la personalización.
Si no puedes encontrar variant.sku
, avanza al siguiente paso.
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 ;
});
});
}
});
Haz clic en Guardar .
Pasos para Supply
En el directorio Componentes , haz clic en theme.js.liquid
.
Busca variant.sku
.
Si puedes encontrar variant.sku
, habrás completado la personalización.
Si no puedes encontrar variant.sku
, avanza al siguiente paso.
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 ;
});
});
}
});
Haz clic en Guardar .
Pasos para Venture
En el directorio Componentes , haz clic en theme.js
.
Busca variant.sku
.
Si puedes encontrar variant.sku
, habrás completado la personalización.
Si no puedes encontrar variant.sku
, avanza al siguiente paso.
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 ;
});
});
}
});
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.
Desde tu panel de control de Shopify, ve a Productos .
Haz clic en el producto que deseas editar.
Para productos con múltiples variantes, en la sección Variantes , agrega tus números de SKU:
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:
Desde el panel de control de Shopify, ve a Tienda online > Temas .
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 .
En el directorio Templates , haz clic en product.liquid
.
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.
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>
Haz clic en Guardar .
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 ) {
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
}
});
};
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.
Desde tu panel de control de Shopify, ve a Productos .
Haz clic en el producto que deseas editar.
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:
Haz clic en Guardar .