Botón de compra de Shopify: cómo añadirlo a cualquier sitio web

Con el botón de compra de Shopify, puedes integrar completamente las herramientas de ecommerce de Shopify en cualquier sitio web.

Shopify no es solo para negocios de ecommerce. Cualquier persona que quiera monetizar sus proyectos puede beneficiarse de vender en línea, ya sean blogueros, artistas, escritores, diseñadores o influencers⁠.

Pero configurar una tienda en línea lleva tiempo, y redirigir el tráfico web puede complicar el proceso de compra, lo que podría afectar negativamente tus ventas. El botón de compra de Shopify es la solución.

Agrega el canal de ventas del botón de compra a tu tienda Shopify

Inicia sesión en tu tienda Shopify. Si ves el botón de compra en tus canales de ventas del menú de la izquierda, significa que el canal de ventas ya se ha agregado y puedes pasar al paso 2.

En el escritorio

1. Ve a la página del canal de ventas del botón de compra en la Shopify App Store (también puedes acceder desde Configuración > Visitar la Shopify App Store y buscando Botón de compra).
2. Haz clic en Agregar aplicación, y luego en Agregar canal de ventas en la siguiente pantalla.

Cuando la página se actualice, deberías poder ver el botón de compra listado bajo Canales de ventas, en el menú de la izquierda. Fija el canal en tu navegador para acceder más fácilmente en el futuro.

Si no fijas el botón de compra, podrás encontrarlo haciendo clic en Canales de ventas y luego en Botón de compra bajo tus canales instalados.

En el móvil

1. Abre la aplicación de Shopify en tu dispositivo móvil y selecciona Tienda en el menú inferior.
2. Junto a Canales de ventas, selecciona Agregar canal (en iPhone) o + (en Android).
3. Selecciona Botón de compra de la lista de opciones, luego toca Agregar botón de compra.

Crea un botón de compra

Cuando hayas agregado el canal de ventas del botón de compra, estás listo para empezar a crear tu botón de compra. Navega hasta tu página de botón de compra, haciendo clic en Botón de compra (si lo fijaste en tu navegador) o yendo a Configuración > Aplicaciones y canales de ventas > Botón de compra.

Desde allí, haz clic en Crear un botón de compra.

Puedes crear botones de compra para un solo producto o para toda una colección. En la siguiente pantalla, se te pedirá que selecciones qué opción prefieres. Haz clic en la opción que quieras y luego busca el producto o colección que quieras usar para crear tu botón de compra.

Comprueba que la casilla esté marcada y haz clic en Seleccionar.

Cuando hayas hecho tu selección, llegarás al editor del botón de compra, donde podrás personalizar la apariencia del botón.

Cómo personalizar el Botón de compra

En el editor del botón de compra, verás varias opciones en el lado izquierdo para personalizar la apariencia y el estilo del botón. A la derecha, verás una vista previa de cómo se verá tu botón de compra.

Ajusta las opciones de la izquierda a tu gusto. La vista previa se actualizará automáticamente con los ajustes, para que puedas ver cómo se verá tu botón de compra mientras lo creas. Podrás ver cómo aparecerá tanto en pantallas de escritorio como móviles haciendo clic en los iconos de escritorio o móvil, de la parte superior del editor.

Aquí tienes las opciones que puedes personalizar:

• Variante del producto: selecciona qué variantes del producto quieres que se puedan comprar a través del botón de compra. Todas las variantes estarán seleccionadas de manera predeterminada.
• Diseño: elige entre Vista básica, Clásica y Completa. A la derecha, verás una vista previa de cada diseño cuando lo selecciones del menú desplegable Diseño.
• Acción al hacer clic: elige entre "Agregar producto al carrito", "Directo a la compra" o "Abrir detalles del producto". La opción "Agregar producto al carrito" creará un widget de carrito al lado derecho de la pantalla. La opción "Directo a la compra" creará un botón de “Comprar ahora” que llevará al usuario directamente a la compra (ten en cuenta que los clientes no podrán agregar más de un artículo a su carrito cuando usen esta opción). La opción "Abrir detalles del producto" creará un botón de “Ver producto” que abrirá una ventana emergente con información del producto y un botón de “Agregar al carrito”.
• Estilo del botón: aquí puedes ajustar los colores, la fuente, el tamaño y la forma de las esquinas del botón de compra.
• Diseño: te permitirá hacer ajustes más finos a la disposición de tu botón. Puedes personalizar los colores de la fuente, el texto del botón y configurar la tipografía.
• Carrito de compras: aquí podrás ajustar la configuración de tu widget de carrito de compras, incluyendo texto y colores. Ten en cuenta que esta opción estará deshabilitada si usas el diseño "Directo a la compra", ya que no se utiliza ningún widget de carrito.
• Ventana emergente detallada: si seleccionas "Abrir detalles del producto" en "Acción al hacer clic", podrás personalizar el texto, los colores y las opciones de tipografía para la ventana emergente que aparecerá en esta sección.
• Configuraciones avanzadas: aquí puedes ajustar cómo se presenta el proceso de compra a los usuarios. Puedes seleccionar "Abrir ventana emergente" (que creará un proceso de compra emergente que cerrará cuando se complete el pedido) o "Redirigir a la misma pestaña" (que enviará a los usuarios a tu página de compra de Shopify desde sus ventanas del navegador, y los devolverá a tu página cuando completen la transacción).

Recuerda que hacer ajustes en estas configuraciones no cambiará los botones de compra que ya hayas incrustado. Por eso, es bueno dedicar un tiempo a ajustar el botón de compra a tu gusto antes de pasar al siguiente paso.

Cuando estés satisfecho con tu diseño, haz clic en el botón Siguiente de la esquina superior derecha.

Agrega el botón de compra a tu sitio web

Cuando hagas clic en Siguiente, se generará automáticamente el código de inserción para tu botón de compra. Haz clic en el botón Copiar código si estás listo para incrustarlo en una página web; o en el botón Seguir personalizando si quieres volver al editor del botón de compra para hacer más ajustes.

El código que has copiado aquí se puede pegar en el HTML de cualquier página web y creará un botón de compra y un carrito que se conectarán directamente a tu administración de Shopify, permitiéndote gestionar y procesar pedidos desde cualquier página web desde tu administración de Shopify.

El proceso de agregar el código de inserción puede ser un poco diferente, dependiendo de cómo quieras que aparezca el botón, del constructor del sitio web que estés utilizando o incluso del tema que estés usando en la plataforma.

Aquí tienes un desglose de algunos de los lugares más comunes para incrustar un botón de compra de Shopify, y los pasos que necesitarás seguir para hacerlo:

Agrega un código de inserción a una página de destino o publicación de blog en tu tienda Shopify

Tu tienda Shopify ya tendrá páginas de productos y un carrito integrados, pero puede haber situaciones en las que quieras agregar un botón de compra directamente en una página o publicación de blog para una mayor comodidad.

Por ejemplo, si estuvieras escribiendo una publicación de blog sobre un producto recién sacado, quizá quieras ofrecer a los lectores una forma fácil de comprarlo directamente desde la publicación, en lugar de redirigirlos a una página aparte.

En casos como estos, deberás seguir estos pasos:

1. Desde tu administración de Shopify, ve a Tienda en línea > Publicaciones de blog o Tienda en línea > Páginas, dependiendo de si lo vas a agregar a una publicación de blog o a una página.
2. Selecciona la publicación de blog o la página a la que quieras agregar el botón de compra.
3. En la ventana de Contenido, selecciona el botón <> para cambiar de la vista de Edición a la vista HTML.

1. Pega el código de inserción que copiaste en el editor HTML, donde quieras que aparezca. Haz clic en Guardar.

Cuando hayas guardado tu página o publicación de blog, el botón de compra se añadirá a la página. Si quieres ver cómo se ve sin publicar, selecciona Vista previa (o Ver página si lo estás agregando a una página) en la esquina superior derecha del editor de la página.

Agrega un botón de compra a un sitio web de Squarespace

En Squarespace, podrás agregar tu botón de compra a publicaciones individuales o a menús de tu página de inicio. Solo tienes que seguir los siguientes pasos:

1. Inicia sesión en tu panel de Squarespace y abre la página donde quieras agregar un botón de compra.
2. Pasa el cursor sobre el área de Contenido de la página del elemento de la página donde quieras que aparezca el botón de compra y haz clic en Editar.
3. Selecciona el punto de inserción donde quieras agregar el código de inserción.
4. Desde el menú de Bloques de contenido, en la sección Más, selecciona Código.
5. Asegúrate de que HTML esté seleccionado en el menú desplegable de la esquina superior derecha, y luego pega el código de inserción del botón de compra en el campo Código.
6. Haz clic en Aplicar.

Ten en cuenta que algunos temas personalizados de Squarespace pueden requerir más conocimientos avanzados de HTML. En casos como estos, es mejor contactar directamente a un desarrollador para conseguir ayuda para agregar código personalizado a tu sitio.

Agrega un botón de compra a un blog de WordPress

Para agregar un botón de compra a una publicación en tu página de WordPress.org:

1. Desde tu panel de WordPress, ve a tus publicaciones y selecciona a la que quieras agregar un botón de compra.
2. Dependiendo de la versión del editor de WordPress que utilices, completa uno de los siguientes pasos:
   1. Si estás usando el Editor clásico para tu página de WordPress, haz clic en la pestaña Texto del editor para cambiar de la vista Visual a la vista Texto.
   2. Si estás usando el Editor de bloques para tu página de WordPress, haz clic en el botón + y busca y selecciona HTML Personalizado.
3. Pega el código de inserción del botón de compra en el espacio donde quieras que aparezca.
4. Haz clic en Guardar borrador, Vista previa o Publicar, dependiendo de la acción que quieras realizar.

También puedes agregar el código de inserción a un menú de WordPress siguiendo los siguientes pasos:

1. Desde tu panel de WordPress, haz clic en Apariencia.
2. Selecciona Personalizar para abrir el editor de temas, luego selecciona Widgets.
3. Selecciona el área donde quieras agregar tu botón de compra.
4. Haz clic en Agregar un widget, y luego en Texto.
5. Pega el código de inserción del botón de compra.
6. Haz clic en Guardar y publicar.

Ten en cuenta que los botones de compra de Shopify son compatibles con la plataforma WordPress.org, pero no con WordPress.com, debido a las limitaciones de personalización de HTML.

Agrega un botón de compra a Wix

Para agregar un botón de compra de Shopify a tu página de Wix, sigue estos pasos:

1. Desde tu panel de Wix, selecciona el sitio de la página Mis sitios al que quieras agregar el botón de compra, y luego selecciona Editar sitio.
2. En el editor de sitios de Wix, haz clic en +, luego en Más. Selecciona Código HTML. Esto agregará un widget de código HTML a tu página.
3. Haz clic en Introducir código. En la ventana emergente de Configuraciones HTML, pega el código de inserción del botón de compra en el campo Agregar código aquí.
4. Haz clic en Aplicar.
5. Ajusta el tamaño del widget de código HTML a tu gusto. Recuerda asegurarte de que la pestaña del carrito sea visible si has incrustado un botón de compra con un carrito.
6. Cuando termines de ajustarlo, haz clic en Guardar.

Vale la pena mencionar que si quieres incrustar botones de compra para varios productos, es mejor incrustar un botón de compra de colección, en lugar de uno para un solo producto. Si incrustas varios botones de un solo producto, los visitantes verán un carrito separado para cada producto.

Agrega etiquetas de script del botón de compra de Shopify

En algunos casos, los creadores de sitios web (como Unbounce) requerirán que pegues las etiquetas <script> por separado en tu encabezado, mientras pegas el resto del código en el cuerpo de tu página, donde quieras que aparezca el botón de compra.

Para hacerlo, deberás separar el elemento <script> del elemento <div> en tu código de inserción del botón de compra. Verás el elemento <div> en la parte superior del código, algo así:

<div></div>

El elemento de script (que es mucho más largo) constituye el resto del código de inserción, empieza con <script type="text/javascript"> y termina con </script>.

Cuando hayas separado estos elementos, aquí están los pasos a seguir:

1. Abre el encabezado de la página para el sitio web donde quieras incrustar tu botón de compra.
2. Copia y pega el elemento <script> completo, en el encabezado de tu página web.
3. Guarda los cambios.
4. Ahora, abre el editor de la página donde quieres agregar tu botón de compra de Shopify.
5. Copia y pega el elemento <div> en la página, donde quieras que aparezca tu Botón de Compra.
6. Guarda los cambios.

Integra tu ecommerce en cualquier página web con un botón de compra de Shopify

Los botones de compra de Shopify ayudan a los vendedores a encontrarse con los clientes donde están, sin importar la página o la plataforma. La comodidad de vender directamente sin tener que enviar a los clientes a otra página reduce la fricción y puede ayudar a aumentar las ventas.

Para los propietarios de tiendas, ubicar un botón de compra estratégicamente en una página de blog puede ofrecer a los clientes una forma fácil de comprar productos sin salir de la página en la que se encuentran.

Para blogueros, artistas, escritores, diseñadores, influencers y cualquier otra persona que quiera monetizar su trabajo, los botones de compra de Shopify ofrecen una forma sencilla de aprovechar la plataforma de ecommerce de Shopify sin tener que crear un sitio web completamente nuevo.

Preguntas frecuentes sobre el botón de compra de Shopify

¿Cómo agrego un botón de compra en Shopify?

Agrega el canal de ventas del botón de compra a tu tienda Shopify.

Haz clic en Botón de compra > Crear un botón de compra. Selecciona un botón de compra de producto o uno de colección y luego el producto o colección que quieras usar.

Personaliza los colores, tamaños, texto y funcionalidades de tu botón de compra a tu gusto y haz clic en Siguiente.

Haz clic en Copiar código.

Pega el código de inserción en la página web donde quieras que aparezca tu botón de compra.

¿Qué hace el botón de compra de Shopify?

Los botones de compra de Shopify permiten a los visitantes de tu página comprar productos de tu tienda Shopify sin tener que visitarla directamente. Se pueden agregar a cualquier página web o blog que no sea de Shopify mediante HTML personalizable, integrando las herramientas de ecommerce de Shopify en tu página web que no es de Shopify.

¿Es seguro el botón de compra de Shopify?

Sí, son una forma segura de vender productos y servicios, ya que se redirige a los visitantes a tu proceso de compra de Shopify, completamente seguro y conforme a PCI para procesar su transacción. La conformidad de Shopify cubre las seis categorías estándar de PCI y se aplica a cada proceso de compra que utiliza nuestra plataforma.

¿Qué beneficios ofrece el botón de compra?

El botón de compra te permite vender en cualquier página web o publicación de blog utilizando el proceso de compra seguro y las herramientas de gestión de ecommerce de Shopify, sin tener que configurar una tienda Shopify. Crean una experiencia de compra sin fricciones que puede ayudar a conseguir más ventas en páginas de alto tráfico.

¿Cuál es la diferencia entre un botón de compra y un botón de pedido de Shopify?

Ambos realizan funciones similares, pero los botones de compra de Shopify se pueden incrustar en cualquier página o publicación de blog, incluso en plataformas de creación de sitios de terceros como WordPress y Squarespace. Difiere de los botones de Agregar al carrito de tus páginas de productos, que están integrados directamente en tu tema de Shopify y no se pueden incrustar en otros lugares.