Motivar a los clientes a elegir una opción

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 que te ayude con este tutorial. Requiere 15 minutos de tiempo de diseño. Para obtener más información, consulta 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

Cuando un cliente visita una página de producto en tu tienda online, se selecciona la primera variante disponible de forma predeterminada. Puedes usar la personalización Motivar a los clientes a elegir una opció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.

Si usas la personalización Motivar a los clientes a elegir una opción, es posible que tu tema no muestre el precio de un producto hasta que tu cliente seleccione una variante. Los productos con variantes no tienen un precio destacado y el precio que se muestra está determinado por la variante seleccionada.

Temas con y sin secciones

Nota

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

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

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

Pasos para los temas con secciones

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

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

Agrega el siguiente código en una nueva línea debajo:

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

Debería verse así:

// 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);

Hay dos instancias de esta línea de código, ambas se encuentran dentro de la función productVariantCallback. Reemplaza solo la segunda instancia con:

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

1. Haz clic en Guardar.

Nota

Algunas versiones de Boundless no incluyen la línea de código que se reemplazará en este paso. Si no puedes encontrar el código, avanza al siguiente paso.

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

Reemplázalo con el siguiente:

{% 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 %}

Debería verse así:

{% 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 de idioma del botón Agregar al carrito para que los productos no se muestren como No disponible antes de que un cliente seleccione un producto.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que deseas editar y haz clic en … > Editar el contenido del tema predeterminado.
3. En la barra de búsqueda Filtrar artículos, comienza a escribir no disponible para mostrar la traducción No disponible.
4. Cambia el texto No disponible por Realizar una selección.
5. Haz clic en Guardar.

Debut

Pasos para Debut

Sigue estos pasos para personalizar el tema Debut:

Edita el archivo JavaScript de tu tema

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

con:

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

Si no puedes encontrar el código anterior, busca el siguiente código:

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

Reemplázalo con el siguiente:

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

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

Agrega a continuación el siguiente código:

this._updatePaymentButton(variant);

El resultado debería verse así:

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 || {};

con:

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

Reemplázalo con el siguiente:

/* 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;
}

con:

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

con:

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

Nota

Este código solo debe reemplazarse en la versión 17.5.0 y posteriores de Debut.

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
    })
  );
},

Agrega el siguiente código en una nueva línea debajo del código anterior:

_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');
  }
},

Debería verse así:

_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 -%}

Reemplázalo con el siguiente:

{%- 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 %}

Si no puedes encontrar el código anterior, busca el siguiente código y elimínalo:

{%- 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 -%}

Reemplázalo con el siguiente:

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

Si no puedes encontrar el código anterior, busca el siguiente código:

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

Reemplázalo con el siguiente:

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

Nota

Algunas versiones de Debut no incluyen la línea de código que se reemplazará en este paso. Si no puedes encontrar el código, avanza al siguiente paso.

1. Busca el siguiente código:

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

Reemplázalo con el siguiente:

{% 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 %}

Reemplázalo con el siguiente:

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

Debería verse así:

{% 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
-%}

Reemplázalo con el siguiente:

{%- 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
-%}

Nota

Algunas versiones de Debut no incluyen el código que se reemplazará en este paso. Si no puedes encontrar el código, avanza al siguiente paso.

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

Puedes cambiar la configuración de idioma del botón Agregar al carrito para que los productos no se muestren como No disponible antes de que un cliente seleccione un producto.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que deseas editar y haz clic en … > Editar el contenido del tema predeterminado.
3. En la barra de búsqueda Filtrar artículos, comienza a escribir no disponible para mostrar la traducción No disponible.
4. Cambia el texto No disponible por Realizar una selección.
5. Haz clic en Guardar.

Minimal

Pasos para Minimal

Sigue estos pasos para personalizar el tema Minimal:

Edita el archivo JavaScript de tu tema

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

Agrega el siguiente código en una nueva línea debajo:

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

Debería verse así:

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

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

Reemplázalo con el siguiente:

{% 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 %}

Reemplázalo con el siguiente:

{% 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 %}

Debería verse así:

{% 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 de idioma del botón Agregar al carrito para que los productos no se muestren como No disponible antes de que un cliente seleccione un producto.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que deseas editar y haz clic en … > Editar el contenido del tema predeterminado.
3. En la barra de búsqueda Filtrar artículos, comienza a escribir no disponible para mostrar la traducción No disponible.
4. Cambia el texto No disponible por Realizar una selección.
5. Haz clic en Guardar.

Narrative

Pasos para Narrative

Sigue estos pasos para personalizar el tema Narrative:

Edita el archivo JavaScript de tu tema

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

Reemplázalo con el siguiente:

{%- 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 %}

Debería verse así:

{% 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 de idioma del botón Agregar al carrito para que los productos no se muestren como No disponible antes de que un cliente seleccione un producto.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que deseas editar y haz clic en … > Editar el contenido del tema predeterminado.
3. En la barra de búsqueda Filtrar artículos, comienza a escribir no disponible para mostrar la traducción No disponible.
4. Cambia el texto No disponible por Realizar una selección.
5. Haz clic en Guardar.

Simple

Pasos para Simple

Sigue estos pasos para personalizar el tema Simple:

Edita el archivo JavaScript de tu tema

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

Agrega el siguiente código en una nueva línea debajo:

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

Debería verse así:

// 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 %}

Reemplázalo con el siguiente:

{% 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 %}

Debería verse así:

{% 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 de idioma del botón Agregar al carrito para que los productos no se muestren como No disponible antes de que un cliente seleccione un producto.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que deseas editar y haz clic en … > Editar el contenido del tema predeterminado.
3. En la barra de búsqueda Filtrar artículos, comienza a escribir no disponible para mostrar la traducción No disponible.
4. Cambia el texto No disponible por Realizar una selección.
5. Haz clic en Guardar.

Supply

Pasos para Supply

Sigue estos pasos para personalizar el tema Supply:

Edita el archivo JavaScript de tu tema

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

Agrega el siguiente código en una nueva línea debajo:

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

Debería verse así:

// 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 %}

Reemplázalo con el siguiente:

{% 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 %}

Reemplázalo con el siguiente:

{% 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 %}

Debería verse así:

{% 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 de idioma del botón Agregar al carrito para que los productos no se muestren como No disponible antes de que un cliente seleccione un producto.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que deseas editar y haz clic en … > Editar el contenido del tema predeterminado.
3. En la barra de búsqueda Filtrar artículos, comienza a escribir no disponible para mostrar la traducción No disponible.
4. Cambia el texto No disponible por Realizar una selección.
5. Haz clic en Guardar.

Venture

Pasos para Venture

Sigue estos pasos para personalizar el tema Venture:

Edita el archivo JavaScript de tu tema

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. 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();

Reemplázalo con el siguiente:

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

con:

/* 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 %}

Reemplázalo con el siguiente:

{% 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 %}

Si no puedes encontrar el código anterior, busca este código y elimínalo:

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

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

{% unless current_variant.available %}

Reemplázalo con el siguiente:

{% 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 %}

Reemplázalo con el siguiente:

{% 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 %}

Debería verse así:

{% 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 de idioma del botón Agregar al carrito para que los productos no se muestren como No disponible antes de que un cliente seleccione un producto.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que deseas editar y haz clic en … > Editar el contenido del tema predeterminado.
3. En la barra de búsqueda Filtrar artículos, comienza a escribir no disponible para mostrar la traducción No disponible.
4. Cambia el texto No disponible por Realizar una selección.
5. Haz clic en Guardar.

Pasos para los temas sin secciones

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. Debería estar en uno de estos cuatro archivos:

   • la plantilla product.liquid en la sección Plantillas
   • el diseño theme.liquid en la sección Diseño.
   • los fragmentos de código product.liquid en la sección Fragmentos.
   • los fragmentos de código single-product.liquid en la sección Fragmentos.

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>

También puedes buscar este código dentro del formulario:

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

Reemplaza el código por el siguiente bloque de código:

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

Si usas Minimal, Pop o Supply, busca todas las apariciones de este código:

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

Reemplaza el código por el siguiente bloque de código:

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

Si usas cualquier otro tema vintage de Shopify, busca este código:

{% assign current_variant = product.selected_or_first_available_variant %}

Reemplaza el código por el siguiente bloque de código:

{% assign current_variant = product.selected_variant %}

Haz clic en Guardar.

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

Puedes cambiar la configuración de idioma del botón Agregar al carrito para que los productos no se muestren como No disponible antes de que un cliente seleccione un producto.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que deseas editar y haz clic en … > Editar el contenido del tema predeterminado.
3. En la barra de búsqueda Filtrar artículos, comienza a escribir no disponible para mostrar la traducción No disponible.
4. Cambia el texto No disponible por Realizar una selección.
5. Haz clic en Guardar.