Motivar a los clientes a elegir una opción

Nota

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

Nota

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

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

Cuando un cliente visita una página de producto en tu tienda online, se selecciona la primera variante disponible de forma predeterminada. Puedes usar esta personalización para desactivar la selección automática de la primera variante disponible. De esta manera, antes de mostrar una variante, se le solicitará al cliente que seleccione una manualmente.

Nota

Dado que esta personalización impide que se seleccione una variante de forma predeterminada, es posible que tu tema no muestre el precio del producto hasta que el cliente seleccione una variante. Este es un comportamiento previsto porque los productos con variantes no tienen un precio marcado. La variante seleccionada determina el precio que se muestra.

Temas con y sin secciones

Nota

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

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

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

Sectioned themes

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

Pasos para Boundless

Sigue estos pasos para personalizar el tema Boundless:

Edita el archivo JavaScript de tu tema

Para editar el archivo JavaScript de tu tema:

Escritorio

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

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

iPhone

1. Desde la app de Shopify, toca Tienda.

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

3. Toca Administrar temas.

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

Android

1. Desde la app de Shopify, toca Tienda.

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

3. Toca Administrar temas.

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

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

2. Encuentra el código initVariantSelectors. Debajo, se encuentra el siguiente código:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

Add the following code on a new line below:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

It should look something like this:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Busca la siguiente línea de código:

$(selectors.addToCartText).html(theme.strings.soldOut);

There are *two instances* of this line of code, both found within the `productVariantCallback` function. Replace only the *second* instance with:

$(selectors.addToCartText).html('Make a Selection');

> Note:
> Some versions of Boundless do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.

1. Haz clic en Guardar.

Editar la plantilla de tu página de producto

Para editar la plantilla de tu página de producto:

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

2. Busca el siguiente código:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. Busca el siguiente código y elimínalo:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Bu el código {% schema %}. Pega el siguiente código en la línea correspondiente de arriba:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

It should look something like this:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}
{% schema %}

1. Haz clic en Guardar.

Cambiar la configuración de idioma del botón Agregar al carrito

Puedes cambiar la configuración del idioma para el botón Agregar al carrito para que los productos no aparezcan como "No disponible" antes de realizar una selección.

Escritorio

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

iPhone

1. Desde la app de Shopify, toca Tienda.
2. En la sección Canales de ventas, selecciona Tienda online.
3. Toca Administrar temas.

Android

1. Desde la app de Shopify, toca Tienda.
2. En la sección Canales de ventas, selecciona Tienda online.
3. Toca Administrar temas.

1. Busca el tema que deseas editar y haz clic en Acciones > Editar el contenido del tema predeterminado.

2. En el cuadro Filtrar, comienza a escribir unavailable para mostrar la traducción "No disponible".

3. Reemplaza el texto No disponible con Make a selection.

4. Haz clic en Guardar.

Debut

Pasos para Debut

Sigue estos pasos para personalizar el tema Debut:

Edita el archivo JavaScript de tu tema

Para editar el archivo JavaScript de tu tema:

Escritorio

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

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

iPhone

1. Desde la app de Shopify, toca Tienda.

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

3. Toca Administrar temas.

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

Android

1. Desde la app de Shopify, toca Tienda.

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

3. Toca Administrar temas.

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

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

2. Agrega el siguiente código al final del archivo:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Busca el código _updatePrice: function(variant). Reemplaza el siguiente código:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
}

with:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
} */

If you can't find the above code, then find the following code:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

Replace it with:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

1. Busca el código this.currentVariant = variant;

this._updatePaymentButton(variant);

The result should look something like this:

this.currentVariant = variant;
this._updatePaymentButton(variant);

1. Busca el código _updateImages: function(variant). Reemplaza el siguiente código:

var currentVariantImage = this.currentVariant.featured_image || {};

with:

if (this.currentVariant != undefined) {
  var currentVariantImage = this.currentVariant.featured_image || {};
}

1. A continuación, busca el siguiente código:

if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
}

Replace it with:

/* if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
} */

1. Busca el código _updateSKU: function(variant). Reemplaza el siguiente código:

if (variant.sku === this.currentVariant.sku) {
  return;
}

with:

if (this.currentVariant != undefined ) {
  if (variant.sku === this.currentVariant.sku) {
    return;
  }
}

1. Busca el código _initVariants: function() {. Reemplaza el siguiente código:

if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
}

with:

/* if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */

> Note:
> This code only needs to be replaced in Debut version 17.5.0 and above.

1. Busca el siguiente código:

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

Add the following code, on a new line, below the above code:

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

It should look something like this:

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

1. Haz clic en Guardar.

Editar la plantilla de tu página de producto

Para editar la plantilla de tu página de producto:

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

2. Busca el siguiente código:

{%- assign current_variant = product.selected_or_first_available_variant -%}

Replace it with:

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else %}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif %}

1. Busca el siguiente código y elimínalo:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

If you can't find the code above, then find this code and delete it:

{%- if variant == current_variant %} selected="selected" {%- endif -%}

1. Busca el siguiente código:

{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}

Replace it with:

{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

If you can't find the code above, then find this code:

{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

Replace it with:

{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}

> Note:
> Some versions of Debut do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.

1. Busca el siguiente código:

{% unless current_variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Replace it with:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% elsif current_variant.available %}
  {{ 'products.product.add_to_cart' | t }}
{% else %}
  {{ 'products.product.sold_out' | t }}
{% endif %}

1. Busca el siguiente código:

{% if section.settings.enable_payment_button %}
  {{ form | payment_button }}
{% endif %}

Replace it with:

<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
  {% if section.settings.enable_payment_button %}
    {{ form | payment_button }}
  {% endif %}
</div>

1. Bu el código {% schema %}. Pega el siguiente código en la línea correspondiente de arriba:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

It should look something like this:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}
{% schema %}

1. Haz clic en Guardar.

Editar el fragmento del precio de tu producto

Para editar el fragmento del precio de tu producto:

1. En el directorio Fragmentos, haz clic en product-price.liquid.

2. Busca el siguiente código:

{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif
  assign money_price = price | money
-%}

Replace it with:

{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  elsif product.title
    assign compare_at_price = product.compare_at_price
    assign price = product.price
    assign available = product.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif
  assign money_price = price | money
-%}

> Note:
> Some versions of Debut do not include the code to be replaced in this step. If you can't find the code, then skip to the next step.

Cambiar la configuración de idioma del botón Agregar al carrito

Puedes cambiar la configuración del idioma para el botón Agregar al carrito para que los productos no aparezcan como "No disponible" antes de realizar una selección.

Escritorio

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

iPhone

1. Desde la app de Shopify, toca Tienda.
2. En la sección Canales de ventas, selecciona Tienda online.
3. Toca Administrar temas.

Android

1. Desde la app de Shopify, toca Tienda.
2. En la sección Canales de ventas, selecciona Tienda online.
3. Toca Administrar temas.

1. Busca el tema que deseas editar y haz clic en Acciones > Editar el contenido del tema predeterminado.

2. En el cuadro Filtrar, comienza a escribir unavailable para mostrar la traducción "No disponible".

3. Reemplaza el texto No disponible con Make a selection.

4. Haz clic en Guardar.

Minimal

Pasos para Minimal

Sigue estos pasos para personalizar el tema Minimal:

Edita el archivo JavaScript de tu tema

Para editar el archivo JavaScript de tu tema:

Escritorio

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

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

iPhone

1. Desde la app de Shopify, toca Tienda.

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

3. Toca Administrar temas.

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

Android

1. Desde la app de Shopify, toca Tienda.

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

3. Toca Administrar temas.

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

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

2. Encuentra el código initProductVariant: function() {. Debajo, se encuentra el siguiente código:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

Add the following code on a new line below:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

It should look something like this:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Haz clic en Guardar.

Edita la plantilla de tu página de producto:

Para editar la plantilla de tu página de producto:

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

2. Busca el siguiente código:

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign variant = product.selected_variant %}

1. Busca el siguiente código y elimínalo:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Busca todas las apariciones de este código:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Replace with:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

1. Bu el código {% schema %}. Pega el siguiente código en la línea correspondiente de arriba:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

It should look something like this:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}
{% schema %}

1. Haz clic en Guardar.

Cambiar la configuración de idioma del botón Agregar al carrito

Puedes cambiar la configuración del idioma para el botón Agregar al carrito para que los productos no aparezcan como "No disponible" antes de realizar una selección.

Escritorio

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

iPhone

1. Desde la app de Shopify, toca Tienda.
2. En la sección Canales de ventas, selecciona Tienda online.
3. Toca Administrar temas.

Android

1. Desde la app de Shopify, toca Tienda.
2. En la sección Canales de ventas, selecciona Tienda online.
3. Toca Administrar temas.

1. Busca el tema que deseas editar y haz clic en Acciones > Editar el contenido del tema predeterminado.

2. En el cuadro Filtrar, comienza a escribir unavailable para mostrar la traducción "No disponible".

3. Reemplaza el texto No disponible con Make a selection.

4. Haz clic en Guardar.

Narrative

Pasos para Narrative

Sigue estos pasos para personalizar el tema Narrative:

Edita el archivo JavaScript de tu tema

Para editar el archivo JavaScript de tu tema:

Escritorio

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

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

iPhone

1. Desde la app de Shopify, toca Tienda.

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

3. Toca Administrar temas.

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

Android

1. Desde la app de Shopify, toca Tienda.

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

3. Toca Administrar temas.

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

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

2. Agrega el siguiente código al final del archivo:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Haz clic en Guardar.

Editar la plantilla de tu página de producto

Para editar la plantilla de tu página de producto:

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

2. Busca el siguiente código:

{%- assign current_variant = product.selected_or_first_available_variant -%}

Replace it with:

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else -%}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif -%}

1. Bu el código {% schema %}. Pega el siguiente código en la línea correspondiente de arriba:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

It should look something like this:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}
{% schema %}

1. Haz clic en Guardar.

Cambiar la configuración de idioma del botón Agregar al carrito

Puedes cambiar la configuración del idioma para el botón Agregar al carrito para que los productos no aparezcan como "No disponible" antes de realizar una selección.

Escritorio

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

iPhone

1. Desde la app de Shopify, toca Tienda.
2. En la sección Canales de ventas, selecciona Tienda online.
3. Toca Administrar temas.

Android

1. Desde la app de Shopify, toca Tienda.
2. En la sección Canales de ventas, selecciona Tienda online.
3. Toca Administrar temas.

1. Busca el tema que deseas editar y haz clic en Acciones > Editar el contenido del tema predeterminado.

2. En el cuadro Filtrar, comienza a escribir unavailable para mostrar la traducción "No disponible".

3. Reemplaza el texto No disponible con Make a selection.

4. Haz clic en Guardar.

Simple

Pasos para Simple

Sigue estos pasos para personalizar el tema Simple:

Edita el archivo JavaScript de tu tema

Para editar el archivo JavaScript de tu tema:

Escritorio

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

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

iPhone

1. Desde la app de Shopify, toca Tienda.

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

3. Toca Administrar temas.

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

Android

1. Desde la app de Shopify, toca Tienda.

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

3. Toca Administrar temas.

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

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

2. Encuentra el código initProductVariant: function() {. Debajo, se encuentra el siguiente código:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

Add the following code on a new line below:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

It should look something like this:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Haz clic en Guardar.

Editar la plantilla de tu página de producto

Para editar la plantilla de tu página de producto:

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

2. Busca el siguiente código:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. Busca el siguiente código y elimínalo:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Bu el código {% schema %}. Pega el siguiente código en la línea correspondiente de arriba:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

It should look something like this:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}
{% schema %}

1. Haz clic en Guardar.

Cambiar la configuración de idioma del botón Agregar al carrito

Puedes cambiar la configuración del idioma para el botón Agregar al carrito para que los productos no aparezcan como "No disponible" antes de realizar una selección.

Escritorio

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

iPhone

1. Desde la app de Shopify, toca Tienda.
2. En la sección Canales de ventas, selecciona Tienda online.
3. Toca Administrar temas.

Android

1. Desde la app de Shopify, toca Tienda.
2. En la sección Canales de ventas, selecciona Tienda online.
3. Toca Administrar temas.

1. Busca el tema que deseas editar y haz clic en Acciones > Editar el contenido del tema predeterminado.

2. En el cuadro Filtrar, comienza a escribir unavailable para mostrar la traducción "No disponible".

3. Reemplaza el texto No disponible con Make a selection.

4. Haz clic en Guardar.

Supply

Pasos para Supply

Sigue estos pasos para personalizar el tema Supply:

Edita el archivo JavaScript de tu tema

Para editar el archivo JavaScript de tu tema:

Escritorio

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

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

iPhone

1. Desde la app de Shopify, toca Tienda.

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

3. Toca Administrar temas.

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

Android

1. Desde la app de Shopify, toca Tienda.

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

3. Toca Administrar temas.

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

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

2. Encuentra el código initProductVariant: function() {. Debajo, se encuentra el siguiente código:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

Add the following code on a new line below:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

It should look something like this:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Haz clic en Guardar.

Editar la plantilla de tu página de producto

Para editar la plantilla de tu página de producto:

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

2. Busca el siguiente código:

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign variant = product.selected_variant %}

1. Busca el siguiente código y elimínalo:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Busca todas las apariciones de este código:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Replace it with:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

1. Bu el código {% schema %}. Pega el siguiente código en la línea correspondiente de arriba:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

It should look something like this:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}
{% schema %}

1. Haz clic en Guardar.

Cambiar la configuración de idioma del botón Agregar al carrito

Puedes cambiar la configuración del idioma para el botón Agregar al carrito para que los productos no aparezcan como "No disponible" antes de realizar una selección.

Escritorio

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

iPhone

1. Desde la app de Shopify, toca Tienda.
2. En la sección Canales de ventas, selecciona Tienda online.
3. Toca Administrar temas.

Android

1. Desde la app de Shopify, toca Tienda.
2. En la sección Canales de ventas, selecciona Tienda online.
3. Toca Administrar temas.

1. Busca el tema que deseas editar y haz clic en Acciones > Editar el contenido del tema predeterminado.

2. En el cuadro Filtrar, comienza a escribir unavailable para mostrar la traducción "No disponible".

3. Reemplaza el texto No disponible con Make a selection.

4. Haz clic en Guardar.

Venture

Pasos para Venture

Sigue estos pasos para personalizar el tema Venture:

Edita el archivo JavaScript de tu tema

Para editar el archivo JavaScript de tu tema:

Escritorio

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

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

iPhone

1. Desde la app de Shopify, toca Tienda.

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

3. Toca Administrar temas.

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

Android

1. Desde la app de Shopify, toca Tienda.

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

3. Toca Administrar temas.

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

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

2. Agrega el siguiente código al final del archivo:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Busca el siguiente código:

this.currentVariant = this._getVariantFromOptions();

Replace it with:

this.currentVariant = this._getVariantFromOptions() || {};

1. Busca el código _updatePrice: function(variant). Reemplaza el siguiente código:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

with:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

1. Haz clic en Guardar.

Editar la plantilla de tu página de producto

Para editar la plantilla de tu página de producto:

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

2. Busca el siguiente código:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% if product.variants.size > 1 %}
  {% assign current_variant = product.selected_variant %}
{% else %}
  {% assign current_variant = product.first_available_variant %}
{% endif %}

1. Busca el siguiente código y elimínalo:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

If you can't find the code above, then find this code and delete it:

{% if variant == current_variant %} selected="selected" {% endif %}

1. Busca todas las apariciones de este código:

{% unless current_variant.available %}

Replace it with:

{% unless current_variant.available or product.variants.size == 1 and variant.available %}

1. Busca el siguiente código:

{% unless current_variant.available or product.variants.size == 1 and variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Replace it with:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% else %}
  {% unless current_variant.available or product.variants.size == 1 and variant.available %}
    {{ 'products.product.sold_out' | t }}
  {% else %}
    {{ 'products.product.add_to_cart' | t }}
  {% endunless %}
{% endif %}

1. Bu el código {% schema %}. Pega el siguiente código en la línea correspondiente de arriba:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

It should look something like this:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}
{% schema %}

1. Haz clic en Guardar.

Cambiar la configuración de idioma del botón Agregar al carrito

Puedes cambiar la configuración del idioma para el botón Agregar al carrito para que los productos no aparezcan como "No disponible" antes de realizar una selección.

Escritorio

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

iPhone

1. Desde la app de Shopify, toca Tienda.
2. En la sección Canales de ventas, selecciona Tienda online.
3. Toca Administrar temas.

Android

1. Desde la app de Shopify, toca Tienda.
2. En la sección Canales de ventas, selecciona Tienda online.
3. Toca Administrar temas.

1. Busca el tema que deseas editar y haz clic en Acciones > Editar el contenido del tema predeterminado.

2. En el cuadro Filtrar, comienza a escribir unavailable para mostrar la traducción "No disponible".

3. Reemplaza el texto No disponible con Make a selection.

4. Haz clic en Guardar.

Non-sectioned themes

Agregar indicaciones a los menús desplegables de tus variantes

Para agregar indicaciones a los menús desplegables de tus variantes:

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

2. Asigna a tu nuevo fragmento el nombre pick-an-option.

3. En tu nuevo archivo de fragmento, pega este código alojado en GitHub.

4. Haz clic en Guardar.

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

6. Busca la etiqueta de cierre </body> cerca del final del archivo. En una nueva línea justo encima de la etiqueta de cierre </body>, pega el siguiente código:

{% render 'pick-an-option' %}

1. Haz clic en Guardar.

2. Busca el archivo que contiene el formulario de agregar al carrito: Tendrá un atributo action establecido en /cart/add.

3. Busca este código dentro del formulario:

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

or

<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Replace it with:

<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

1. Busca y reemplaza el siguiente código:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Replace with:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

### Other free Shopify themes
If you use any other Shopify theme, then find this code:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. Haz clic en Guardar.

Cambiar la configuración de idioma del botón Agregar al carrito

Puedes cambiar la configuración del idioma para el botón Agregar al carrito para que los productos no aparezcan como "No disponible" antes de realizar una selección.

Escritorio

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

iPhone

1. Desde la app de Shopify, toca Tienda.
2. En la sección Canales de ventas, selecciona Tienda online.
3. Toca Administrar temas.

Android

1. Desde la app de Shopify, toca Tienda.
2. En la sección Canales de ventas, selecciona Tienda online.
3. Toca Administrar temas.

1. Busca el tema que deseas editar y haz clic en Acciones > Editar el contenido del tema predeterminado.

2. En el cuadro Filtrar, comienza a escribir unavailable para mostrar la traducción "No disponible".

3. Reemplaza el texto No disponible con Make a selection.

4. Haz clic en Guardar.