Motivar a los clientes a elegir una opción
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
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
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que desees editar, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.
En el directorio Componentes, haz clic en
theme.js
otheme.js.liquid
.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;
}
}
}
- 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');
- Haz clic en Guardar.
Editar la plantilla de tu página de producto
Para editar la plantilla de tu página de producto:
- En el directorio Secciones, haz clic en
product-template.liquid
. - 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 %}
- Busca el siguiente código y elimínalo:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
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 %}
- 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:
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que deseas editar y haz clic en … > Editar el contenido del tema predeterminado.
En la barra de búsqueda Filtrar artículos, comienza a escribir no disponible para mostrar la traducción No disponible.
Cambia el texto No disponible por Realizar una selección.
Haz clic en Guardar.
Debut
Pasos para Debut
Sigue estos pasos para personalizar el tema Debut:
Edita el archivo JavaScript de tu tema
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que desees editar, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.
En el directorio Componentes, haz clic en
theme.js
otheme.js.liquid
.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;
}
}
}
})();
-
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;
} */
-
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);
-
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 || {};
}
- 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;
} */
-
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;
}
}
-
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);
} */
- 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');
}
},
- Haz clic en Guardar.
Editar la plantilla de tu página de producto
Para editar la plantilla de tu página de producto:
- En el directorio Secciones, haz clic en
product-template.liquid
. - 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 %}
- 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 -%}
- 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 -%}
- 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 %}
- 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>
-
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 %}
- Haz clic en Guardar.
Editar el fragmento del precio de tu producto
Para editar el fragmento del precio de tu producto:
- En el directorio Fragmentos, haz clic en
product-price.liquid
. - 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
-%}
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:
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que deseas editar y haz clic en … > Editar el contenido del tema predeterminado.
En la barra de búsqueda Filtrar artículos, comienza a escribir no disponible para mostrar la traducción No disponible.
Cambia el texto No disponible por Realizar una selección.
Haz clic en Guardar.
Minimal
Pasos para Minimal
Sigue estos pasos para personalizar el tema Minimal:
Edita el archivo JavaScript de tu tema
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que desees editar, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.
En el directorio Componentes, haz clic en
theme.js
otheme.js.liquid
.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;
}
}
}
- Haz clic en Guardar.
Editar la plantilla de tu página de producto
Para editar la plantilla de tu página de producto:
- En el directorio Secciones, haz clic en
product-template.liquid
. - Busca el siguiente código:
{% assign variant = product.selected_or_first_available_variant %}
Reemplázalo con el siguiente:
{% assign variant = product.selected_variant %}
- Busca el siguiente código y elimínalo:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- 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 %}
-
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 %}
- 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:
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que deseas editar y haz clic en … > Editar el contenido del tema predeterminado.
En la barra de búsqueda Filtrar artículos, comienza a escribir no disponible para mostrar la traducción No disponible.
Cambia el texto No disponible por Realizar una selección.
Haz clic en Guardar.
Narrative
Pasos para Narrative
Sigue estos pasos para personalizar el tema Narrative:
Edita el archivo JavaScript de tu tema
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que desees editar, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.
En el directorio Componentes, haz clic en
custom.js
.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;
}
}
}
})();
- Haz clic en Guardar.
Editar la plantilla de tu página de producto
Para editar la plantilla de tu página de producto:
- En el directorio Secciones, haz clic en
product-template.liquid
. - 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 -%}
-
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 %}
- 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:
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que deseas editar y haz clic en … > Editar el contenido del tema predeterminado.
En la barra de búsqueda Filtrar artículos, comienza a escribir no disponible para mostrar la traducción No disponible.
Cambia el texto No disponible por Realizar una selección.
Haz clic en Guardar.
Simple
Pasos para Simple
Sigue estos pasos para personalizar el tema Simple:
Edita el archivo JavaScript de tu tema
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que desees editar, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.
En el directorio Componentes, haz clic en
theme.js
otheme.js.liquid
.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;
}
}
}
- Haz clic en Guardar.
Editar la plantilla de tu página de producto
Para editar la plantilla de tu página de producto:
- En el directorio Secciones, haz clic en
product-template.liquid
. - 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 %}
- Busca el siguiente código y elimínalo:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
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 %}
- 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:
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que deseas editar y haz clic en … > Editar el contenido del tema predeterminado.
En la barra de búsqueda Filtrar artículos, comienza a escribir no disponible para mostrar la traducción No disponible.
Cambia el texto No disponible por Realizar una selección.
Haz clic en Guardar.
Supply
Pasos para Supply
Sigue estos pasos para personalizar el tema Supply:
Edita el archivo JavaScript de tu tema
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que desees editar, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.
En el directorio Componentes, haz clic en
theme.js
otheme.js.liquid
.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;
}
}
}
- Haz clic en Guardar.
Editar la plantilla de tu página de producto
Para editar la plantilla de tu página de producto:
- En el directorio Secciones, haz clic en
product-template.liquid
. - Busca el siguiente código:
{% assign variant = product.selected_or_first_available_variant %}
Reemplázalo con el siguiente:
{% assign variant = product.selected_variant %}
- Busca el siguiente código y elimínalo:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- 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 %}
-
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 %}
- 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:
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que deseas editar y haz clic en … > Editar el contenido del tema predeterminado.
En la barra de búsqueda Filtrar artículos, comienza a escribir no disponible para mostrar la traducción No disponible.
Cambia el texto No disponible por Realizar una selección.
Haz clic en Guardar.
Venture
Pasos para Venture
Sigue estos pasos para personalizar el tema Venture:
Edita el archivo JavaScript de tu tema
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que desees editar, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.
En el directorio Componentes, haz clic en
theme.js
otheme.js.liquid
.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;
}
}
}
})();
- Busca el siguiente código:
this.currentVariant = this._getVariantFromOptions();
Reemplázalo con el siguiente:
this.currentVariant = this._getVariantFromOptions() || {};
-
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;
} */
- Haz clic en Guardar.
Editar la plantilla de tu página de producto
Para editar la plantilla de tu página de producto:
- En el directorio Secciones, haz clic en
product-template.liquid
. - 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 %}
- 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 %}
- 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 %}
- 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 %}
-
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 %}
- 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:
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que deseas editar y haz clic en … > Editar el contenido del tema predeterminado.
En la barra de búsqueda Filtrar artículos, comienza a escribir no disponible para mostrar la traducción No disponible.
Cambia el texto No disponible por Realizar una selección.
Haz clic en Guardar.
Pasos para los temas sin secciones
Agregar indicaciones a los menús desplegables de tus variantes
- En el directorio Fragmentos, haz clic en Agregar un nuevo fragmento.
- Asigna a tu nuevo fragmento el nombre
pick-an-option
. - En tu nuevo archivo de fragmento, pega este código alojado en GitHub.
- Haz clic en Guardar.
- En el directorio Diseño, haz clic en
theme.liquid
. -
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' %}
- Haz clic en Guardar.
-
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.
- la plantilla
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:
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que deseas editar y haz clic en … > Editar el contenido del tema predeterminado.
En la barra de búsqueda Filtrar artículos, comienza a escribir no disponible para mostrar la traducción No disponible.
Cambia el texto No disponible por Realizar una selección.
Haz clic en Guardar.