Crear un botón de compras

Esta página fue impresa el Apr 25, 2024. 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

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.
    • Esta opción no está disponible cuando seleccionas el diseño de vista completa porque este ya muestra todos los detalles del producto.

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.

    • Solo puedes editar la configuración del carrito si seleccionas Agregar producto al carrito o Abrir detalles del producto como la Acción del botón.

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

  1. En el panel de control de Shopify, haz clic en Configuración > Aplicaciones y canales de ventas.

  2. Desde la página Aplicaciones y canales de ventas, haz clic en Buy Button.

  3. Haz clic en Abrir canal de ventas.

  4. Haz clic en Crear un botón de compras.

  5. Haz clic en Botón de compras del producto.

  6. Selecciona el producto de tu catálogo o utiliza la búsqueda para encontrar un producto. Haz clic en Seleccionar.

  7. Opcional: personaliza el botón de compras.

    1. Si tu producto tiene variantes, selecciona Todas las variantes o selecciona la variante que deseas incluir.
    2. Selecciona un estilo de diseño y la acción que sucede cuando un cliente hace clic en el botón. También puedes personalizar la apariencia del botón.
    3. De forma predeterminada, la pantalla de pago se abre una ventana nueva, pero puedes configurar que se abra la ventana de pago en la misma pestaña del navegador que tu sitio web. Haz clic en Configuración avanzada > Redirigir en la misma pestaña.

  8. Haz clic en Siguiente.

  9. Haz clic en Copiar código.

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

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

  1. En la aplicación de Shopify, toca el botón ….
  2. En la sección Canal de ventas, toca Botón de compras.
  3. Haz clic en Crear un botón de compras.
  4. Haz clic en Botón de compras del producto.
  5. Selecciona el producto de tu catálogo o utiliza la búsqueda para encontrar un producto. Haz clic en Seleccionar.

  6. Opcional: haz clic en Personalizar.

    1. Si tu producto tiene múltiples variantes, selecciona Todas las variantes o selecciona una variante de la lista desplegable.
    2. Selecciona un estilo de diseño y la acción que sucede cuando un cliente hace clic en el botón. También puedes personalizar la apariencia del botón.
    3. De forma predeterminada, la pantalla de pago se abre una ventana nueva, pero puedes configurar que se abra la ventana de pago en la misma pestaña del navegador que tu sitio web. Haz clic en Configuración avanzada > Redirigir en la misma pestaña.

  7. Haz clic en Listo.

  8. Haz clic en Copiar código.

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

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

  1. En la aplicación de Shopify, toca el botón ….
  2. En la sección Canal de ventas, toca Botón de compras.
  3. Haz clic en Crear un botón de compras.
  4. Haz clic en Botón de compras del producto.
  5. Selecciona el producto de tu catálogo o utiliza la búsqueda para encontrar un producto. Haz clic en Seleccionar.

  6. Opcional: haz clic en Personalizar.

    1. Si tu producto tiene múltiples variantes, selecciona Todas las variantes o selecciona una variante de la lista desplegable.
    2. Selecciona un estilo de diseño y la acción que sucede cuando un cliente hace clic en el botón. También puedes personalizar la apariencia del botón.
    3. De forma predeterminada, la pantalla de pago se abre una ventana nueva, pero puedes configurar que se abra la ventana de pago en la misma pestaña del navegador que tu sitio web. Haz clic en Configuración avanzada > Redirigir en la misma pestaña.

  7. Haz clic en Listo.

  8. Haz clic en Copiar código.

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

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

Crear un botón de compras para una colección

Cuando creas un Botón de compras para una colección, en realidad estás creando un botón para cada producto en la colección.

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 una colección, debes:

Pasos:

  1. En el panel de control de Shopify, haz clic en Configuración > Aplicaciones y canales de ventas.

  2. Desde la página Aplicaciones y canales de ventas, haz clic en Buy Button.

  3. Haz clic en Abrir canal de ventas.

  4. Haz clic en Crear un botón de compras.

  5. Haz clic en Botón de compras de la colección.

  6. Selecciona la colección o usa la búsqueda para ubicar la colección. Haz clic en Seleccionar.

  7. Opcional: personaliza el botón de compras.

    1. Selecciona la acción que sucede cuando un cliente hace clic en el botón. También puedes personalizar la apariencia del botón.
    2. De forma predeterminada, la pantalla de pago se abre una ventana nueva, pero puedes configurar que se abra la ventana de pago en la misma pestaña del navegador que tu sitio web. Haz clic en Configuración avanzada > Redirigir en la misma pestaña.

  8. Haz clic en Siguiente.

  9. Haz clic en Copiar código.

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

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

  1. En la aplicación de Shopify, toca el botón ….
  2. En la sección Canal de ventas, toca Botón de compras.
  3. Haz clic en Crear un botón de compras.
  4. Haz clic en Botón de compras de la colección.
  5. Selecciona la colección o usa la búsqueda para ubicar la colección. Haz clic en Seleccionar.

  6. Opcional: haz clic en Personalizar.

    1. Selecciona la acción que sucede cuando un cliente hace clic en el botón. También puedes personalizar la apariencia del botón.
    2. De forma predeterminada, la pantalla de pago se abre una ventana nueva, pero puedes configurar que se abra la ventana de pago en la misma pestaña del navegador que tu sitio web. Haz clic en Configuración avanzada > Redirigir en la misma pestaña.

  7. Haz clic en Listo.

  8. Haz clic en Copiar código.

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

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

  1. En la aplicación de Shopify, toca el botón ….
  2. En la sección Canal de ventas, toca Botón de compras.
  3. Haz clic en Crear un botón de compras.
  4. Haz clic en Botón de compras de la colección.
  5. Selecciona la colección o usa la búsqueda para ubicar la colección. Haz clic en Seleccionar.

  6. Opcional: haz clic en Personalizar.

    1. Selecciona la acción que sucede cuando un cliente hace clic en el botón. También puedes personalizar la apariencia del botón.
    2. De forma predeterminada, la pantalla de pago se abre una ventana nueva, pero puedes configurar que se abra la ventana de pago en la misma pestaña del navegador que tu sitio web. Haz clic en Configuración avanzada > Redirigir en la misma pestaña.

  7. Haz clic en Listo.

  8. Haz clic en Copiar código.

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

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

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

Prueba gratis