Ocultar variantes agotadas
Puedes impedir que los clientes seleccionen variantes agotadas eliminando o desactivando esas variantes en la página de producto.
En esta página
Limitaciones
Las personalizaciones descritas en esta página no funcionan en los siguientes casos:
- Tus productos tienen más de una opción de producto.
- Usas el tema Express y tienes la página de producto configurada para mostrar productos en una sobreposición
Temas con y sin secciones
Seleccionar tu tema
Los pasos para esta personalización varían según tu tema. Haz clic en el botón de tu tema antes de seguir las instrucciones a continuación:
Boundless
Los pasos para esta personalización varían en función de si deseas ocultar completamente las variantes agotadas o solo desactivarlas. Haz clic en el botón que prefieras antes de continuar con las siguientes instrucciones:
Ocultar variantes agotadas
Sigue estos pasos para personalizar el tema Boundless:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
theme.jsotheme.js.liquid.En la parte inferior del archivo, pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Haz clic en Guardar.
Desactivar variantes agotadas
Sigue estos pasos para personalizar el tema Boundless:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
theme.jsotheme.js.liquid.En la parte inferior del archivo, pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Haz clic en Guardar.
Brooklyn
Los pasos para esta personalización varían en función de si deseas ocultar completamente las variantes agotadas o solo desactivarlas. Haz clic en el botón que prefieras antes de continuar con las siguientes instrucciones:
Ocultar variantes agotadas
Sigue estos pasos para personalizar el tema Brooklyn:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
theme.jsotheme.js.liquid.En la parte inferior del archivo, pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const radioButtons = section.querySelector('.single-option-radio');
let variantOptions;
if (radioButtons) {
variantOptions = section.querySelectorAll('.single-option-radio input');
} else {
variantOptions = section.querySelectorAll('.single-option-selector__radio option');
}
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
if (radioButtons) {
option.nextElementSibling.remove();
}
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Haz clic en Guardar.
Desactivar variantes agotadas
Sigue estos pasos para personalizar el tema Brooklyn:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
theme.jsotheme.js.liquid.En la parte inferior del archivo, pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const radioButtons = section.querySelector('.single-option-radio');
let variantOptions;
if (radioButtons) {
variantOptions = section.querySelectorAll('.single-option-radio input');
} else {
variantOptions = section.querySelectorAll('.single-option-selector__radio option');
}
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
if (radioButtons) {
option.nextElementSibling.option.setAttribute('disabled', 'disabled');
}
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Haz clic en Guardar.
Debut
Los pasos para esta personalización varían en función de si deseas ocultar completamente las variantes agotadas o solo desactivarlas. Haz clic en el botón que prefieras antes de continuar con las siguientes instrucciones:
Ocultar variantes agotadas
Sigue estos pasos para personalizar el tema Debut:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
theme.jsotheme.js.liquid.En la parte inferior del archivo, pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Haz clic en Guardar.
Desactivar variantes agotadas
Sigue estos pasos para personalizar el tema Debut:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
theme.jsotheme.js.liquid.En la parte inferior del archivo, pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Haz clic en Guardar.
Express
Los pasos para esta personalización varían en función de si deseas ocultar completamente las variantes agotadas o solo desactivarlas. Haz clic en el botón que prefieras antes de continuar con las siguientes instrucciones:
Ocultar variantes agotadas
Sigue estos pasos para aplicar la personalización a Express:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Diseño, haz clic en
theme.liquid.Encuentra el código
</body>. Pega el siguiente código en la línea correspondiente de arriba:
<script>
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[data-product-json]');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const section = current.closest('[data-section-id]');
const currentJson = JSON.parse(current.text);
if (currentJson.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < currentJson.variants.length; j++) {
const variant = currentJson.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.form__input--select option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});
</script>- Haz clic en Guardar.
Desactivar variantes agotadas
Sigue estos pasos para aplicar la personalización a Express:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
theme.jsotheme.js.liquid.En la parte inferior del archivo, pega el siguiente código:
<script>
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[data-product-json]');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const section = current.closest('[data-section-id]');
const currentJson = JSON.parse(current.text);
if (currentJson.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < currentJson.variants.length; j++) {
const variant = currentJson.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.form__input--select option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});
</script>- Haz clic en Guardar.
Minimal
Los pasos para esta personalización varían en función de si deseas ocultar completamente las variantes agotadas o solo desactivarlas. Haz clic en el botón que prefieras antes de continuar con las siguientes instrucciones:
Ocultar variantes agotadas
Sigue estos pasos para personalizar el tema Minimal:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
theme.jsotheme.js.liquid.En la parte inferior del archivo, pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Haz clic en Guardar.
Desactivar variantes agotadas
Sigue estos pasos para personalizar el tema Minimal:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
theme.jsotheme.js.liquid.En la parte inferior del archivo, pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Haz clic en Guardar.
Narrative
Los pasos para esta personalización varían en función de si deseas ocultar completamente las variantes agotadas o solo desactivarlas. Haz clic en el botón que prefieras antes de continuar con las siguientes instrucciones:
Ocultar variantes agotadas
Sigue estos pasos para personalizar el tema Narrative:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
custom.js.En la parte inferior del archivo, pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[data-product-json]');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const section = current.closest('[data-section-id]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Haz clic en Guardar.
Desactivar variantes agotadas
Sigue estos pasos para personalizar el tema Narrative:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
theme.jsotheme.js.liquid.En la parte inferior del archivo, pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[data-product-json]');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const section = current.closest('[data-section-id]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Haz clic en Guardar.
Simple
Los pasos para esta personalización varían en función de si deseas ocultar completamente las variantes agotadas o solo desactivarlas. Haz clic en el botón que prefieras antes de continuar con las siguientes instrucciones:
Ocultar variantes agotadas
Sigue estos pasos para personalizar el tema Simple:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
theme.jsotheme.js.liquid.En la parte inferior del archivo, pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Haz clic en Guardar.
Desactivar variantes agotadas
Sigue estos pasos para personalizar el tema Simple:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
theme.jsotheme.js.liquid.En la parte inferior del archivo, pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Haz clic en Guardar.
Supply
Los pasos para esta personalización varían en función de si deseas ocultar completamente las variantes agotadas o solo desactivarlas. Haz clic en el botón que prefieras antes de continuar con las siguientes instrucciones:
Ocultar variantes agotadas
Sigue estos pasos para personalizar el tema Supply:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
theme.jsotheme.js.liquid.En la parte inferior del archivo, pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Haz clic en Guardar.
Desactivar variantes agotadas
Sigue estos pasos para personalizar el tema Supply:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
theme.jsotheme.js.liquid.En la parte inferior del archivo, pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Haz clic en Guardar.
Venture
Los pasos para esta personalización varían en función de si deseas ocultar completamente las variantes agotadas o solo desactivarlas. Haz clic en el botón que prefieras antes de continuar con las siguientes instrucciones:
Ocultar variantes agotadas
Sigue estos pasos para personalizar el tema Venture:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
theme.jsotheme.js.liquid.En la parte inferior del archivo, pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Haz clic en Guardar.
Desactivar variantes agotadas
Sigue estos pasos para personalizar el tema Venture:
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Componentes, haz clic en
theme.jsotheme.js.liquid.En la parte inferior del archivo, pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- Haz clic en Guardar.
Ocultar variantes agotadas
Si usas un tema sin secciones, puedes realizar estos pasos para ocultar las variantes agotadas en la página de producto.
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Fragmentos, haz clic en Agregar un nuevo fragmento.
Asigna a tu nuevo fragmento el nombre
remove-sold-out
- Pega el siguiente código en tu nuevo archivo del fragmento:
{% if product.options.size == 1 %}
<script>
const addToCartForm = document.querySelector('form[action="/cart/add"]');
if (window.MutationObserver && addToCartForm !== null) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
{% for variant in product.variants %}
{% unless variant.available %}
variantOptions.forEach(function(element) {
if (element.value === {{ variant.title | json }}) {
element.remove();
}
});
{% endunless %}
{% endfor %}
observer.disconnect();
});
observer.observe(addToCartForm, config);
}
</script>
{% endif %}Haz clic en Guardar.
En el directorio Diseño, haz clic en
theme.liquid.Cerca del final del archivo, justo antes de la etiqueta de cierre
</body>, pega el siguiente código:
{% render 'remove-sold-out' %}- Haz clic en Guardar.
Desactivar variantes agotadas
Si usas un tema sin secciones, puedes realizar estos pasos para desactivar las variantes agotadas. Las variantes siguen mostrándose en la página de producto pero no se pueden seleccionar.
Desde tu panel de control de Shopify, ve a Tienda online > Temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
Desde la app de Shopify, toca Tienda.
En la sección Canales de ventas, selecciona Tienda online.
Toca Administrar temas.
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.
En el directorio Fragmentos, haz clic en Agregar un nuevo fragmento.
Asigna a tu nuevo fragmento el nombre
disable-sold-outPega el siguiente código en tu nuevo archivo del fragmento:
{% if product.options.size == 1 %}
<script>
const addToCartForm = document.querySelector('form[action="/cart/add"]');
if (window.MutationObserver && addToCartForm !== null) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
{% for variant in product.variants %}
{% unless variant.available %}
variantOptions.forEach(function(element) {
if (element.value === {{ variant.title | json }}) {
element.setAttribute('disabled', '');
}
});
{% endunless %}
{% endfor %}
observer.disconnect();
});
observer.observe(addToCartForm, config);
}
</script>
{% endif %}Haz clic en Guardar.
En el directorio Diseño, haz clic en
theme.liquid.Cerca del final del archivo, justo antes de la etiqueta de cierre
</body>, pega el siguiente código:
{% render 'disable-sold-out' %}- Haz clic en Guardar.