Reemplazar "Agregar al carrito" con un enlace de contacto

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

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

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

Narrative

Crear una nueva plantilla de producto en Narrative

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

5. Busca el siguiente código:

{% section 'product-template' %}

Reemplázalo con el siguiente:

{% section 'product-template-requires-contact' %}

Este código vincula tu nueva plantilla con una nueva sección de producto que crearás en los próximos pasos.

1. Haz clic en Guardar.

Crear una nueva sección de productos

1. En el directorio Secciones, haz clic en Agregar una nueva sección.

2. Crea la sección:

   1. Asigna a tu nueva sección el nombre product-template-requires-contact.
   2. Haz clic en Crear sección.

3. Elimina todo el código predeterminado en el archivo de sección para que el archivo esté vacío.

4. En el directorio Secciones, haz clic en product-template.liquid. Copia todo el contenido del archivo en tu portapapeles.

5. Regresa a tu nueva sección product-template-requires-contact.liquid y pega el código en el archivo.

6. Haz clic en Guardar.

Ocultar el botón Agregar al carrito

1. En tu archivo de sección product-template-requires-contact.liquid, busca el código HTML para el formulario de producto de tu página de producto. Puedes encontrarlo buscando la palabra form en el archivo.

2. 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 Narrative, el código modificado se vería así:

{% comment %}
{% include 'product-form' %}
{% 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

Puedes agregar un enlace de correo electrónico que abra el programa de correo electrónico predeterminado del cliente e introducirá la dirección de correo electrónico de contacto del cliente de tu tienda como destinatario. Para agregar un 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:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

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.

En una nueva línea debajo de la etiqueta Liquid {% endcomment %} que has agregado, pega el código para el formulario de contacto.

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

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 contacto necesario en el menú desplegable Plantilla de tema.

4. Haz clic en Guardar.

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

Other

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

5. Busca el siguiente código:

{% section 'product-template' %}

Reemplázalo con el siguiente:

{% section 'product-template-requires-contact' %}

Este código vincula tu nueva plantilla con una nueva sección de producto que crearás en los próximos pasos.

1. Haz clic en Guardar.

Crear una nueva sección de productos

1. En el directorio Secciones, haz clic en Agregar una nueva sección.

2. Crea la sección:

   1. Asigna a tu nueva sección el nombre product-template-requires-contact.
   2. Haz clic en Crear sección.

3. Elimina todo el código predeterminado en el archivo de sección para que el archivo esté vacío.

4. En el directorio Secciones, haz clic en product-template.liquid. Copia todo el contenido del archivo en tu portapapeles.

5. Regresa a tu nueva sección product-template-requires-contact.liquid y pega el código en el archivo.

6. Haz clic en Guardar.

Ocultar el botón Agregar al carrito

1. En tu nuevo archivo de sección product-template-requires-contact.liquid, busca el código HTML del botón Agregar al carrito de tu página de producto. Puedes encontrarlo buscando la palabra cart en el archivo.

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

Precaución

Asegúrate de no comentar las etiquetas <form> de tu página de producto. Las etiquetas de comentarios no deben estar alrededor de las etiquetas <form> o </form>. De lo contrario, los clientes podrían experimentar errores al ver la página de producto.

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

Puedes agregar un enlace de correo electrónico que abra el programa de correo electrónico predeterminado del cliente e introducirá la dirección de correo electrónico de contacto del cliente de tu tienda como destinatario. Para agregar un 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:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

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. Regresa a tu nuevo archivo product-template-requires-contact.liquid en el directorio Secciones.
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 la 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.

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

Precaución

Asegúrate de no comentar las etiquetas <form> de tu página de producto. Las etiquetas de comentarios no deben estar alrededor de las etiquetas <form> o </form>. De lo contrario, los clientes podrían experimentar errores al ver la página de producto.

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.