Add Custom CSS and Scripts

The Advanced tab lets you add custom CSS for pixel-perfect styling, JavaScript for enhanced functionality, and purchase-complete scripts for conversion tracking. Use these fields when the built-in theme options are not enough.

Before you begin

• You need access to the Resytech Dashboard with permission to edit checkout settings.
• You should be comfortable writing CSS and/or JavaScript. Errors in custom code can break the checkout experience.
• For analytics tracking IDs (GA4 or Facebook Pixel), see Set Up Analytics Tracking instead -- those have dedicated fields.

Steps

1. Navigate to Dashboard > Checkout Settings.
2. Select the Advanced tab from the sidebar.
3. Enter your code in the appropriate section (see below).
4. Click Save Changes.

Custom CSS

The Custom CSS field accepts any valid CSS. Styles are injected into the checkout page and apply to all elements.

CSS variables

The checkout exposes the following CSS custom properties that reflect your theme settings:

--primary-color
--secondary-color
--accent-color
--background-color

You can reference these in your custom CSS to stay consistent with the theme:

.my-custom-element {
  color: var(--primary-color);
  border: 2px solid var(--accent-color);
}

Example: override card styles

/* Increase card rounding and add a colored border */
.activity-card {
  border-radius: 20px;
  border: 2px solid var(--primary-color);
  transition: transform 0.3s ease;
}

.activity-card:hover {
  transform: translateY(-4px);
}

/* Custom gradient button */
.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Example: load a custom font

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');

body {
  font-family: 'Playfair Display', serif;
}

The editor includes a Format button that auto-indents your CSS for readability.

Custom JavaScript

The Custom JavaScript field runs after the checkout page loads. Use it for advanced DOM manipulation, third-party widget integration, or custom event handling.

Your script runs once when the checkout page finishes loading -- there are no separate "ready" events to wait for. To react to the purchase event specifically, use the Purchase Complete JavaScript field below.

Example: inject a third-party chat widget

// Load Drift chat widget
!function() {
  var t = window.driftt = window.drift = window.driftt || [];
  // ... Drift initialization code
}();

Purchase Complete JavaScript

This script runs only after a successful booking purchase. It is ideal for conversion tracking, thank-you popups, or triggering external workflows.

Available data

The checkout-complete event provides purchase information in event.detail:

The same data is also passed directly into your script as a purchaseData parameter, so you can either listen for the event or read purchaseData directly.

Example: track a purchase conversion

window.addEventListener('checkout-complete', function(event) {
  var data = event.detail;

  // Google Analytics 4 purchase event
  if (window.gtag) {
    gtag('event', 'purchase', {
      transaction_id: data.confirmationCode,
      value: data.totalPaid,
      currency: 'USD',
      items: [data.activity]
    });
  }

  // Facebook Pixel purchase event
  if (window.fbq) {
    fbq('track', 'Purchase', {
      value: data.totalPaid,
      currency: 'USD'
    });
  }
});

Example: redirect after purchase

window.addEventListener('checkout-complete', function(event) {
  // Wait 3 seconds, then redirect
  setTimeout(function() {
    window.location.href = 'https://yoursite.com/thank-you?booking=' + event.detail.confirmationCode;
  }, 3000);
});

Tips

• Test custom JavaScript carefully. Syntax errors or unhandled exceptions can break the checkout flow. Test in a browser console first.
• Custom CSS takes precedence over theme colors. If you set a color in Custom CSS that conflicts with a theme color, the CSS value wins due to specificity.
• Purchase Complete scripts only run on success. They will not fire for failed or abandoned checkouts.
• Use the Format button. The CSS editor includes a formatting tool that adds proper indentation. Click the wand icon in the section header.
• Keep scripts lightweight. Heavy scripts increase page load time, which can reduce conversion rates. Load external libraries asynchronously when possible.

Related guides

• Set Up Analytics Tracking -- use the built-in GA4 and Facebook Pixel fields instead of writing tracking code manually.
• Customize Checkout Theme -- configure colors and layout without writing CSS.