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

Una vez que hayas agregado 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. Esto genera un snippet de código de inserción para que lo insertes en el código fuente HTML de tu página web o una URL para que lo agregues a tu campaña por correo electrónico. Después de insertarlo, el código muestra un Botón de compra.

Resumen de Botones de compra

Hay varias maneras en que puedes usar los Botones de compra. Para comenzar, elige una opción de la página Botón de compra en tu panel de control de Shopify:

  • Cuando eliges Seleccionar producto , puedes crear un Botón de compra para mostrar un solo producto:

    Ejemplo de Botón de compra

    Cuando los clientes hacen clic en el Botón de compra, se redirigen a la pantalla de pagos, se les muestra un carrito de compras o un cuadro de diálogo de un producto, dependiendo de cómo personalices el Botón de compra en tu panel de control de Shopify. Puedes insertar una imagen de producto con un Botón de compra o insertar solo el botón.

  • Cuando eliges Seleccionar una colección , puedes crear un Botón de compra para mostrar todos los productos en una de las colecciones de tu tienda. Tu cliente puede hacer clic en los productos para ver sus detalles y un botón de Agregar al carrito :

    Ejemplo de colección insertada

  • Cuando Insertas un producto en un correo electrónico , puedes crear un Botón de compra para incluirlo en un mensaje o campaña por correo electrónico. Cuando un cliente hace clic en el Botón de compra en un correo electrónico, aparece la pantalla de pagos para el producto.

Crear un Botón de compra

Para crear un Botón de compra

  1. Haz clic en Seleccionar producto.

  2. Desde el cuadro de diálogo Seleccionar un producto , selecciona un producto de tu catálogo o usa la búsqueda para encontrar un producto específico. Haz clic en Seleccionar producto en la parte inferior del cuadro de diálogo.

  3. En la página Crear , puedes elegir una plantilla y personalizar el color, texto y la apariencia del botón:

    Creación de Botón de compra

  4. En el área Plantilla , usa los botones para elegir el diseño de tu Botón de compra:

Icono de una camiseta con un botón debajo Imagen del producto, precio y botón Selecciona esta plantilla para mostrar una imagen y el precio del producto junto al Botón de compra.
Ícono de un cursor haciendo clic en un botón redondeado Solo Botón de compra Selecciona esta plantilla para agregar un Botón de compra sin ninguna imagen del producto. Quizá quieras hacer esto si ya exhibes tus productos en otro lugar en internet, pero quieres agregar un enlace de pago.
Ícono de una camiseta con texto y un botón al lado derecho Imagen del producto, precio, descripción y botón Selecciona esta plantilla para mostrar una imagen, precio y descripción del producto junto al Botón de compra.
  1. En la lista Acción al hacer clic , selecciona lo que quieres que suceda cuando un cliente haga clic en el Botón de compra:

- Agregar al carrito agrega el producto al carrito insertado, que tus clientes pueden abrir haciendo clic en la pestaña del carrito en el lado izquierdo de la página. - Pago directo lleva al cliente a una pantalla de pagos, donde puede comprar el producto. Si un cliente elige esta opción, no podrá agregar más productos a su pedido. - Mostrar detalles del producto muestra un cuadro de diálogo con una descripción del producto y un botón de Agregar al carrito. Si un producto tiene varias imágenes, también se mostrarán.

  1. Después de elegir una plantilla, puedes personalizar su apariencia:

- El estilo y texto del botón incluye opciones de estilo y color para el Botón de compra. - Tipografía 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. > Nota:> Puedes personalizar estos ajustes más adelante editando el código de inserción.

  1. Cuando hayas terminado, haz clic en Generar código.

  2. En el cuadro de diálogo Insertar código , copia el código de inserción o haz clic en Copiar código de inserción en el portapapeles :

    Código de inserción de Botón de compra

  3. Abre el código fuente HTML de la página web donde deseas mostrar el Botón de compra. Leer más >.

  4. Pega el código de inserción dentro del HTML donde deseas que aparezca el botón, y guarda los cambios.

Crear una colección insertada

Para crear una colección incrustada:

  1. Haz clic en Seleccionar colección.

  2. En el cuadro de diálogo Seleccionar una colección , selecciona la colección que deseas mostrar:

    Cuando hayas terminado, haz clic en Seleccionar colección en la parte inferior del cuadro de diálogo.

  3. En la página Crear , puedes elegir una plantilla y personalizar el color, texto y la apariencia del botón:

  4. En la lista Acción al hacer clic , selecciona lo que quieres que suceda cuando un cliente haga clic en los Botones de compra:

- Agregar al carrito agrega el producto al carrito insertado, que tus clientes pueden abrir haciendo clic en la pestaña del carrito en el lado izquierdo de la página. - Pago directo lleva al cliente a una pantalla de pagos, donde puede comprar el producto. Si un cliente elige esta opción, no podrá agregar más productos a su pedido. - Mostrar detalles del producto muestra un cuadro de diálogo con una descripción del producto y un botón de Agregar al carrito. Si un producto tiene varias imágenes, también se mostrarán.

  1. Después de elegir una plantilla, puedes personalizar su apariencia:

- El estilo y texto del botón incluye opciones de estilo y color para el Botón de compra. - Tipografía 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.

  1. Cuando hayas terminado, haz clic en Generar código.

  2. En el cuadro de diálogo Insertar código , copia el código de inserción o haz clic en Copiar código de inserción en el portapapeles :

  3. Abre el código fuente HTML del sitio web en el que deseas insertar la colección. Leer más información.

  4. Pega el código de inserción dentro del HTML, donde deseas que aparezca la colección.

  5. Guarda tus cambios en el código fuente HTML.

Crear un Botón de compra para correo electrónico

Para crear un Botón de compra para tu campaña de correo electrónico:

  1. En la sección Incrustar un producto en el correo electrónico , haz clic en Seleccionar producto.

  2. En el cuadro de diálogo Seleccionar un producto , haz clic en el producto que deseas incluir en tu campaña de correo electrónico y luego haz clic en Seleccionar producto :

  3. Si tu producto tiene más de una variante, elige la variante que deseas vender con el Botón de compra. Cada Botón de compra de correo electrónico puede mostrar una sola variante de producto.

  4. Desde la página Insertar enlace de correo electrónico , haz clic en Copiar enlace para copiar el enlace a tu Botón de compra:

  5. Si quieres ver cómo lo verán tus clientes, haz clic en Comprar ahora en la vista previa:

  6. Pega el enlace en tu campaña de correo electrónico. Por ejemplo, puedes agregar Botones de compra de correo electrónico a tu campaña de correo electrónico en MailChimp.

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

Pruébala gratis