Ocultar variantes agotadas

Precaución

Los temas vintage no están disponibles en la Theme Store. 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 aparte de las correcciones de seguridad.

Nota

Si usas un tema gratis de Shopify, puedes comunicarte con atención al cliente de Shopify para recibir ayuda con este tutorial. Requiere 15 minutos de tiempo de diseño. Obtén más información sobre la política de diseño de Shopify.

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

Puedes impedir que los clientes seleccionen variantes agotadas eliminando o desactivando esas variantes en la página de producto.

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.
• Estás usando el tema Express y tienes la página de producto configurada para mostrar los productos en una sobreposición.

Nota

Los pasos para este tutorial varían dependiendo de si estás usando un tema con secciones o sin secciones. Un tema con secciones te permite arrastrar y soltar para organizar el diseño de tu página de inicio, mientras que uno sin secciones no lo permite.

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

Si estás utilizando un tema con secciones, haz clic en el botón 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

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

Boundless

Los pasos para esta personalización varían dependiendo de si deseas ocultar completamente las variantes agotadas o simplemente desactivarlas.

Ocultar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en theme.js o theme.js.liquid.

4. 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);
          }
        }
      }
    }
  }
});

1. Haz clic en Guardar.

Desactivar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en theme.js o theme.js.liquid.

4. 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);
          }
        }
      }
    }
  }
});

1. Haz clic en Guardar.

Brooklyn

Brooklyn

Los pasos para esta personalización varían dependiendo de si deseas ocultar completamente las variantes agotadas o simplemente desactivarlas.

Ocultar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en theme.js o theme.js.liquid.

4. 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);
          }
        }
      }
    }
  }
});

1. Haz clic en Guardar.

Desactivar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en theme.js o theme.js.liquid.

4. 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);
          }
        }
      }
    }
  }
});

1. Haz clic en Guardar.

Debut

Debut

Los pasos para esta personalización varían dependiendo de si deseas ocultar completamente las variantes agotadas o simplemente desactivarlas.

Ocultar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en theme.js o theme.js.liquid.

4. 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);
          }
        }
      }
    }
  }
});

1. Haz clic en Guardar.

Desactivar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en theme.js o theme.js.liquid.

4. 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);
          }
        }
      }
    }
  }
});

1. Haz clic en Guardar.

Express

Express

Los pasos para esta personalización varían dependiendo de si deseas ocultar completamente las variantes agotadas o simplemente desactivarlas.

Ocultar variantes agotadas

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

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

3. En el directorio Diseño, haz clic en theme.liquid.

4. 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>

1. Haz clic en Guardar.

Desactivar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en theme.js o theme.js.liquid.

4. 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>

1. Haz clic en Guardar.

Minimal

Minimal

Los pasos para esta personalización varían dependiendo de si deseas ocultar completamente las variantes agotadas o simplemente desactivarlas.

Ocultar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en theme.js o theme.js.liquid.

4. 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);
          }
        }
      }
    }
  }
});

1. Haz clic en Guardar.

Desactivar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en theme.js o theme.js.liquid.

4. 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);
          }
        }
      }
    }
  }
});

1. Haz clic en Guardar.

Narrative

Narrative

Los pasos para esta personalización varían dependiendo de si deseas ocultar completamente las variantes agotadas o simplemente desactivarlas.

Ocultar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en custom.js.

4. 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);
          }
        }
      }
    }
  }
});

1. Haz clic en Guardar.

Desactivar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en theme.js o theme.js.liquid.

4. 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);
          }
        }
      }
    }
  }
});

1. Haz clic en Guardar.

Simple

Simple

Los pasos para esta personalización varían dependiendo de si deseas ocultar completamente las variantes agotadas o simplemente desactivarlas.

Ocultar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en theme.js o theme.js.liquid.

4. 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);
          }
        }
      }
    }
  }
});

1. Haz clic en Guardar.

Desactivar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en theme.js o theme.js.liquid.

4. 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);
          }
        }
      }
    }
  }
});

1. Haz clic en Guardar.

Supply

Supply

Los pasos para esta personalización varían dependiendo de si deseas ocultar completamente las variantes agotadas o simplemente desactivarlas.

Ocultar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en theme.js o theme.js.liquid.

4. 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);
          }
        }
      }
    }
  }
});

1. Haz clic en Guardar.

Desactivar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en theme.js o theme.js.liquid.

4. 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);
          }
        }
      }
    }
  }
});

1. Haz clic en Guardar.

Venture

Venture

Los pasos para esta personalización varían dependiendo de si deseas ocultar completamente las variantes agotadas o simplemente desactivarlas.

Ocultar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en theme.js o theme.js.liquid.

4. 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);
          }
        }
      }
    }
  }
});

1. Haz clic en Guardar.

Desactivar variantes agotadas

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

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

3. En el directorio Componentes, haz clic en theme.js o theme.js.liquid.

4. 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);
          }
        }
      }
    }
  }
});

1. Haz clic en Guardar.

Pasos para los temas sin secciones

Ocultar variantes agotadas

Si usas un tema sin secciones, puedes realizar estos pasos para ocultar las variantes agotadas en la página de producto.

Pasos:

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

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

3. En el directorio Fragmentos, haz clic en Agregar un nuevo fragmento.

4. Asigna a tu nuevo fragmento el nombre remove-sold-out:

   

5. 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 %}

1. Haz clic en Guardar.
2. En el directorio Diseño, haz clic en theme.liquid.
3. Cerca del final del archivo, justo antes de la etiqueta de cierre </body>, pega el siguiente código:

{% render 'remove-sold-out' %}

1. 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.

Pasos:

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

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

3. En el directorio Fragmentos, haz clic en Agregar un nuevo fragmento.

4. Asigna a tu nuevo fragmento el nombre disable-sold-out:

   

5. 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.setAttribute('disabled', '');
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}

1. Haz clic en Guardar.
2. En el directorio Diseño, haz clic en theme.liquid.
3. Cerca del final del archivo, justo antes de la etiqueta de cierre </body>, pega el siguiente código:

{% render 'disable-sold-out' %}

1. Haz clic en Guardar.