# Customize Checkout Theme (/how-to/checkout/customize-checkout-theme) 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 [#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 [#steps] 1. Navigate to **Dashboard > Checkout Settings**. 2. Select the **Theme & Appearance** tab from the sidebar. 3. Choose a layout, configure colors and display options, then click **Save Changes**. Choose a layout [#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 [#theme-color-reference] All three layouts share a set of base colors. Each layout also has unique options. Base colors (all layouts) [#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 [#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 [#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 [#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](/how-to/checkout/add-custom-css-and-scripts). Example: `Georgia, serif` for an editorial feel. | Display options (Modern Grid only) [#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 [#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 [#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 [#how-to-match-your-brand-colors] 1. Start by applying the preset closest to your brand. 2. Set **Primary Color** to your main brand color. 3. Set **Secondary Color** to a darker shade of your primary (used for hover states and depth). 4. Set **Accent Color** to a contrasting color for call-to-action elements like prices and badges. 5. Adjust **Background Color** to a light tint of your primary for a cohesive feel, or use `#ffffff` for a clean white background. 6. Switch the preview to mobile view to verify that text remains readable against your chosen colors. 7. Click **Save Changes**. Tips [#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. Related guides [#related-guides] * [Configure Checkout Settings](/how-to/checkout/configure-checkout-settings) -- set the page title, return URL, and behavior toggles. * [Add Custom CSS and Scripts](/how-to/checkout/add-custom-css-and-scripts) -- override theme styles or load custom fonts. * [Set Activity Display Order](/how-to/checkout/set-activity-display-order) -- control which activities appear first.