Banner

Reading Time: 7 minutes Last Updated: February 16, 2026

The Banner Block displays a promotional banner on the thank you page, allowing you to showcase special offers, messages, or call-to-action content to customers after checkout.

Overview#

Block Name: Banner
Category: RedFox Thank You
Purpose: Display a promotional banner with image, text, and CTA button
Available In: Pro

What It Does#

This block shows:

  • A customizable title with heading level control
  • A subtitle for secondary messaging
  • Rich text content area
  • A call-to-action button with configurable link
  • An optional image with flexible positioning (left, top, right)

All text content (title, subtitle, content, and button text) is fully editable directly in the block editor using rich text editing.

When to Use#

Use This Block When:

  • Promoting special offers or discounts after purchase
  • Displaying a thank you message with branded imagery
  • Encouraging customers to take a follow-up action (e.g., join a loyalty program)
  • Adding visual appeal to the thank you page with a hero-style banner

Block Settings#

Display Settings#

Control the visibility of each banner element:

  • Show Title: Toggle to display or hide the banner title (default: on)
  • Show Subtitle: Toggle to display or hide the banner subtitle (default: on)
  • Show Content: Toggle to display or hide the banner content text (default: on)
  • Show Button: Toggle to display or hide the banner button (default: on)
  • Show Image: Toggle to display or hide the banner image (default: on)

Each toggle includes a reset button to restore the default value.

Title Settings#

Control the banner title heading level. Only visible when Show Title is enabled.

  • Heading Level: Choose the semantic heading level (H1–H6) for SEO and accessibility (default: H2)

Button Settings#

Control the call-to-action button. Only visible when Show Button is enabled.

  • Button URL: Set the destination URL for the button
  • Open in New Tab: Toggle to open the button link in a new browser tab

The button text can be edited directly in the block editor.

Image Settings#

Control the banner image. Only visible when Show Image is enabled.

  • Banner Image: Upload or select an image from the media library
  • Image Position: Choose where the image appears relative to the content — Left, Top, or Right (default: Top)

Style Settings#

All style controls are found in the Styles tab of the block inspector panel.

Text#

Control the general text styling across the block:

  • Font Family (Google Fonts) — Access to 1,000+ Google Fonts
  • Font Weight — Light (300) to Extra Bold (800), dynamically updates based on selected font
  • Text Color — Match your brand colors
  • Font Size — Adjust size for better readability
  • Line Height — Improve spacing between lines
  • Letter Spacing — Fine-tune spacing between characters (-10 to 10)
  • Font Style — Italic, Underline, Strikethrough
  • Text Transform — Uppercase, Lowercase, Capitalize, or None
  • Text Alignment — Left, Center, or Right

Responsive Support: Supported.

Title Text#

Control the banner title styling. Only visible when Show Title is enabled in Display Settings.

  • Font Family (Google Fonts) — Access to 1,000+ Google Fonts
  • Font Weight — Light (300) to Extra Bold (800)
  • Text Color — Set distinct color for the title
  • Font Size — Adjust title size for better hierarchy
  • Line Height — Control spacing for title text
  • Letter Spacing — Fine-tune spacing between characters (-10 to 10)
  • Word Spacing — Adjust spacing between words (-10 to 50)
  • Font Style — Italic, Underline, Strikethrough
  • Text Transform — Uppercase, Lowercase, Capitalize, or None
  • Text Alignment — Left, Center, or Right

Responsive Support: Supported.

Subtitle Text#

Control the subtitle styling. Only visible when Show Subtitle is enabled in Display Settings.

  • Font Family (Google Fonts) — Access to 1,000+ Google Fonts
  • Font Weight — Light (300) to Extra Bold (800)
  • Text Color — Set distinct color for the subtitle
  • Font Size — Adjust subtitle size
  • Line Height — Control spacing for subtitle text
  • Letter Spacing — Fine-tune spacing between characters (-10 to 10)
  • Word Spacing — Adjust spacing between words (-10 to 50)
  • Font Style — Italic, Underline, Strikethrough
  • Text Transform — Uppercase, Lowercase, Capitalize, or None
  • Text Alignment — Left, Center, or Right

Responsive Support: Supported.

Content Text#

Control the content area text styling. Only visible when Show Content is enabled in Display Settings.

  • Font Family (Google Fonts) — Access to 1,000+ Google Fonts
  • Font Weight — Light (300) to Extra Bold (800)
  • Text Color — Set distinct color for the content
  • Font Size — Adjust content text size
  • Line Height — Control spacing for content text
  • Letter Spacing — Fine-tune spacing between characters (-10 to 10)
  • Word Spacing — Adjust spacing between words (-10 to 50)
  • Font Style — Italic, Underline, Strikethrough
  • Text Transform — Uppercase, Lowercase, Capitalize, or None
  • Text Alignment — Left, Center, or Right

Responsive Support: Supported.

Button Style#

Control the CTA button appearance. Only visible when Show Button is enabled in Display Settings.

Background:

  • Background Color — Button background color
  • Gradient Background — Gradient background for the button

Text:

  • Text Color — Button text color
  • Font Family (Google Fonts) — Access to 1,000+ Google Fonts
  • Font Weight — Light (300) to Extra Bold (800)
  • Font Size — Adjust button text size
  • Line Height — Control spacing for button text
  • Letter Spacing — Fine-tune spacing between characters (-10 to 10)
  • Word Spacing — Adjust spacing between words (-10 to 50)
  • Font Style — Italic, Underline, Strikethrough
  • Text Transform — Uppercase, Lowercase, Capitalize, or None
  • Text Alignment — Left, Center, or Right

Spacing:

  • Padding — Internal spacing within the button
  • Margin — External spacing around the button

Border:

  • Border — Border width, style, color, individual sides
  • Border Radius — Round corners individually or all at once

Box Shadow:

  • Shadow Color — Shadow color with full color picker
  • Horizontal Offset — Range: -100 to 100
  • Vertical Offset — Range: -100 to 100
  • Blur — Range: 0 to 200
  • Spread — Range: -100 to 100
  • Inset — Toggle for inner shadow

Responsive Support: Supported.

Button Hover#

Control the button hover state. Only visible when Show Button is enabled in Display Settings.

Background:

  • Background Color — Button background color on hover
  • Gradient Background — Gradient background on hover

Text:

  • Text Color — Button text color on hover
  • Font Family (Google Fonts), Font Weight, Font Size, Line Height, Letter Spacing, Word Spacing, Font Style, Text Transform, Text Alignment

Spacing:

  • Padding — Internal spacing on hover
  • Margin — External spacing on hover

Border:

  • Border — Border width, style, color, individual sides
  • Border Radius — Round corners individually or all at once

Box Shadow:

  • Shadow Color, Horizontal Offset, Vertical Offset, Blur, Spread, Inset

Responsive Support: Supported.

Image Style#

Customize the banner image appearance. Only visible when Show Image is enabled in Display Settings.

  • Spacing — Padding and margin around the image
  • Border — Border width, style, color, individual sides, and border radius
  • Box Shadow — Color, horizontal/vertical offset, blur, spread, and inset toggle

Responsive Support: Supported.

Background#

Customize the block background:

  • Background Color — Color picker with custom hex values
  • Background Image — Upload or select from media library with size, position, repeat, and attachment options
  • Background Gradient — Linear and radial gradients with presets
  • Background Overlay — Color or gradient overlay with blend modes

Responsive Support: Supported.

Spacing#

Control block spacing:

  • Padding: Internal space (inside the block) — Top, Right, Bottom, Left
  • Margin: External space (around the block) — Top, Right, Bottom, Left

Features: Linked/unlinked sides, presets, box model visualization, auto values.

Responsive Support: Supported.

Sizing#

Control block dimensions with precision.

  • Width / Height
  • Min Width / Min Height
  • Max Width / Max Height

Responsive Support: Supported.

Border#

Add and customize borders.

  • Border Width — Set width in pixels or other units
  • Border Style — Solid, Dashed, Dotted, and more
  • Border Color — Full color picker
  • Individual Sides — Set borders per side or all at once
  • Border Radius — Round corners individually or all at once

Responsive Support: Supported.

Box Shadow#

Add depth and dimension.

  • Color — Shadow color with full color picker
  • Horizontal Offset — Range: -100 to 100 (default: 0px)
  • Vertical Offset — Range: -100 to 100 (default: 2px)
  • Blur — Range: 0 to 200 (default: 4px)
  • Spread — Range: -100 to 100 (default: 0px)
  • Inset — Toggle for inner shadow

Set a shadow color to get started — sensible defaults are applied automatically.

Responsive Support: Supported.