Crear un botón de compras

Esta página fue impresa el Jun 05, 2023. Para acceder a la versión actual, por favor visita https://help.shopify.com/es/manual/online-sales-channels/buy-button/create-buy-button.

Después de agregar el canal de ventas de botón de compras en tu panel de control de Shopify, puedes crear un botón de compras para un producto o una colección.

Después de crear un botón de compras, copia el código generado automáticamente y luego agrega el código a la página web o artículo del blog donde quieres que aparezca el botón. Por ejemplo, quizá desees agregar el Botón de compras a tu blog de WordPress o al sitio web de Squarespace.

La apariencia del botón de compras no se puede cambiar después de incrustarlo en el sitio web. Si deseas cambiarla, debes crear un nuevo botón en el canal y remplazar el código original por el nuevo código.

En esta página

Cómo personalizar botones de compra
Crea un Botón de compras para un solo producto
Crear un botón de compras para una colección

Cómo personalizar botones de compra

Puedes personalizar la apariencia de un Botón de compras y sus características:

Su color
Su tamaño
Su fuente
Lo que sucede cuando se hace clic en el botón
Si la pantalla de pago se abre en una nueva ventana del navegador

A medida que personalizas el botón, puedes ver una vista previa de tus cambios. Puedes probar el comportamiento del Botón de compras haciendo clic en la vista previa.

Estilo de diseño

Puedes seleccionar el diseño del Botón de compras.

Diseños disponibles para los botones de compra
Basic	Selecciona este diseño para agregar un Botón de compras sin ninguna imagen de producto. Quizá quieras hacer esto si ya exhibes tus productos en otro lugar, pero solo deseas agregar el botón para realizar la compra.
Clásico	Selecciona este diseño para mostrar una imagen del producto y el precio al lado del Botón de compras. Este diseño es útil para una vista previa rápida del producto, como en un artículo de blog.
Vista completa	Selecciona este diseño para mostrar una imagen, un precio y una descripción del producto junto al Botón de compras. Este diseño emula una página de detalles del producto en tu tienda online.

Acciones de Botón de compras

Cuando creas un Botón de compras, puedes seleccionar la acción que se produce cuando se hace clic en el botón.

Si el Botón de compras es para una colección, la acción se aplica a cada producto en la colección.

Al agregar el producto al carritose agrega el producto al carrito. Los clientes pueden seguir comprando y agregar más productos al carrito.
Directo al pago lleva al cliente directamente a tu página de pago, donde puede comprar el producto. Los clientes no pueden agregar más productos a su pedido.
Abrir detalles del producto muestra un botón de Ver producto. Cuando el cliente hace clic en el botón, puede ver la descripción del producto, seleccionar cualquier variante de producto disponible y agregar el producto al carrito. Si un producto tiene varias imágenes, también se mostrarán.

También puedes elegir si la pantalla de pago se abre en una nueva ventana del navegador o si se abre en la misma pestaña que tu sitio web. De forma predeterminada, la ventana de pago se abre en una nueva ventana.

Apariencia del Botón de compras

El estilo del botón incluye formas, colores y tipografía para la parte del botón del Botón de compras.
Diseño Según el estilo de diseño que selecciones, puedes personalizar la configuración, como la alineación del botón, el tamaño de la imagen, el texto del botón, la fuente, el color y el tamaño.
Carrito incluye opciones de texto y color para el carrito incrustado. También puedes habilitar y personalizar la etiqueta del campo Nota de pedido. Puedes usar notas de pedido para recibir instrucciones especiales de los clientes sobre cómo preparar y enviar un pedido. El campo Información adicional te permite enviar un mensaje a tus clientes.
El Menú emergente detallado incluye la configuración para la ventana emergente de detalles del producto. Puedes personalizar el texto del botón, si se mostrará o no el campo cantidad, los colores usados para el fondo y las etiquetas, y la fuente y el tamaño de fuente de las etiquetas. Solo puedes editar estos parámetros si seleccionas Abrir detalles del producto como la Accióndel botón.

Crea un Botón de compras para un solo producto

Puedes crear un botón de compras para un solo producto. El botón de compras puede incluir una o todas las variantes del producto. Cuando creas el botón de compras, selecciona un estilo de diseño y personaliza el color, el texto y el aspecto del botón, así como la acción que se produce cuando un cliente hace clic en él. Más información sobre cómo personalizar botones de compra.

Antes de crear un botón de compras para un producto, debes haber agregado el producto en tu panel de control de Shopify y marcarlo como disponible para el canal de ventas del botón de compras.

Pasos:

En el panel de control de Shopify, haz clic en Configuración > Aplicaciones y canales de ventas.
Desde la página Aplicaciones y canales de ventas, haz clic en Buy Button.
Haz clic en Abrir canal de ventas.
Haz clic en Crear un botón de compras.
Haz clic en Botón de compras del producto.
Selecciona el producto de tu catálogo o utiliza la búsqueda para encontrar un producto. Haz clic en Seleccionar.
Opcional: personaliza el botón de compras.
Haz clic en Siguiente.
Haz clic en Copiar código.
Abre el editor HTML de la página web donde deseas que aparezca el Botón de compras. Consulta Cómo agregar un código de Botón de compras a HTML.
Pega el código en el HTML donde desees que aparezca el Botón de compras y guarda los cambios.

Desde la app de Shopify, toca Tienda.
En la sección Canal de ventas, toca Botón de compras.
Haz clic en Crear un botón de compras.
Haz clic en Botón de compras del producto.
Selecciona el producto de tu catálogo o utiliza la búsqueda para encontrar un producto. Haz clic en Seleccionar.
Opcional: haz clic en Personalizar.
Haz clic en Listo.
Haz clic en Copiar código.
Abre el editor HTML de la página web donde deseas que aparezca el Botón de compras. Consulta Cómo agregar un código de Botón de compras a HTML.
Pega el código en el HTML donde desees que aparezca el Botón de compras y guarda los cambios.

Desde la app de Shopify, toca Tienda.
En la sección Canal de ventas, toca Botón de compras.
Haz clic en Crear un botón de compras.
Haz clic en Botón de compras del producto.
Selecciona el producto de tu catálogo o utiliza la búsqueda para encontrar un producto. Haz clic en Seleccionar.
Opcional: haz clic en Personalizar.
Haz clic en Listo.
Haz clic en Copiar código.
Abre el editor HTML de la página web donde deseas que aparezca el Botón de compras. Consulta Cómo agregar un código de Botón de compras a HTML.
Pega el código en el HTML donde desees que aparezca el Botón de compras y guarda los cambios.