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

Seleccionar una opción

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:

Pasos para los temas sin secciones

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.

Agregar un nuevo fragmento de código

  1. En tu nuevo archivo de fragmento, pega este código alojado en GitHub.
  2. Haz clic en Guardar.
  3. En el directorio Diseño, haz clic en theme.liquid.
  4. 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' %}

Incluir el fragmento 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>

O

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

Reemplázalo con el siguiente:

<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:
    • Minimal, Pop o Supply: si usas Minimal, Pop o Supply, busca todas las veces en que aparece 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 %}
  • Otros temas gratis de Shopify: si usas cualquier otro tema de Shopify, busca este código:
{% assign current_variant = product.selected_or_first_available_variant %}

Reemplázalo con el siguiente:

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

  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 el cuadro Filtrar, comienza a escribir unavailable para mostrar la traducción "No disponible".
  4. Reemplaza el texto No disponible con Make a selection.
  5. Haz clic en Guardar.

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis