Reemplazar "Agregar al carrito" con un enlace de contacto

Puedes reemplazar el botón Agregar al carrito con un enlace de correo electrónico o un formulario de contacto. Por ejemplo, quizás prefieras reemplazar el botón Agregar al carrito para los productos que actualmente no están en venta o los que se hacen por encargo.

Temas con y sin secciones

Pasos para los temas con secciones

Seleccionar tu tema

Los pasos para esta personalización varían en función de si usas el tema Narrative u otro tema gratis creado por Shopify. Haz clic en el botón de tu tema antes de seguir las siguientes instrucciones:

Pasos para los temas sin secciones

Crear una nueva plantilla de producto

Para reemplazar el botón Agregar al carrito de un producto, deberás crear una plantilla de producto personalizada para ese producto.

Pasos:

  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 Plantillas, haz clic en Agregar una nueva plantilla.
  4. Crear la plantilla de producto:
    • En el menú desplegable, selecciona producto.
    • Asigna a tu plantilla el nombre requires-contact.
    • Haz clic en Create template (Crear plantilla).

Ocultar el botón Agregar al carrito

  1. En tu nuevo archivo product.requires-contact.liquid, busca el código HTML para el botón Agregar al carrito. Puedes buscar la palabra cart.

El código del botón Agregar al carrito varía de un tema a otro. Busca una etiqueta <input> o <button> con un texto como Add to cart, AddToCart o add-to-cart.

Para Debut, el código del botón Agregar al carrito se ve así:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
  1. Cuando encuentres el código, inclúyelo entre las etiquetas Liquid {% comment %} y {% endcomment %}. Esto impedirá que el código se muestre en la tienda, pero te permitirá volver a colocarlo más fácilmente si quieres cambiar la nueva plantilla más adelante.

Para Debut, el código modificado debería verse así:

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}
  1. Haz clic en Guardar.

Agregar un enlace por correo electrónico o formulario de contacto

Ahora que has ocultado el botón Agregar al carrito, puedes agregar el contenido que deseas mostrar.

Enlace de correo electrónico

  1. En una nueva línea debajo de la etiqueta Liquid {% endcomment %} que has agregado en el último paso, agrega el código HTML para un enlace de correo electrónico:
Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.
  1. Haz clic en Guardar.

Formulario de contacto

Puedes agregar un formulario de contacto a tu nueva plantilla de producto copiando el código de la plantilla de la página de contacto de tu tema. Para agregar un formulario de contacto:

  1. En el directorio Templates, haz clic en page.contact.liquid.
  2. Busca la etiqueta Liquid {% form 'contact' %} en el archivo.
  3. Copia todo el código de la etiqueta Liquid {% form 'contact' %} hasta la etiqueta Liquid {% endform %}. Incluye las etiquetas del formulario Liquid en el código que copias.
  4. Vuelve a tu nuevo archivo product.requires-contact.liquid en el directorio Plantillas.
  5. Busca la etiqueta de cierre </form> en el archivo. En una nueva línea debajo de la etiqueta de cierre </form>, pega el código para el formulario de contacto.
  6. El siguiente paso es rodear el código que acabas de pegar con etiquetas div de HTML. El atributo de clase incluido en el código de la etiqueta div garantiza que tu formulario de contacto se renderice correctamente en la página.

En una nueva línea arriba {% form 'contact' %}, pega el siguiente código:

<div class="form-vertical"></div>

En una nueva línea debajo de {% endform %}, pega el siguiente código:

</div>
  1. Haz clic en Guardar.

Asignar tu nueva plantilla a un producto

Ahora que la plantilla está lista, puedes asignarla a todos los productos para los que deseas ocultar el botón Agregar al carrito.

  1. Desde tu panel de control de Shopify, ve a Productos.
  2. Haz clic en el nombre de un producto en el que deseas ocultar el botón Agregar al carrito.
  3. En la página de producto de tu panel de control de Shopify, en Tienda online, elige tu nueva plantilla de requiere contacto desde el menú desplegable Plantilla de tema.
  4. Haz clic en Guardar.

Repite estos pasos para cada producto al que desees agregar tu nueva plantilla.

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

Prueba gratis