Customize Checkout Theme

How to choose an activity page layout, configure brand colors, toggle display options, and apply preset themes in the Resytech checkout.

The Theme & Appearance tab controls how your activity page looks to customers -- the layout, colors, typography, shadows, and which elements are visible on each activity card. The editor includes a live preview so you can see changes before saving.

Before you begin

You need access to the Resytech Dashboard with permission to edit checkout settings.
Have your brand color hex codes ready (primary, secondary, accent).

Steps

Navigate to Dashboard > Checkout Settings.
Select the Theme & Appearance tab from the sidebar.
Choose a layout, configure colors and display options, then click Save Changes.

Choose a layout

Resytech provides three activity page layouts. Select one and then customize its specific options.

Layout	Best for	Description
Modern Grid	Contemporary businesses	Clean card grid with gradient headers, hover shadows, and full display toggles. The most customizable layout.
Minimal Cards	Professional, understated brands	Stripped-down cards with subtle interactions and configurable spacing.
Magazine Layout	Premium experiences, travel brands	Editorial-style presentation with custom font family support.

To switch layouts, select the radio button next to the layout name. If the new layout has never been configured, default values are applied automatically.

Theme color reference

All three layouts share a set of base colors. Each layout also has unique options.

Base colors (all layouts)

Property	Default	Description
Primary Color	`#3b82f6`	Main brand color used for buttons, links, and highlighted elements.
Secondary Color	`#1e40af`	Supporting color for darker accents and hover states.
Accent Color	`#f59e0b`	Call-to-action color for badges, prices, and attention-drawing elements.
Background Color	`#f8fafc`	Page background behind the activity cards.
Card Background Color	`#ffffff`	Background of individual activity cards.
Card Text Color	`#1f2937`	Default text color inside cards.
Title Text Color	`#111827`	Color for activity names and headings.
Header Background Color	`#3b82f6`	Background of the header section at the top of the page.
Header Text Color	`#ffffff`	Text color inside the header.
Border Radius	`16px` / `12px` / `8px`	Corner rounding on cards. Larger values produce softer, rounder corners.

Modern Grid extras

Property	Default	Description
Header Gradient	`linear-gradient(135deg, #667eea 0%, #764ba2 100%)`	CSS gradient applied to the page header. Overrides the flat header background color.
Card Shadow	`0 10px 15px -3px rgba(0, 0, 0, 0.1)`	Default box shadow on activity cards.
Hover Shadow	`0 20px 25px -5px rgba(0, 0, 0, 0.15)`	Elevated shadow when a customer hovers over a card.

Minimal Cards extras

Property	Default	Description
Header Color	`#f3f4f6`	Secondary header background.
Spacing	`comfortable`	Vertical and horizontal gap between cards. Options: `compact`, `comfortable`, `spacious`.

Magazine Layout extras

Property	Default	Description
Header Color	`#f3f4f6`	Secondary header background.
Font Family	`Inter, sans-serif`	CSS font stack for all text. Use web-safe fonts or load a custom font via Custom CSS. Example: `Georgia, serif` for an editorial feel.

Display options (Modern Grid only)

When using the Modern Grid layout, you can toggle which elements appear on each activity card.

Toggle	Default	Description
Show Starting At Price	On	Display the minimum price for the activity.
Show Equipment	On	Display available equipment options.
Show Durations	On	Display available duration choices.
Show Available	On	Display availability status.
Show Tagline	On	Display the activity tagline text.
Show Short Description	On	Display a brief activity description.

Turn off toggles to create a simpler, less cluttered card when you do not need every detail visible at the activity selection stage.

Quick presets

The theme editor includes three built-in presets that configure both the layout and colors in one click.

Preset	Layout	Primary	Secondary	Accent	Background
Ocean Blue	Modern Grid	`#0ea5e9`	`#0369a1`	`#f59e0b`	`#f0f9ff`
Forest Green	Minimal Cards	`#059669`	`#047857`	`#dc2626`	`#f0fdf4`
Sunset Orange	Magazine Layout	`#ea580c`	`#9a3412`	`#7c2d12`	`#fffbeb`

Click a preset to instantly apply its layout and color scheme. You can then fine-tune individual colors.

Use the live preview

The preview panel below the editor shows how your checkout will look using your actual published activities (or sample data if none exist). Use the device-size buttons to check the design at different screen widths:

Desktop -- full width
Tablet -- 768px
Mobile -- 375px

Click the expand icon to open the preview in a larger modal window.

How to match your brand colors

Start by applying the preset closest to your brand.
Set Primary Color to your main brand color.
Set Secondary Color to a darker shade of your primary (used for hover states and depth).
Set Accent Color to a contrasting color for call-to-action elements like prices and badges.
Adjust Background Color to a light tint of your primary for a cohesive feel, or use #ffffff for a clean white background.
Switch the preview to mobile view to verify that text remains readable against your chosen colors.
Click Save Changes.

Tips

Default values are applied per layout. Switching from Modern Grid to Magazine Layout and back does not lose your Modern Grid settings -- they are stored separately.
Header Gradient overrides Header Background Color. If you set a gradient, the flat color is ignored. To use a flat color, clear the gradient field.
Border Radius accepts any CSS value. Use 0px for sharp corners, 8px for subtle rounding, or 9999px for fully rounded pill shapes.
Font Family changes only affect Magazine Layout. The other layouts use the system default font stack.

Configure Checkout Settings -- set the page title, return URL, and behavior toggles.
Add Custom CSS and Scripts -- override theme styles or load custom fonts.
Set Activity Display Order -- control which activities appear first.

Customize Checkout Theme

On this page