Puedes integrar las reservas de WeTravel en tu sitio web de Shopify de varias formas, dependiendo de cómo esté construida tu tienda y del nivel de control que tengas sobre el código del tema. Shopify permite modificaciones en HTML personalizado y Liquid, lo que lo hace flexible tanto para usuarios sin conocimientos técnicos como para desarrolladores.
Esta guía cubre desde enlaces de botones simples y procesos de pago (checkout) incrustados mediante el código del tema hasta integraciones avanzadas basadas en Liquid.
Estos pasos se aplican a todos los widgets de reserva de WeTravel.
💡 Importante: Los widgets de WeTravel dependen de JavaScript. La mayoría de los planes de Shopify son compatibles con esta función, pero algunos temas pueden restringir los scripts en secciones específicas.
Antes de empezar
Dependiendo del método de integración, puedes utilizar el código de inserción (embed code) o un enlace directo de la reserva.
Obtén tu código de inserción o enlace de reserva de WeTravel
Inicia sesión en tu cuenta de WeTravel.
Abre el viaje que quieras insertar.
Ve a Promote (Promocionar) → Embed (Insertar) para copiar el código de inserción.
O ve a Promote (Promocionar) → Direct Link (Enlace directo) para copiar la URL de reserva.
Opción 1: Añadir un botón simple de “Reservar ahora” vinculado a WeTravel
Esta es la opción más fácil y segura.
Ve al Panel de administración de Shopify → Tienda online → Páginas o Productos.
Edita la página.
Añade un bloque o una sección de Botón.
Configura el enlace del botón con la URL de la reserva de tu viaje en WeTravel.
Guarda y publica los cambios.
Nota: Esto redirigirá a los clientes a WeTravel en lugar de integrar el proceso de pago (checkout) en tu sitio web.
Opción 2: Insertar el proceso de pago de WeTravel mediante HTML personalizado (sin conocimientos de programación)
Algunos temas de Shopify permiten bloques de HTML personalizados.
Ve a Tienda online → Temas.
Haz clic en Personalizar.
Añade un bloque de Liquid personalizado o de HTML personalizado (el nombre varía según el tema).
Pega tu código de inserción de WeTravel.
Guarda y previsualiza los cambios.
Necesario: Si el widget no se carga, es posible que tu tema restrinja JavaScript en este bloque. En ese caso, utiliza la Opción 3.
Opción 3: Modificar los archivos Liquid del tema (Recomendado para una integración completa)
Esta opción ofrece el mayor control y es la recomendada para desarrolladores.
Paso 1: Abrir el código del tema
Ve al Panel de administración de Shopify → Tienda online → Temas.
Haz clic en los tres puntos → Editar código.
Paso 2: Elegir dónde insertar el widget
Los archivos comunes incluyen:
product.liquid
page.liquid
main-product.liquid (Temas de la Tienda online 2.0)
Archivos de plantillas personalizadas
Elige el archivo que controla la página donde debe aparecer la reserva.
Paso 3: Pegar el código de inserción de WeTravel
Pega el código de inserción exactamente donde quieras que aparezca el botón o el widget.
Ejemplo (dentro de la plantilla Liquid):
<button class="wtrvl-checkout_button" data-uuid="YOUR_TRIP_UUID" data-env="https://YOURSUBDOMAIN.wetravel.to">Book Now</button>
Guarda el archivo y previsualiza la página.
Opción 4: Visualización condicional mediante la lógica de Liquid
Puedes mostrar el widget de WeTravel de forma condicional utilizando la lógica de Liquid de Shopify.
Ejemplos de casos de uso:
Mostrar WeTravel solo en productos específicos.
Ocultar el widget si no hay reservas disponibles.
Sustituir el botón de "Añadir al carrito" de Shopify por el proceso de pago de WeTravel.
Ejemplo:
{% if product.tags contains 'wetravel' %}
<!-- WeTravel Embed Code Here -->
{% else %}
<!-- Default Add to Cart -->
{% endif %}
Esto permite una transición limpia (fallback) sin estropear el diseño de la página.
Opción 5: Sustituir el flujo de "Añadir al carrito" de Shopify
Si el producto representa un viaje (y no un producto físico):
Elimina o oculta el botón de "Añadir al carrito".
Inserta el código de inserción o el botón de reserva de WeTravel en su lugar.
Opcionalmente, desactiva el seguimiento de inventario en Shopify.
Esto garantiza que los clientes siempre realicen la reserva a través de WeTravel.
Opción avanzada: Uso de Metacampos (Metafields) para viajes dinámicos
Si vendes varios viajes:
Crea un Metacampo de producto para la "URL de reserva de WeTravel" o el "UUID del viaje".
Rellénalo en cada producto correspondiente.
Haz referencia al metacampo en tu plantilla de Liquid.
Ejemplo:
{{ product.metafields.custom.wetravel_url }}
Esto permite que una sola plantilla gestione múltiples viajes de forma dinámica.
Previsualiza y prueba tu tienda
Después de la configuración:
Previsualiza la página en Shopify.
Prueba el flujo de reserva tanto en computadoras como en dispositivos móviles.
Haz clic en "Reservar ahora" para asegurarte de que el proceso de pago se abra correctamente.
Haz la prueba en una ventana de incógnito.
Confirma que las aplicaciones o los ajustes de la política de seguridad de contenido (CSP) no estén bloqueando los scripts.
Solución de problemas
Si el widget no se carga:
Confirma que JavaScript esté permitido en tu tema.
Asegúrate de que Liquid no esté "escapando" (modificando) el código de inserción.
Comprueba si hay conflictos con aplicaciones que modifiquen el proceso de pago o los scripts.
Prueba a colocar el código de inserción cerca de la parte inferior de la plantilla.
Limpia la caché del tema y actualiza la página.
¿Necesitas ayuda para elegir la configuración adecuada de Shopify?
Los temas y las configuraciones de Shopify varían mucho.
Si no estás seguro de:
Qué plantilla editar.
Si debes usar bloques de HTML o Liquid.
Cómo sustituir el botón de "Añadir al carrito" de forma segura.
Cómo usar metacampos o etiquetas.
Te ayudaremos a elegir la mejor solución. Envía un correo a info@wetravel.com con:
Un enlace a tu tienda de Shopify.
El nombre del tema que utilizas.
Una breve explicación de cómo quieres que funcionen las reservas.
¡Nuestro equipo interno te ayudará con los siguientes pasos!