Ayuda
Iniciar sesión

Crear un botón de compras

Después de agregar el canal de ventas Botón de compras en el 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 que se genera automáticamente y agrégalo a la página web o a la publicación de blog donde quieras que se muestre el botón. Por ejemplo, puedes agregar el botón de compras a un blog de Wordpress o a un sitio web de Squarespace.

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

En esta página

Personalización de los botones de compras

Puedes personalizar la apariencia y el comportamiento de un botón de compras:

  • su color
  • su tamaño
  • su fuente
  • la acción que ocurre cuando se hace clic en el botón
  • si el pago se abre en una nueva ventana del navegador

Mientras personalizas el botón, puedes previsualizar los cambios. Puedes probar el comportamiento del botón de compras cuando haces clic en la vista previa.

Estilo de diseño

Puedes elegir el diseño del botón de compras.

Descripciones de los diseños disponibles Básico, Clásico y Vista completa para los botones de compras.
BásicoSelecciona este diseño para agregar un botón de compras sin imagen del producto. Puede convenirte si ya muestras los productos en otro lugar online y solo quieres agregar el botón para realizar la compra.
ClásicoSelecciona este diseño para mostrar una imagen del producto y el precio junto al botón de compras. Este diseño es útil para una vista rápida del producto, por ejemplo, en una publicación de blog.
Vista completaSelecciona este diseño para mostrar una imagen del producto, el precio y la descripción junto al botón de compras. Este diseño emula una página de información del producto en la tienda online.

Acciones del botón de compras

Cuando creas un botón de compras, puedes seleccionar la acción que se ejecuta 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 de la colección.

  • Agregar producto al carrito agrega el producto a un carrito de compras. Los clientes pueden seguir comprando y agregar más productos al carrito.
  • Ir directamente al pago lleva al cliente directamente a la página de pago, donde puede comprar el producto. Los clientes no pueden agregar más productos al pedido.
  • Abrir la información del producto muestra un Ver producto botón. Cuando el cliente hace clic en el botón, puede ver la descripción del producto, seleccionar las variantes disponibles y agregar el producto al carrito. Si un producto tiene varias imágenes del producto, también se muestran.
    • Esta opción no está disponible cuando eliges el diseño Vista completa, porque el diseño Vista completa ya muestra toda la información del producto.

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

Apariencia del botón de compras

  • Estilo del botón incluye la forma, el color y la tipografía del botón.
  • Diseño: según el estilo de diseño que elijas, puedes personalizar opciones 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 de compras incluye opciones de texto y color para el carrito de compras incrustado. También puedes habilitar y personalizar la etiqueta del Nota del pedido campo. Puedes usar las notas del pedido para recopilar instrucciones especiales de los clientes sobre cómo preparar y entregar un pedido. La Información adicional permite comunicar un mensaje a los clientes.
    • Solo puedes editar la configuración del carrito de compras si elegiste Agregar producto al carrito o Abrir la información del producto como la acción del botón.
  • Ventana emergente detallada incluye la configuración de la ventana emergente con la información del producto. Puedes personalizar el texto del botón, decidir si incluir o no el campo de cantidad, los colores del fondo y de las etiquetas, y la fuente y el tamaño de la fuente de las etiquetas. Solo puedes editar esta configuración si elegiste Abrir la información del producto como la acción del botón.

Crear 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, eliges un estilo de diseño y personalizas el color, el texto y la apariencia del botón, así como la acción que ocurre cuando un cliente hace clic en él. Obtén más información sobre customizing Buy Buttons.

Antes de crear un botón de compras para un producto, debes haber added the product in your Shopify Admin y made it available en el canal de ventas Botón de compras.

Pasos:

Escritorio

  1. Desde el panel de control de Shopify, ve a Canales de ventas > Buy Button.

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

  3. Haz clic en Botón de compras de producto.

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

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

    1. Si tu producto tiene variantes, selecciona Todas las variantes o selecciona la variante que quieres incluir.
    2. Elige un layout style y la action que ocurre cuando un cliente hace clic en el botón. También puedes customize the button's appearance.
    3. De forma predeterminada, el pago se abre en una ventana nueva, pero puedes elegir abrir el pago en la misma pestaña del navegador que tu sitio web. Haz clic en Configuración avanzada > Redirigir en la misma pestaña.

  6. Haz clic en Siguiente.

  7. Haz clic en Copiar código.

  8. Abre el editor de HTML de la página web donde quieres mostrar el botón de compras. Consulta Adding Buy Button code to HTML.

  9. Pega el código en el HTML donde quieres que aparezca el botón de compras y guarda los cambios.

Móvil

  1. Desde la app de Shopify, toca el ícono Menu.

  2. En la sección **Canales de ventas**, toca **Botón de compras**.

  3. Toca Crear un botón de compras.

  4. Toca Botón de compras de producto.

  5. Selecciona el producto de tu catálogo o usa la búsqueda para encontrar un producto y luego toca Seleccionar.

  6. Opcional: toca **Personalizar**.

    1. Si tu producto tiene varias variantes, selecciona Todas las variantes o selecciona una variante de la lista desplegable.
    2. Elige un layout style y la action que ocurre cuando un cliente hace clic en el botón. También puedes customize the button's appearance.
    3. De forma predeterminada, el pago se abre en una ventana nueva, pero puedes elegir abrir el pago en la misma pestaña del navegador que tu sitio web. Toca Configuración avanzada > Redirigir en la misma pestaña.

  7. Toca Listo.

  8. Toca Copiar código.

  9. Abre el editor de HTML de la página web donde quieres mostrar el botón de compras. Consulta Adding Buy Button code to HTML.

  10. Pega el código en el HTML donde quieres 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 creas un botón para cada producto de la colección.

Cuando creas el botón de compras, eliges un estilo de diseño y personalizas el color, el texto y la apariencia del botón, así como la acción que ocurre cuando un cliente hace clic en él. Obtén más información sobre customizing Buy Buttons.

Antes de crear un botón de compras para una colección, debes haber:

Pasos:

Escritorio

  1. Desde el panel de control de Shopify, ve a Canales de ventas > Buy Button.

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

  3. Haz clic en Botón de compras de colección.

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

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

    1. Elige la action que ocurre cuando un cliente hace clic en el botón. También puedes customize the button's appearance.
    2. De forma predeterminada, el pago se abre en una ventana nueva, pero puedes elegir abrir el pago en la misma pestaña del navegador que tu sitio web. Haz clic en Configuración avanzada > Redirigir en la misma pestaña.

  6. Haz clic en Siguiente.

  7. Haz clic en Copiar código.

  8. Abre el editor de HTML de la página web donde quieres mostrar el botón de compras. Consulta Adding Buy Button code to HTML.

  9. Pega el código en el HTML donde quieres que aparezca el botón de compras y guarda los cambios.

Móvil

  1. Desde la app de Shopify, toca el ícono Menu.

  2. En la sección **Canales de ventas**, toca **Botón de compras**.

  3. Toca Crear un botón de compras.

  4. Toca Botón de compras de colección.

  5. Selecciona la colección o usa la búsqueda para encontrarla y luego toca Seleccionar.

  6. Opcional: toca **Personalizar**.

    1. Elige la action que ocurre cuando un cliente hace clic en el botón. También puedes customize the button's appearance.
    2. De forma predeterminada, el pago se abre en una ventana nueva, pero puedes elegir abrir el pago en la misma pestaña del navegador que tu sitio web. Toca Configuración avanzada > Redirigir en la misma pestaña.

  7. Toca Listo.

  8. Toca Copiar código.

  9. Abre el editor de HTML de la página web donde quieres mostrar el botón de compras. Consulta Adding Buy Button code to HTML.

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