================================================================================
  HOTELBOOK — Shopify Integration Guide
  Version: 1.0.0
  Author:  Pinky Creative Studio (pinkycreativestudio.com)
  Support: hello@hotelbook.io
================================================================================

TABLE OF CONTENTS
─────────────────
1. Overview
2. Method A — Shopify App (recommended)
3. Method B — Theme Liquid snippet (manual)
4. Method C — App Embed (Theme Editor)
5. Method D — Section in theme
6. Configuration options
7. Shopify Markets & multilingual setup
8. Troubleshooting
9. FAQ

================================================================================
1. OVERVIEW
================================================================================

HotelBook integrates with Shopify to add a fully-functional hotel booking widget
to your Shopify store. Ideal for:
  - Boutique hotels with a Shopify online store (selling merchandise + bookings)
  - B&Bs and guesthouses using Shopify as their website
  - Hotel chains managing multiple storefronts

Requirements:
  - Shopify Basic plan or higher
  - Online Store 2.0 theme (Dawn, Craft, Sense, Debut, etc.)
    OR Legacy theme with manual liquid snippet
  - Active HotelBook account (hotelbook.io)
  - HTTPS (all Shopify stores are HTTPS by default ✓)

Your Hotel ID and API key:
  HotelBook Dashboard → Settings → API & Integrations

================================================================================
2. METHOD A — SHOPIFY APP (RECOMMENDED)
================================================================================

The HotelBook Shopify App installs in one click and adds the widget with
zero code required.

Installation:
─────────────
  1. Go to: apps.shopify.com → search "HotelBook Direct Booking"
  2. Click "Add app"
  3. Review permissions → click "Install app"
  4. You'll be redirected to HotelBook setup:
     a. Log in or create your HotelBook account
     b. Connect your Shopify store
     c. Enter your Hotel ID
     d. Configure: theme, language, currency, rooms

Placing the widget:
────────────────────
  After installation, the widget can be placed via:
    - Theme Editor (recommended): Online Store → Themes → Customize
      → Add section → HotelBook Booking Widget
    - App block: Available in any section that supports app blocks

The app uses Shopify's App Bridge and creates no changes to theme files.
Uninstalling the app cleanly removes all widget instances.

================================================================================
3. METHOD B — THEME LIQUID SNIPPET (MANUAL)
================================================================================

For developers or users who prefer direct theme control.

Step 1: Create the snippet file
────────────────────────────────
  In Shopify Admin: Online Store → Themes → (your theme) → Actions → Edit code

  a. Under "Snippets" → click "Add a new snippet"
  b. Name it: hotelbook-widget
  c. Paste the following code:

────────────────────────── hotelbook-widget.liquid ─────────────────────────────

{% comment %}
  HotelBook Booking Widget Snippet
  Include with: {% render 'hotelbook-widget' %}
  or with options: {% render 'hotelbook-widget', theme: 'dark', lang: 'nl' %}
{% endcomment %}

{% assign hb_hotel_id = hotel_id | default: 'YOUR_HOTEL_ID' %}
{% assign hb_theme = theme | default: 'auto' %}
{% assign hb_lang = lang | default: 'auto' %}
{% assign hb_currency = currency | default: 'EUR' %}
{% assign hb_position = position | default: 'inline' %}

<div class="hotelbook-widget-wrapper"
     style="width:100%;max-width:100%;margin:0 auto;">

  <div id="hotelbook-widget"
       data-hotel-id="{{ hb_hotel_id | escape }}"
       data-theme="{{ hb_theme | escape }}"
       data-lang="{{ hb_lang | escape }}"
       data-currency="{{ hb_currency | escape }}"
       data-position="{{ hb_position | escape }}"
       data-shopify="true"
       data-shopify-shop="{{ shop.permanent_domain | escape }}">
  </div>

  <script>
    (function() {
      // Load HotelBook widget asynchronously
      var script = document.createElement('script');
      script.src = 'https://cdn.hotelbook.io/widget.js';
      script.async = true;
      script.defer = true;
      document.head.appendChild(script);
    })();
  </script>
</div>

{% comment %} Optional: Add widget CSS overrides to match your Shopify theme {% endcomment %}
<style>
  .hotelbook-widget-wrapper {
    font-family: inherit;
  }
  /* Override primary color to match your theme */
  /* --hb-primary: #1A8FE3; */
</style>

────────────────────────────── END SNIPPET ─────────────────────────────────────

  d. Click "Save"

Step 2: Include the snippet in a template
──────────────────────────────────────────
  Add this line wherever you want the widget to appear:

    {% render 'hotelbook-widget' %}

  With custom options:
    {% render 'hotelbook-widget', theme: 'dark', lang: 'nl', currency: 'EUR' %}

Common template files to add it to:

  A) Custom page template (recommended):
     - Create a new template: Templates → Add template → page
     - Name it: page.booking
     - Add: {% render 'hotelbook-widget' %}
     - In Shopify Pages: create a page "Book a Room", assign template "booking"

  B) index.json (homepage):
     Add as a section (requires section file — see Method D)

  C) Existing page template:
     Open templates/page.liquid (or page.json) and add:
     {% render 'hotelbook-widget' %}

================================================================================
4. METHOD C — APP EMBED (THEME EDITOR)
================================================================================

Online Store 2.0 themes support App Embeds — the cleanest way to add scripts.

  1. Go to: Online Store → Themes → Customize
  2. Click the puzzle piece icon (🧩 App embeds) in the left panel
  3. Find "HotelBook" in the list
  4. Toggle it ON
  5. Configure:
     - Hotel ID
     - Theme (light/dark/auto)
     - Language
     - Floating button (optional — shows a "Book Now" button on all pages)
  6. Save

App Embed adds the widget script globally. Then use the section or block
to place the widget where you want it on specific pages.

================================================================================
5. METHOD D — SECTION IN THEME (ONLINE STORE 2.0)
================================================================================

For Online Store 2.0 themes, create a reusable section:

Step 1: Create section file
────────────────────────────
  Online Store → Themes → Edit code → Sections → Add new section
  Name: hotelbook-section

Paste the following:

────────────────────────── hotelbook-section.liquid ────────────────────────────

{% schema %}
{
  "name": "HotelBook Booking",
  "tag": "section",
  "class": "hotelbook-section",
  "settings": [
    {
      "type": "text",
      "id": "hotel_id",
      "label": "Hotel ID",
      "info": "Found in HotelBook Dashboard → Settings → API & Integrations",
      "placeholder": "YOUR_HOTEL_ID"
    },
    {
      "type": "select",
      "id": "theme",
      "label": "Widget Theme",
      "options": [
        { "value": "auto",  "label": "Auto (system preference)" },
        { "value": "light", "label": "Light" },
        { "value": "dark",  "label": "Dark" }
      ],
      "default": "auto"
    },
    {
      "type": "select",
      "id": "lang",
      "label": "Language",
      "options": [
        { "value": "auto", "label": "Auto-detect" },
        { "value": "en",   "label": "English" },
        { "value": "nl",   "label": "Nederlands" },
        { "value": "de",   "label": "Deutsch" },
        { "value": "fr",   "label": "Français" },
        { "value": "pl",   "label": "Polski" },
        { "value": "es",   "label": "Español" }
      ],
      "default": "auto"
    },
    {
      "type": "select",
      "id": "currency",
      "label": "Currency",
      "options": [
        { "value": "EUR", "label": "EUR (€)" },
        { "value": "GBP", "label": "GBP (£)" },
        { "value": "USD", "label": "USD ($)" },
        { "value": "PLN", "label": "PLN (zł)" }
      ],
      "default": "EUR"
    },
    {
      "type": "range",
      "id": "max_width",
      "label": "Maximum Width (px)",
      "min": 360,
      "max": 1200,
      "step": 20,
      "default": 600
    },
    {
      "type": "select",
      "id": "alignment",
      "label": "Widget Alignment",
      "options": [
        { "value": "left",   "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right",  "label": "Right" }
      ],
      "default": "center"
    }
  ],
  "presets": [
    {
      "name": "HotelBook Booking Widget",
      "category": "Bookings"
    }
  ]
}
{% endschema %}

<div class="hotelbook-section-wrapper"
     style="display:flex;justify-content:{{ section.settings.alignment }};
            padding:40px 20px;width:100%;">

  <div data-hotel-id="{{ section.settings.hotel_id | escape }}"
       data-theme="{{ section.settings.theme }}"
       data-lang="{{ section.settings.lang }}"
       data-currency="{{ section.settings.currency }}"
       data-hotelbook-widget="true"
       style="width:100%;max-width:{{ section.settings.max_width }}px;">
  </div>

</div>

<script>
  if (!window.__hotelBookLoaded) {
    window.__hotelBookLoaded = true;
    var s = document.createElement('script');
    s.src = 'https://cdn.hotelbook.io/widget.js';
    s.async = true;
    document.head.appendChild(s);
  }
</script>

────────────────────────────── END SECTION ─────────────────────────────────────

Step 2: Add section to a page
──────────────────────────────
  In Theme Customizer (Themes → Customize):
  - Navigate to the page where you want the widget
  - Click "Add section"
  - Select "HotelBook Booking"
  - Configure settings in the right panel
  - Save

================================================================================
6. CONFIGURATION OPTIONS
================================================================================

All widget options can be set via data attributes:

┌──────────────────────┬────────────────────────────────────┬─────────────────┐
│ Option               │ Values                             │ Default         │
├──────────────────────┼────────────────────────────────────┼─────────────────┤
│ data-hotel-id        │ Your Hotel ID (string)             │ Required        │
│ data-theme           │ light / dark / auto                │ auto            │
│ data-lang            │ auto/en/nl/de/fr/pl/es/it/de       │ auto            │
│ data-currency        │ EUR / GBP / USD / PLN              │ EUR             │
│ data-position        │ inline / floating / modal          │ inline          │
│ data-primary-color   │ Hex color (e.g. #1A8FE3)           │ #1A8FE3         │
│ data-shopify         │ true / false                       │ false           │
│ data-show-photos     │ true / false                       │ true            │
│ data-show-reviews    │ true / false                       │ true            │
│ data-min-nights      │ Integer                            │ 1               │
│ data-max-nights      │ Integer                            │ 365             │
│ data-cancellation    │ flexible / moderate / strict       │ flexible        │
│ data-success-page    │ URL path (e.g. /pages/thank-you)  │ Widget built-in │
└──────────────────────┴────────────────────────────────────┴─────────────────┘

Shopify-specific options:
  data-shopify="true"                    — enables Shopify integration mode
  data-shopify-shop="yourstore.myshopify.com"  — your Shopify domain

================================================================================
7. SHOPIFY MARKETS & MULTILINGUAL SETUP
================================================================================

If you use Shopify Markets or a translation app (Weglot, Langify, etc.):

Automatic language detection:
  Set data-lang="auto" — the widget reads the user's browser language.

Manual per-market language:
  In your liquid snippet, pass the Shopify locale:

  {% render 'hotelbook-widget', lang: request.locale.iso_code %}

  This maps Shopify's locale (e.g. "nl", "de", "fr") to HotelBook's language.

Currency per market:
  {% assign hb_currency = cart.currency.iso_code %}
  {% render 'hotelbook-widget', currency: hb_currency %}

  Supported currencies: EUR, GBP, USD, CHF, SEK, DKK, NOK, PLN, CZK, HUF

================================================================================
8. TROUBLESHOOTING
================================================================================

ISSUE: Widget not showing
──────────────────────────
  ✓ Check your Hotel ID in HotelBook Dashboard → Settings
  ✓ Make sure the snippet is included in the correct template
  ✓ Check browser console (F12 → Console) for JavaScript errors
  ✓ Verify the CDN script URL loads: https://cdn.hotelbook.io/widget.js
  ✓ Check for Content Security Policy (CSP) restrictions in theme settings
  ✓ Disable Shopify apps one by one to find conflicts

ISSUE: Widget loads but no rooms shown
────────────────────────────────────────
  ✓ Add rooms in HotelBook Dashboard → Rooms
  ✓ Set room status to "Active"
  ✓ Check that prices are configured

ISSUE: Payment fails
──────────────────────
  ✓ Verify Stripe/Mollie/PayPal keys in HotelBook Dashboard → Payments
  ✓ Check Shopify Payments is not interfering (use separate account)
  ✓ Test with Stripe test mode card: 4242 4242 4242 4242, exp: 12/26, CVC: 123

ISSUE: Widget style conflicts with theme
─────────────────────────────────────────
  ✓ The widget uses Shadow DOM — most CSS conflicts are prevented
  ✓ If needed, add this to your theme.css:
      .hotelbook-widget-wrapper { all: initial !important; }

ISSUE: "Content-Security-Policy" error in console
────────────────────────────────────────────────────
  ✓ Add to your CSP header (in Shopify Theme → theme.liquid <head>):
      <meta http-equiv="Content-Security-Policy"
            content="script-src 'self' cdn.hotelbook.io *.stripe.com;">

================================================================================
9. FREQUENTLY ASKED QUESTIONS
================================================================================

Q: Can I use HotelBook with Shopify's native checkout?
A: HotelBook uses its own checkout flow (optimized for hotel bookings).
   Optionally, it can create Shopify orders in the background for reporting
   (Enterprise plan feature).

Q: Does it work with Shopify POS?
A: Not directly — HotelBook is for online bookings. However, booking data
   can be exported to your POS system via the API.

Q: Which Shopify themes are supported?
A: Any Online Store 2.0 theme (Dawn, Craft, Sense, etc.) fully supports
   sections and app blocks. Legacy themes use the snippet method.

Q: Can I use my own payment processor?
A: Yes. HotelBook connects to Stripe, Mollie, PayPal, and Adyen independently
   of Shopify Payments. You configure payment in HotelBook Dashboard.

Q: Does the widget use Shopify's cart?
A: No. Hotel bookings bypass the Shopify cart for a dedicated booking flow.
   This means no Shopify transaction fees on bookings.

Q: Is it GDPR compliant?
A: Yes. All guest data is stored in EU (Amsterdam). No tracking cookies.
   A Data Processing Agreement is available in HotelBook Dashboard → Legal.

Q: Can I add a "Book Now" button to product pages?
A: Yes. Use the floating button option (data-position="floating") or create
   a custom button that opens the widget in a modal (data-position="modal").

================================================================================
  QUICK SETUP SUMMARY
================================================================================

  1. Create account at hotelbook.io
  2. Get your Hotel ID from Dashboard → Settings
  3. Add rooms and pricing in Dashboard → Rooms
  4. Connect payment (Stripe / PayPal / Mollie) in Dashboard → Payments
  5. Add widget to Shopify (choose Method A, B, C, or D above)
  6. Test booking with a future date
  7. You're live! 🎉

================================================================================
  SUPPORT
================================================================================

Email:       hello@hotelbook.io
Help Center: docs.hotelbook.io/shopify
Status page: status.hotelbook.io
Live chat:   Available in HotelBook Dashboard (Pro & Enterprise plans)

================================================================================
  Pinky Creative Studio — pinkycreativestudio.com
  Template: HotelBook SaaS v1.0 — PREMIUM SAAS TEMPLATE
================================================================================