Agregar un Botón de compra o una colección insertada a tu sitio web

Luego de agregar el canal de ventas de Botón de compra en tu panel de control de Shopify, puedes crear un nuevo Botón de compra para un producto o una colección:

Ejemplo de Botón de compra

Hay dos maneras de crear botones de compra:

  • Puedes generar un código para incrustar en el HTML de una página web, que muestre un Botón de compra en esa página. Puedes personalizar la apariencia de los botones de compra y vincularlos a tu pantalla de pagos de Shopify, a un carrito de compras o a la descripción de un producto. El código del Botón de compra puede contar con un solo producto o una colección.

  • Puedes generar un enlace a la pantalla de pagos para agregar a una campaña por correo electrónico, mensaje directo o publicación en redes sociales.

Crea un Botón de compra para un solo producto

Puedes crear un Botón de compra que ofrezca un solo producto que incluya una o todas las variantes del producto. Cuando creas el Botón de compra, puedes elegir una plantilla y personalizar el color, el texto y la apariencia del botón, además de la acción que sucede cuando un cliente hace clic en él. Obtén más información acerca de Cómo personalizar botones de compra.

Pasos:

  1. Haz clic en Crear Botón de compra.

  2. Selecciona un producto de tu catálogo o utiliza la función de búsqueda para buscar un producto. Haz clic en Seleccionar producto.

  3. Si tu producto tiene múltiples variantes, selecciona Todas las variantes o selecciona una variante de la lista desplegable.

  4. Elige una plantilla y personaliza el color, el texto y la apariencia del botón, además de la acción que sucede cuando un cliente hace clic en él:

    Creación de Botón de compra

    Para obtener más información acerca de las diferentes maneras en que puedes personalizar botones de compra, consulta Cómo personalizar botones de compra

  5. Haz clic en Generar código.

  6. Haz clic en Copiar código en el portapapeles para copiar el código.

  7. Abre el editor HTML de la página web donde deseas que aparezca el Botón de compra. Consulta Cómo agregar un código de Botón de compra a HTML.

  8. Pega el código en el HTML donde desees que aparezca el Botón de compra y guarda los cambios.

Crear una colección insertada

Puedes crear una colección incrustada para ofrecer los productos de una colección con botones de compra:

La colección incrustada muestra cada producto de la colección con su propio Botón de compra, para que los clientes puedan elegir cualquier producto de la colección. Cuando creas la colección incrustada, puedes personalizar el color, el texto y la apariencia de los botones de compra en los productos que se ofrecen, además de la acción que sucede cuando un cliente hace clic en el botón. El botón de cada producto de la colección utiliza las mismas personalizaciones. Obtén más información acerca de Cómo personalizar botones de compra.

Pasos:

  1. Haz clic en Crear Botón de compra.

  2. Haz clic en Colecciones.

  3. Selecciona una colección y luego haz clic en Seleccionar colección.

  4. Personaliza el color, el texto y la apariencia de los botones, además de la acción que sucede cuando un cliente hace clic en ellos:

    Para obtener más información acerca de las diferentes maneras en las que puedes personalizar botones de compra, consulta Cómo personalizar botones de compra.

  5. Haz clic en Generar código.

  6. Haz clic en Copiar código en el portapapeles para copiar el código.

  7. Abre el editor HTML de la página web donde desees mostrar la colección incrustada. Consulta Cómo agregar un código de Botón de compra a HTML.

  8. Pega el código de inserción en el HTML donde desees que aparezca la colección incrustada y guarda los cambios.

Cómo personalizar botones de compra

Puedes personalizar el color, el tamaño y la apariencia de un Botón de compra, además de seleccionar la acción que sucede cuando se hace clic en él. Cuando creas un Botón de compra para un solo producto, también puedes elegir una plantilla para el Botón de compra. Puedes acceder a una vista previa de tus opciones antes de generar el código desde la página Crear.

Plantillas de Botón de compra

Cuando creas un Botón de compra para un solo producto, puedes elegir entre las siguientes plantillas:

<table>
  <tr>
    <td style="min-width: 90px"><img src="/assets/manual/buy-button/icon-product-button.png" width="60" alt="Icon of a product image with a button"></td>
    <td><strong>Basic template</strong></td>
    <td>Select this template to display a product image and price beside the Buy Button.</td>
  </tr>
  <tr>
    <td><img src="/assets/manual/buy-button/icon-button.png" width="60" alt="Icon of only a rounded button"></td>
    <td><strong>Button template</strong></td>
    <td>Select this template to add a Buy Button without any product image. You might want to do this if you already display your products elsewhere online but want to add a checkout link.</td>
  </tr>
  <tr>
    <td><img src="/assets/manual/buy-button/icon-product-desc-button.png" width="60" alt="Icon of a product image with text and a button on the right side"></td>
    <td><strong>Enhanced template</strong></td>
    <td>Select this template to display a product image, price, and description beside the Buy Button.</td>
  </tr>
</table>

Acciones de Botón de compra

Cuando creas un Botón de compra, puedes seleccionar una acción de la lista Acción al hacer clic. Cuando alguien hace clic en el Botón de compra en una página, sucede una de las siguientes cosas:

  • Agregar productos al carrito agrega el producto a un carrito de compras. Los clientes pueden agregar productos adicionales al carrito mientras continúan comprando.
  • Dirigir a los compradores a la pantalla de pago lleva al cliente directamente a tu pantalla de pagos, donde puede comprar el producto. Los clientes no pueden agregar más productos a su pedido.
  • Mostrar detalles del producto muestra una descripción del producto junto con el botón Agregar al carrito. Si un producto tiene varias imágenes, también se mostrarán.

Tamaño y alineación del Botón de compra

Puedes seleccionar el tamaño y la alineación de las partes del Botón de compra en los menús desplegables Tamaño y Alineación. Puedes acceder a una vista previa del Botón de compra que te ayude a decidir qué opciones serán las mejores para tu página web.

Apariencia del Botón de compra

  • El estilo y el texto del botón incluye opciones de estilo y color para la parte del botón del Botón de compra.
  • Estilo de fuente incluye opciones de fuente y color para el texto del Botón de compra y la información del producto.
  • Carrito de compras incluye texto y opciones de color para el carrito de compras insertado.

Crea un enlace a la pantalla de pagos

Puedes utilizar el canal del Botón de compra para crear enlaces a la pantalla de pagos en los que tus clientes pueden hacer clic para agregar una sola variante del producto a una pantalla de pagos. Puedes agregar enlaces a la pantalla de pagos en mensajes de correo electrónico, publicaciones en redes sociales o mensajes directos para compartir con facilidad un producto con los clientes.

Pasos:

  1. Haz clic en Crear enlace a pantalla de pagos.

  2. Selecciona el producto y luego haz clic en Seleccionar producto.

  3. Si tu producto tiene más de una variante, selecciona una. Cada enlace a la pantalla de pagos puede tener una sola variante del producto.

  4. Haz clic en Copiar enlace para copiar el enlace.

  5. Pega el enlace directamente en un mensaje, correo electrónico o publicación en red social.

Ejemplos de enlaces a pantalla de pagos

Puedes compartir enlaces a pantallas de pago en campañas por correo electrónico, publicaciones en redes sociales o mensajes directos. Una vez que creas el enlace, puedes copiar el texto del enlace y pegarlo en cualquier lugar para compartir la pantalla de pagos directa con los clientes.

Los siguientes ejemplos muestran varias maneras en que puedes utilizar enlaces a la pantalla de pago:

¿Estas listo(a) para comenzar a vender con Shopify?

Pruébala gratis