Appearance
Hero Section
Overview
The hero is the top region of every page - the first thing visitors see. Every page, post, and product has a hero, and the product hero adds a few affiliate-marketing-specific fields on top of the standard set.
Hero settings live in two places:
- Per-page - every Page, Post and Product has a Hero field group in the editor.
- Globally - defaults (heading font size, text font size, background imagery, overlay) are set in Theme Settings → General → Layout tab and inherited unless overridden.
Common hero fields
The Hero settings field group is organised into sub-tabs. Pages, posts and products all share the General Settings, Background Image and Hero Image tabs:
General Settings
| Field | What it does |
|---|---|
| Title | Big H1. Defaults to the post title; override here for SEO-tuned variants. |
| Title Label | Short eyebrow above the title (e.g. Best for 2026, Editor's Pick). |
| Text | WYSIWYG body copy rendered directly below the title. |
Background Image
| Field | What it does |
|---|---|
| Background Image | Full-bleed image behind the hero. Cropped to 1920×600 on desktop and 768×400 on mobile. Upload at 3840×1200 for retina sharpness; .webp preferred. |
| Use Overlay | Toggle a color overlay on top of the background image. |
| Overlay Color | Color for the overlay - black to darken, white to lighten, accent for tinting. Visible only when Use Overlay is on. |
| Overlay Opacity | 0-100% transparency for the overlay. Visible only when Use Overlay is on. |
Hero Image
| Field | What it does |
|---|---|
| Hero Image | Optional foreground image (the product photo / page visual) rendered alongside the text. Displayed at 500×500; upload at 1000×1000 for retina sharpness. Falls back to the post's Featured Image if empty. |
| Hide On Mobile | Drop the hero image on small screens to keep the hero compact. Visible only when a hero image is set. |
Product hero extras
Products add a fourth sub-tab - Sticky CTA - on top of the shared fields. The Sticky CTA is the small bar that docks to the bottom of the screen on mobile (and to the hero on desktop) so the primary affiliate button stays in reach as the visitor scrolls.
| Field | What it does |
|---|---|
| Sticky CTA Text | Optional secondary line shown under the product title in the sticky bar. Leave empty to surface the product's rating instead. Capped at 80 characters. |
| Sticky CTA Affiliate Link | Pick which of the product's affiliate links the sticky CTA points to. Leave empty to use the product's first affiliate link. |
The hero's main CTA URL is auto-pulled from the product's Affiliate Links tab - you don't set it on the hero itself.
Hero text size
The Hero heading and text size settings in Theme Settings → General → Layout tab control the title and intro sizes globally with Small / Default / Large presets. Useful when you want product hero copy to feel more weighty than the standard page hero.
What's next
- Configure global hero defaults in Theme Settings → General → Layout tab.
- See Blocks for what goes below the hero.
- Pick a Color Theme - hero accents follow it.