Base de conocimientos
Guías
Academia
Tutoriales en vídeo
Intenta buscar:
Artículos vistos recientemente:

Tabla de contenidos

Botón de compra

El Botón de compra de Ecwid le permite añadir productos individuales a un sitio web externo o blog. Puede utilizar diferentes opciones de diseño de productos, desde un solo botón «Compre ahora» hasta una tarjeta de producto de tamaño completo.

Una vez que el producto está incrustado en una página, los clientes pueden hacer clic en el botón para añadir el producto al carrito y continuar con la compra sin salir del sitio. Los pedidos estarán disponibles para el seguimiento desde la página Ventas → Pedidos en su administrador de Ecwid.

Diseños del Botón de compra

Dependiendo de su caso de uso, puede insertar tarjetas de producto con diferentes opciones de diseño:

Buy_Button__3_.png

Diseño Caso de uso
Solo el botón Solo un botón Compre ahora, nada más.
Puede utilizar este diseño si un producto ya se muestra en su página del sitio y solo necesita añadir la opción de pago en línea (por ejemplo, es una publicación de blog para anunciar su artículo, o ya ha diseñado la página dedicada a este producto en su sitio web).
Compacto Una tarjeta de producto minimalista con un botón Compre ahora.
Este diseño le permite dar un breve resumen de 1 columna de un producto utilizando su imagen principal, nombre y precio. Además, puede mostrar las opciones de producto y la cantidad disponibles. Si tiene un precio de venta para este producto, también se mostrará.
Tamaño completo Una tarjeta de producto de tamaño completo con un botón Añadir a la Cesta.
Este diseño le permite mostrar toda la información disponible sobre el producto. Puede elegir entre dos opciones de diseño:
  • 2 columnas: en caso de que desee llamar la atención sobre las imágenes de los productos
  • 3 columnas: en caso de que desee llamar la atención sobre la descripción del producto
Solo puede añadir un producto por página con un diseño de tamaño completo.

Crear un Botón de compra

Para añadir un botón de compra a una página web, necesita generar el código de integración individual de un producto. Después de eso, puede incrustar su producto en cualquier sitio web o blog. La tarjeta del producto se puede colocar en cualquier lugar de una página web, en un panel lateral, pie de página del sitio, o en una página de error.

Antes de crear un Botón de compra, necesita configurar su cuenta de Ecwid con productos y opciones de pago/envío que quiera ofrecer a sus clientes. Si después hace algún cambio en los detalles del producto en su administrador de Ecwid (cambiar el nombre del producto, cambiar su precio o descripción, etc.), estos cambios se reflejarán inmediatamente en el Botón de compra.

Para crear un Botón de compra:

  1. Desde su administrador de Ecwid, vaya a Resumen.
  2. Desplácese hasta la tarjeta Botones de compra, haga clic en Comenzar y siga el asistente.

    Buy_Button__2_.png

  3. Haga clic en Comenzar.
  4. En la página que se abre, haga clic en Elegir producto y utilice la barra de búsqueda para seleccionar un producto que desea incrustar.
    También puede acceder al asistente de creación de Botones de compra para un producto específico directamente desde la página de detalles de este producto (la pestaña «Compre ahora»).
  5. Personalizar el botón «Compre ahora»:
    • Elija un diseño: Compacto, Solo el botón, o Tamaño completo.

      Buy_Button__1_.png

    • configure la apariencia del botón: elija qué detalles del producto desea mostrar (nombre del producto, precio, opciones, etc.) y cómo.
    A medida que vaya personalizando el botón, puede previsualizar sus cambios.
  6. Haga clic en Generar código y, a continuación, haga clic en Copiar código.
  7. Inicie sesión en el backend de su sitio web y abra la página donde desea mostrar el Botón de compra.
    Si su tienda está cerrada para los clientes, el Botón de compra no se mostrará en la página web. Puede comprobar si su tienda está abierta en la página Perfil de tienda en su administrador de Ecwid.
  8. Pegue el código de integración en la página. Dependiendo de su sitio web, puede ser una pestaña HTML o fuente o un botón separado para añadir códigos. Si no está seguro de cómo añadir códigos personalizados a su sitio web, póngase en contacto con el desarrollador de su sitio web para obtener instrucciones más detalladas.
  9. Guarde los cambios.

¡Eso es todo! Ahora tiene una tarjeta de producto incrustada en su página web.

Cuando los clientes hagan clic en el botón Compre ahora/Añadir al Carro, el producto se añadirá al carrito y podrán proceder a la compra:

Buy_Button__1_.gif

Si desea que la ventana de pago se abra inmediatamente cuando un cliente haga clic en el botón, puede ir a Configuración → General → Cesta de Compra Configuración de casilla y cambiar el interruptor junto a "Abrir la cesta de compra cuando se pulse el botón «Añadir a la cesta»".

Para los usuarios de WordPress: puede añadir un solo producto a una página usando la herramienta de plugin Ecwid.
Para los usuarios de Wix: no recomendamos usar Botones de compra debido a la estructura iFrame de los sitios de Wix que interfieren con el funcionamiento del botón.

Personalizar un Botón de compra

Después de crear el Botón de compra, puede personalizar su apariencia y estilo para adaptarse a sus necesidades y a la marca de su empresa:

  • Cambie los textos en los botones Compre ahora o Añada a la etiqueta usando el Editor de etiquetas de la tienda. Por ejemplo, si sus clientes no compran el producto inmediatamente (por ejemplo, hacen una reserva o solicitan un presupuesto).
  • Oculte el menú del pie de página o la ruta de navegación en Diseño Navegación y colores del escaparate. Puede ser útil si va a añadir diferentes tarjetas de producto a diferentes sitios web y no quiere que los clientes naveguen por su tienda.
    Los cambios realizados en la página Diseño afectan a todos los productos de su tienda.
  • Cambie la apariencia de la tarjeta del producto y los botones para que coincida con el tema de su sitio web con la ayuda de códigos CSS. Puede utilizar los códigos de Ecwid CSS Cookbook o configurar el código usted mismo.
¿Fue útil este artículo?

¡Increíble! ¡Gracias por sus comentarios!

¡Gracias por sus comentarios!

¡Lo sentimos! ¿Qué ha ocurrido?
Usuarios a los que les pareció útil: 130 de 252
10
Usamos cookies y tecnologías similares para recordar sus preferencias, medir la efectividad de nuestras campañas y analizar datos despersonalizados con el fin de mejorar el rendimiento del sitio. Al elegir «Aceptar», da su consentimiento para el uso de cookies.
Aceptar cookies Rechazar