You can integrate WeTravel bookings into your Shopify website in multiple ways, depending on how your store is built and the level of control you have over the theme code. Shopify allows custom HTML and Liquid modifications, making it flexible for both non-technical users and developers.
This guide covers simple button links, embedded checkout using theme code, and advanced Liquid-based integrations.
These steps apply to all WeTravel booking widgets.
💡Important: WeTravel widgets rely on JavaScript. Most Shopify plans support this feature, but some themes may restrict scripts in specific sections.
Before You Begin
Depending on the integration method, you may use either the embed code or a direct booking link.
Get Your WeTravel Embed Code or Booking Link
Log in to your WeTravel account
Open the trip you want to embed
Go to Promote → Embed to copy the embed code
Or go to Promote → Direct Link to copy the booking URL
Option 1: Add a Simple “Book Now” Button Linking to WeTravel
This is the easiest and safest option.
Go to Shopify Admin → Online Store → Pages or Products
Edit the page
Add a Button block or section
Set the button link to your WeTravel Trip Booking URL
Save and publish
Note: This redirects customers to WeTravel instead of embedding checkout on your site.
Option 2: Embed WeTravel Checkout Using Custom HTML (Non-Developer)
Some Shopify themes allow custom HTML blocks.
Go to Online Store → Themes
Click Customize
Add a Custom Liquid or Custom HTML block (name varies by theme)
Paste your WeTravel embed code
Save and preview
Necessary: If the widget does not load, your theme may restrict JavaScript in this block. Use Option 3 instead.
Option 3: Modify Theme Liquid Files (Recommended for Full Embed)
This option gives the most control and is recommended for developers.
Step 1: Open Theme Code
Go to Shopify Admin → Online Store → Themes
Click the three dots → Edit code
Step 2: Choose Where to Insert the Widget
Common files include:
product.liquid
page.liquid
main-product.liquid (Online Store 2.0 themes)
custom template files
Choose the file that controls the page where the booking should appear.
Step 3: Paste the WeTravel Embed Code
Paste the embed code exactly where you want the button or widget to appear.
Example (inside Liquid template):
<button class="wtrvl-checkout_button" data-uuid="YOUR_TRIP_UUID" data-env="https://YOURSUBDOMAIN.wetravel.to">Book Now</button>
Save the file and preview the page.
Option 4: Conditional Display Using Liquid Logic
You can conditionally show the WeTravel widget using Shopify’s Liquid logic.
Example use cases:
Show WeTravel only on specific products
Hide the widget if no booking is available
Replace Shopify “Add to Cart” with WeTravel checkout
Example:
{% if product.tags contains 'wetravel' %}
<!-- WeTravel Embed Code Here -->
{% else %}
<!-- Default Add to Cart -->
{% endif %}
This allows a clean fallback without breaking the layout.
Option 5: Replace Shopify “Add to Cart” Flow
If the product represents a trip (not a physical product):
Remove or hide the Add to Cart button
Insert the WeTravel embed or booking button in its place.
Optionally disable inventory tracking
This ensures customers always book through WeTravel.
Advanced Option: Using Metafields for Dynamic Trips
If you sell multiple trips:
Create a Product Metafield for “WeTravel Booking URL” or “Trip UUID.”
Populate it per product
Reference the metafield in your Liquid template
Example:
{{ product.metafields.custom.wetravel_url }}
This allows a single template to handle multiple trips dynamically.
Preview and Test Your Store
After setup:
Preview the page in Shopify
Test the booking flow on both desktop and mobile devices
Click 'Book Now' to ensure that checkout opens correctly
Test in an incognito window
Confirm apps or CSP settings do not block scripts
Troubleshooting
If the widget does not load:
Confirm JavaScript is allowed in your theme.
Make sure Liquid does not escape the embed code.
Check for conflicts with apps that modify checkout or scripts.
Try placing the embed near the bottom of the template.
Clear the theme cache and refresh.
Need Help Choosing the Right Shopify Setup?
Shopify themes and setups vary widely.
If you’re unsure:
Which template to edit
Whether to use HTML blocks or Liquid
How to replace Add to Cart safely
How to use metafields or tags
We’ll help you choose the best solution. Email info@wetravel.com with:
A link to your Shopify store
The theme name
A short explanation of how you want bookings to work
Our in-house team will assist you with the next steps!