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:

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.