Horizon Pro. Documentation

Everything you need to set up, customise, and get the most out of your Horizon Pro theme. Browse sections, blocks, theme settings, and more.

Getting Started Sections Product Blocks Theme Settings Cart Drawer Updates

Getting Started

Install Horizon Pro, activate your license, and configure the basics to get your store up and running.

Installation

Horizon Pro is delivered as a .zip file. Upload it directly to your Shopify admin to get started — no coding or CLI tools required. The whole process takes under two minutes, and you'll be customising your store immediately after.

Best Used On

First-time Setup New Stores Theme Migration

Theme upload screenshot

Steps

Step	Action
1	After purchase, you'll receive a download link via email containing your `.zip` theme file and license key.
2	In your Shopify admin, go to Online Store → Themes.
3	Click Add theme → Upload zip file and select the Horizon Pro `.zip`.
4	Wait for the upload to complete. Horizon Pro will appear in your theme library as an unpublished theme.
5	Click Customise to open the theme editor, or Publish to make it your live theme.

Tip

We recommend keeping your current theme as a backup before publishing. You can always switch back from Online Store → Themes if needed.

License Activation

Activate your license to unlock one-click theme updates and full support. Your license key is included in your purchase confirmation email. Once activated, the Horizon Pro Manager app handles everything — updates arrive as one-click installs, no manual file management needed.

How to Add

The Horizon Pro Manager app is available from the link in your purchase email. You can also find it in your Shopify admin under Apps. If you haven't installed it yet, use the install link provided at checkout — it connects automatically to your store.

Best Used On

First-time Setup After Purchase Store Migration

License activation screenshot

Steps

Step	Action
1	Install the Horizon Pro Manager app from the link in your purchase email, or search for it in the Shopify App Store.
2	Open the app and click Activate License.
3	Enter your license key (format: `HP-XXXXX-XXXXX-XXXXX`) and click Activate.
4	Your license status will update to Active. You'll now have access to one-click updates and priority support.

License Types

Plan	Price	Stores	Updates	Support
Single Store	$249	1 store	Lifetime	6 months
Unlimited Stores	$499	Unlimited	Lifetime	12 months

Tip

If you need to move your license to a different store, deactivate it first from the current store's Horizon Pro Manager app, then activate on the new store.

Theme Setup

After installing Horizon Pro, configure the essential settings to match your brand. All settings are accessible from the theme editor's left sidebar. Follow the recommended order below to build a solid foundation before diving into individual sections and pages.

Best Used On

First-time Setup Brand Refresh New Store Launch

Theme editor screenshot

Recommended Setup Order

Step	Area	What to Configure
1	Branding	Upload your logo, set brand colours, and configure typography in Theme Settings → Brand.
2	Colours	Set up your colour schemes. Horizon Pro uses Shopify's native colour scheme system — create schemes that match your brand palette.
3	Typography	Choose heading and body fonts. Horizon Pro supports all Shopify-hosted fonts plus custom font uploads.
4	Homepage	Navigate to your homepage template and start adding sections. Drag to reorder, click any section to configure its settings.
5	Custom Features	Enable Horizon Pro's custom features in Theme Settings — Custom Cursor, Dark Mode Toggle, Scroll Progress Bar, and more.
6	Cart Drawer	Configure the enhanced cart drawer with free shipping progress bar and upsell recommendations.

Tip

Horizon Pro is built on Shopify's Horizon 3.4 base theme, so all standard Shopify sections and features work as expected. The custom sections are additions — they don't replace or modify any stock functionality.

Sections — Heroes

Full-viewport hero sections with cinematic effects, text animations, and rich content blocks. Designed for high-impact page headers.

Page Hero

Hero

A cinematic full-viewport hero with 16+ customisable features, built for pages beyond the homepage — About, Contact, Landing, and more. Supports background images and video, 6 overlay gradient directions, film grain, Ken Burns zoom, parallax scroll, vignette, 5 text animation styles, magnetic buttons, accent line, scroll fade, animated stat counters, and badge blocks.

How to Add

In the Shopify theme editor, navigate to the page where you want this hero. Click Add section and search for Page Hero — it appears under the Horizon Pro section group. Drag it to the top of the page so it sits above all other content.

Quick Start

Upload a background image — Use a high-quality photo at least 1920x1080px. Use the focal point sliders to keep your subject centred on all screen sizes.
Add content blocks — From the left panel, add an Eyebrow, Heading, and Body Text block. This gives you a classic hero layout with a pre-title, main headline, and supporting copy.
Set your overlay — Increase overlay opacity to 40–60% for text readability over busy images. Choose "Bottom up" direction for a natural gradient that keeps the top of the image visible.
Choose your effects — Enable Ken Burns zoom and parallax together for a cinematic feel, or disable both for a clean, static look. Film grain adds a subtle texture.
Set text and accent colours — Match your brand palette. The accent colour controls buttons, the accent line, stat counter numbers, and solid badge backgrounds.

Best Used On

Landing Pages About Page Contact Page Campaign Pages

Section Settings

Media

Setting	Type	Default	Description
Image	`image_picker`	—	Background image for the hero
Video URL	`video_url`	—	YouTube or Vimeo URL. Overrides image when set — autoplays muted and looped
Focal point (H)	`range`	50%	Horizontal focus point of the background image (0–100%)
Focal point (V)	`range`	50%	Vertical focus point of the background image (0–100%)

Layout

Setting	Type	Default	Description
Minimum height	`range`	100svh	Section height from 50–100svh (screen viewport height)
Content position	`select`	Centre	Align content left, centre, or right
Content max width	`range`	800px	Maximum width of the content area (400–1000px)

Overlay

Setting	Type	Default	Description
Overlay opacity	`range`	40%	How dark the overlay appears (0–100%)
Overlay colour	`color`	#000000	The base colour of the overlay gradient
Overlay direction	`select`	Bottom up	Gradient direction — bottom up, top down, left to right, right to left, radial (centre), or full cover

Effects

Setting	Type	Default	Description
Ken Burns zoom	`checkbox`	On	Slow cinematic zoom animation on the background image
Parallax scroll	`checkbox`	On	Background moves at a slower rate as the user scrolls
Film grain overlay	`checkbox`	On	Animated noise texture for a cinematic feel
Vignette	`checkbox`	Off	Darkened edges for a cinematic look
Vignette intensity	`range`	50%	How strong the vignette effect is (20–100%)

Content Animation

Setting	Type	Default	Description
Heading animation	`select`	Word stagger	How the heading text animates on load — word stagger, character stagger, clip reveal, blur focus, or none
Scroll-fade content	`checkbox`	On	Content fades out and lifts as the user scrolls down
Magnetic buttons	`checkbox`	On	Buttons subtly follow the cursor on hover
Accent line	`checkbox`	On	Animated decorative line below the heading

Navigation & Colours

Setting	Type	Default	Description
Show scroll indicator	`checkbox`	On	Animated chevron at bottom of the hero prompting users to scroll
Text colour	`color`	#ffffff	Colour of all text within the hero
Accent colour	`color`	#c8a97e	Used for buttons, accent line, stat numbers, and solid badges
Colour scheme	`color_scheme`	—	Shopify colour scheme override
Top padding	`range`	0px	Padding above the section (0–200px)
Bottom padding	`range`	0px	Padding below the section (0–200px)

Content Blocks

Badge — up to 3. Glass, solid, or outline styles

Eyebrow — 1 max. Small uppercase text above the heading

Heading — 1 max. Medium, large, or extra large sizes

Divider — up to 2. Short, medium, or long width

Body text — 1 max. Rich text content

Button — up to 2. Solid or outline styles

Stat counter — up to 4. Animated number + label

Tip

For the most cinematic look, enable Ken Burns, parallax, and film grain together. Use the "Bottom up" overlay direction with 40–60% opacity for text readability. Stat counters animate into view as the user scrolls — great for showcasing key numbers.

About Hero

Hero

A streamlined full-viewport hero designed specifically for About, Story, and team pages. Features a cleaner layout with fewer effects than the Page Hero, focusing on simplicity — background image or video, Ken Burns zoom, parallax scroll, and a scroll indicator. Content blocks include eyebrow, heading, body text, and buttons.

How to Add

In the Shopify theme editor, navigate to the page where you want this hero. Click Add section and search for About Hero — it appears under the Horizon Pro section group. Drag it to the top of the page for a full-viewport header.

Quick Start

Upload a brand photo or team image — A team photo, workspace shot, or brand lifestyle image works best. Use the focal point controls to keep faces or key elements visible on mobile crops.
Add Eyebrow + Heading + Body Text blocks — The eyebrow sets context (e.g. "Our Story"), the heading grabs attention, and the body text tells your narrative. Add a button block if you want to link to another page.
Set content alignment — Choose "Centre" for a classic, balanced look, or "Left" for an editorial style that feels more modern and intentional.
Adjust the overlay — Increase opacity until your text is easily readable against the background image. Start at 40% and increase as needed.

Best Used On

About Page Story Page Team Page

About Hero screenshot

Section Settings

Media

Setting	Type	Default	Description
Image	`image_picker`	—	Background image for the hero
Video URL	`video_url`	—	YouTube or Vimeo URL. Overrides image when set — autoplays muted and looped
Focal point (H)	`range`	50%	Horizontal focus point of the background image
Focal point (V)	`range`	50%	Vertical focus point of the background image

Layout & Overlay

Setting	Type	Default	Description
Minimum height	`range`	100svh	Section height from 50–100svh
Content position	`select`	Centre	Centre or left alignment
Overlay opacity	`range`	40%	How dark the overlay appears (0–100%)
Overlay colour	`color`	#000000	The base colour of the overlay

Effects & Colours

Setting	Type	Default	Description
Ken Burns zoom	`checkbox`	On	Slow cinematic zoom on the background image
Parallax scroll	`checkbox`	On	Background moves at a slower rate on scroll
Show scroll indicator	`checkbox`	On	Animated chevron at the bottom of the hero
Text colour	`color`	#ffffff	Colour of all text within the hero
Accent colour	`color`	#c8a97e	Used for solid button backgrounds
Colour scheme	`color_scheme`	—	Shopify colour scheme override
Top padding	`range`	0px	Padding above the section (0–200px)
Bottom padding	`range`	0px	Padding below the section (0–200px)

Content Blocks

Eyebrow — 1 max. Small uppercase text above the heading

Heading — 1 max. Medium, large, or extra large sizes

Body text — 1 max. Rich text content

Button — up to 2. Solid or outline styles

Tip

The About Hero is intentionally simpler than the Page Hero — fewer toggles, no film grain, vignette, or text animations. Use it when you want a clean, elegant header without the cinematic effects.

Sections — Content

Storytelling, editorial, and content sections designed to showcase your brand narrative, team, values, and imagery.

Split Story

Content

A 50/50 image + text layout with scroll-triggered effects. The image side supports parallax scrolling, clip-path reveal animation, 3D hover tilt, and hover zoom — all individually toggleable. Great for brand storytelling with rich visuals.

How to Add

In the Shopify theme editor, navigate to your page and click Add section. Search for Split Story — it appears under the Horizon Pro section group.

Quick Start

Upload your image — Choose a high-quality lifestyle or product photo. Portrait or square crops work best for the 50/50 layout
Choose image position — Set to Left or Right. Tip: alternate sides across multiple Split Story sections for a zig-zag flow
Add content blocks — Add an Eyebrow, Heading, Body Text, and Button. Fill in your brand messaging
Toggle effects — Enable parallax and clip-path reveal for scroll animation, or disable for a static layout
Adjust the column ratio — Use 60/40 to emphasise the image, or 50/50 for balanced weight

Best Used On

About Page Brand Story Page Homepage Product Landing Pages

Section Settings

Setting	Type	Default	Description
Image	`image_picker`	—	The image for the split layout
Image position	`select`	Left	Place image on the left or right side
Image aspect ratio	`select`	Natural	Natural, square (1:1), portrait (3:4), or landscape (4:3)
Image corner radius	`range`	8px	Rounded corners on the image (0–32px)
Parallax scroll	`checkbox`	On	Image moves at a different rate on scroll
Clip-path reveal	`checkbox`	On	Image reveals with a clip-path animation on scroll
3D hover tilt	`checkbox`	On	Image tilts toward the cursor on desktop
Hover zoom	`checkbox`	On	Image zooms slightly on hover
Column ratio	`select`	50/50	Grid split — 50/50, 60/40, or 40/60
Vertical alignment	`select`	Centre	Top, centre, or bottom alignment
Max width	`range`	1200px	Maximum content width (800–1400px)
Column gap	`range`	60px	Space between columns (0–120px)

Content Blocks

Eyebrow — 1 max. Small label text

Accent line — 1 max. Decorative line with custom width and colour

Heading — 1 max. S / M / L / XL sizes

Body text — up to 2. Rich text paragraphs

Spacer — up to 3. Adjustable height

Button — up to 2. Primary, secondary, or link with arrow

Tip

Alternate image position (left/right) across multiple Split Story sections to create a zig-zag visual flow down the page. Use the 60/40 ratio for emphasis on the image side.

Editorial Reveal

Content

A text-focused section where words reveal from dim to full opacity as the user scrolls. Bold and italic words automatically highlight in your accent colour during the reveal. Creates a cinematic reading experience — ideal for brand manifestos, philosophy pages, or about sections.

How to Add

In the Shopify theme editor, click Add section and search for Editorial Reveal.

Quick Start

Write your manifesto — Add a Body Text block with your brand statement. Use bold and italic for key phrases — they'll highlight during the scroll reveal
Set your highlight colour — Pick a colour that pops against your background for the keyword highlighting
Adjust the reveal intensity — Lower the "dimmed word opacity" (10-15%) for dramatic effect, raise it (25-35%) for subtlety
Choose your layout — Left-aligned feels editorial, centre-aligned feels more formal
Add supporting elements — Drop in an Eyebrow block above for context, and a Button block below for a CTA

Best Used On

About Page Brand Philosophy Page Homepage Campaign Landing Pages

Editorial Reveal screenshot

Section Settings

Setting	Type	Default	Description
Body line height	`select`	Relaxed (2.0)	Compact (1.5), Normal (1.75), Relaxed (2.0), or Spacious (2.25)
Dimmed word opacity	`range`	15%	How visible unrevealed words are — lower = more dramatic (5–40%)
Highlight colour	`color`	#c8a97e	Bold and italic words shift to this colour during reveal
Text alignment	`select`	Left	Left or centre alignment
Content width	`range`	780px	Maximum text width (560–1000px)

Content Blocks

Eyebrow — 1 max

Heading — 1 max. S / M / L / XL

Body text — up to 3. Bold/italic words get highlighted

Spacer — up to 3

Divider — up to 2. Custom width and colour

Button — up to 2

Tip

Use <strong> (bold) and <em> (italic) in the rich text editor to mark key phrases — they'll automatically highlight in your accent colour during the scroll reveal.

Sticky Steps

Content

Apple-style sticky layout with a fixed product image on one side and scrolling content steps on the other. Features an optional product spin effect where 4 images of your product rotate as the user scrolls. Each step can override the main image, show a custom icon, and use a unique accent colour.

How to Add

In the Shopify theme editor, click Add section and search for Sticky Steps.

Quick Start

Set the main product image — Upload a hero product shot or lifestyle image that represents the overall process
Add Step blocks — Each step gets a heading, description, and optional icon. Add 3-6 steps for best results
Try the product spin — Upload 4 angles of your product (front, right, back, left) and enable spin. The product rotates as the user scrolls through steps
Configure step animations — Choose between fade up, fade in, or slide left. Fade up is the most natural
Use image overrides — Each step block can show a different image, replacing the main product shot when that step is active

Best Used On

Product Pages How It Works Pages Process Pages Homepage

Section Settings

Setting	Type	Default	Description
Heading	`text`	—	Section heading above the steps
Subtext	`textarea`	—	Subtitle text below the heading
Product image	`image_picker`	—	Main sticky image (used when spin is disabled)
Enable product spin	`checkbox`	Off	Upload 4 angle images — product rotates on scroll
Spin images 1–4	`image_picker`	—	Front, Right, Back, Left angle images for spin effect
Image position	`select`	Left	Sticky image on the left or right
Image column width	`range`	50%	How wide the image column is (30–70%)
Gap between steps	`range`	100px / 40px	Desktop and mobile gap between step blocks
Show step numbers	`checkbox`	On	Display numbered labels on each step
Step animation	`select`	Fade up	Fade up, fade in, or slide left animation
Accent colour	`color`	#c8a97e	Colour for step numbers and active indicators

Content Blocks

Step — up to 8. Heading + description + optional icon + image override + accent colour

Tip

The product spin feature works best with 4 evenly-spaced product photos (front, right, back, left) on a consistent background. Use step image overrides to show different product views at each stage of the process.

Story Timeline

Content

A vertical timeline for brand history, company milestones, or product journey. Features a central line connecting milestone cards that alternate sides on desktop. Each milestone includes a year marker, heading, body text, and optional image. Cards animate into view as the user scrolls.

How to Add

In the Shopify theme editor, click Add section and search for Story Timeline.

Quick Start

Add Milestone blocks — Each milestone gets a year, heading, body text, and optional image. Add milestones chronologically
Set your line colour — The central timeline line uses your accent colour by default. Match it to your brand
Choose card style — Bordered is clean and structured, open is airy, filled adds weight
Write concise milestones — Keep headings to 3-5 words and descriptions to 1-2 sentences. The timeline works best when it's scannable

Best Used On

About Page Company History Brand Story Page

Story Timeline screenshot

Section Settings

Setting	Type	Default	Description
Heading	`text`	Our Story	Section heading
Subtext	`textarea`	—	Subtitle below the heading
Line colour	`color`	#c8a97e	Colour of the central timeline line
Accent colour	`color`	#c8a97e	Year marker and dot colour
Card style	`select`	Bordered	Open (no border), bordered, or filled cards
Max width	`range`	1000px	Content width (800–1400px)

Content Blocks

Milestone — up to 12. Year + heading + body text + optional image

Gallery

Content

A masonry-style image gallery with configurable columns, parallax depth offsets on alternating tiles, and an optional lightbox for full-size viewing. Each image can be set to normal or tall size, and supports captions that appear on hover.

How to Add

In the Shopify theme editor, click Add section and search for Gallery.

Quick Start

Add Image blocks — Upload your images and set each one to "Normal" or "Tall" size. Mix sizes for visual variety
Choose column count — 3 columns is the default and works well for most layouts. Use 2 for fewer, larger images
Write captions — Each image supports an optional caption that appears on hover. Great for descriptions or photo credits
Enable the lightbox — When turned on, visitors can click any image to view it full-size in an overlay
Toggle parallax depth — When enabled, alternating tiles shift up and down on scroll for a layered, magazine-style feel

Best Used On

About Page Behind the Scenes Lookbook Portfolio Page

Gallery screenshot

Section Settings

Setting	Type	Default	Description
Heading	`text`	Behind the Scenes	Section heading
Subtext	`textarea`	—	Subtitle
Columns	`range`	3	Number of columns (2–4)
Gap	`range`	12px	Space between tiles (4–24px)
Corner radius	`range`	12px	Rounded corners on images (0–24px)
Parallax depth	`checkbox`	On	Alternate tiles shift up/down on scroll for a layered feel
Lightbox on click	`checkbox`	On	Click any image to view full-size in a lightbox overlay
Accent colour	`color`	#c8a97e	Used for hover states and lightbox controls
Content width	`range`	1200px	Max width (800–1400px)

Content Blocks

Image — up to 12. Image + caption + size (normal or tall)

Tip

Mix normal and tall image sizes to create visual variety. Set a few images to "Tall" to span two rows in the masonry layout.

Big Quote

Content

A large-format quote section with word-by-word scroll reveal. Bold words automatically highlight in your accent colour as they reveal. Features decorative quotation marks, optional attribution with name and title, and full typography control including font weight and style.

How to Add

In the Shopify theme editor, click Add section and search for Big Quote.

Quick Start

Add a Quote block — Write or paste your quote text. Use bold on key phrases to make them highlight during the scroll reveal
Add an Attribution block — Include the speaker's name and role/title. An optional divider separates the quote from attribution
Set typography — Light weight (300) with italic looks elegant. Bold and regular work for more impactful statements
Adjust the reveal — Lower the dimmed opacity for dramatic word-by-word reveal, raise it for subtlety
Choose size — Extra large for a hero-style statement, medium for inline use between other sections

Best Used On

About Page Homepage Brand Story Testimonial Page

Section Settings

Setting	Type	Default	Description
Quote text size	`select`	Large	Small, medium, large, or extra large
Quote font weight	`select`	Light (300)	Light, regular, or medium
Quote font style	`select`	Italic	Normal or italic
Highlight colour	`color`	#c8a97e	Applied to bold/strong words during reveal
Dimmed word opacity	`range`	15%	How visible unrevealed words are (5–40%)
Decorative quotes	`checkbox`	On	Show large quotation marks behind the text
Quote mark colour	`color`	#c8a97e	Colour of the decorative marks
Quote mark opacity	`range`	15%	How visible the decorative marks are (5–50%)
Content max width	`range`	900px	Max width of the quote text (560–1200px)
Text alignment	`select`	Centre	Left or centre alignment

Content Blocks

Quote — 1 max. Rich text with bold-word highlighting

Attribution — 1 max. Name + title/role + optional divider

Spacer — up to 2

Magnetic Card

Content

A full-width background image section with a floating content card that follows and tilts toward the cursor on desktop. The card supports glassmorphism, solid, or transparent styles with extensive customisation — blur, opacity, border, radius, padding, position, and vertical alignment. Background features include overlay gradients, Ken Burns zoom on scroll, and staggered content reveal animations.

How to Add

In the Shopify theme editor, click Add section and search for Magnetic Card.

Quick Start

Upload a background image — A wide, atmospheric photo works best. The card sits on top, so the image is the backdrop
Add content blocks — Eyebrow, Heading, Text, and Button blocks populate the floating card
Choose card style — Glassmorphism creates a frosted glass effect (increase blur to 24-30px for maximum impact). Solid gives a clean opaque card. Transparent lets the background show through
Position the card — Left or right positioning creates asymmetry. Set the card width to 40-50% for balance
Enable the magnetic effect — The card subtly follows and tilts toward the cursor on desktop. Adjust follow distance and tilt angle to taste

Best Used On

Homepage Landing Pages About Page Campaign Pages

Section Settings

Setting	Type	Default	Description
Background image	`image_picker`	—	Full-width background image
Focal point H/V	`range`	50%	Horizontal and vertical focus points
Overlay colour	`color`	#000000	Base colour of the overlay
Overlay darkness	`range`	40%	Overlay opacity (0–100%)
Overlay gradient	`select`	Bottom	Flat, fade from top/bottom/left/right, or radial vignette
Card position	`select`	Left	Left, centre, or right
Vertical alignment	`select`	Centre	Top, centre, or bottom
Card width	`range`	42%	Card width relative to the section (30–65%)
Card style	`select`	Glassmorphism	Glassmorphism, solid, or transparent
Glass blur	`range`	16px	Backdrop blur amount (4–40px, glassmorphism only)
Card BG opacity	`range`	15%	Background tint opacity
Card BG colour	`color`	#000000	Background tint colour
Glass border	`checkbox`	On	Show subtle glass border on the card
Corner radius	`range`	20px	Card corner radius (0–40px)
Card padding	`range`	48px	Internal padding (24–80px)
Magnetic cursor follow	`checkbox`	On	Card follows and tilts toward cursor (desktop)
Follow distance	`range`	15px	How far the card moves toward cursor (5–40px)
3D tilt angle	`range`	6°	Maximum rotation angle for the tilt (0–15°)
Background zoom	`checkbox`	On	Ken Burns zoom on the background as user scrolls
Zoom amount	`range`	112%	How far the background zooms (100–135%)
Content reveal	`select`	Fade up	Fade up, fade in, or scale up animation
Stagger delay	`range`	100ms	Time between each content element appearing (50–300ms)
Section height	`range`	85vh	Section height (50–100vh)
Max height	`range`	700px	Prevents oversized section on large screens (400–900px)

Content Blocks

Eyebrow — 1 max. With colour override

Heading — 1 max. S/M/L/XL + colour override

Text — up to 2. Rich text + colour override

Button — up to 2. Primary, secondary, or link

Tip

The glassmorphism card style looks stunning with a busy background image. Increase the blur to 24–30px and keep the BG opacity low (10–20%) for a frosted glass effect. The magnetic follow is automatically disabled on mobile and for users with reduced motion preferences.

Team

Content

A responsive team member grid with photo cards. Each member shows their name, role, and an optional bio that appears on hover (desktop) or tap (mobile). Supports an optional grayscale-to-colour effect on hover, portrait or square aspect ratios, and configurable column counts for desktop and mobile.

How to Add

In the Shopify theme editor, click Add section and search for Team.

Quick Start

Add Team Member blocks — Each member gets a photo, name, role, optional bio, and optional link (social profile or email)
Set a consistent image style — Use the same background, lighting, and framing across all team photos for a professional look
Choose the image ratio — Portrait (3:4) works best for headshots, square for a modern grid look
Try grayscale mode — Enable grayscale photos for an editorial feel — images reveal full colour on hover
Set your column count — 4 columns for larger teams, 3 for featured leaders, 2 for executive spotlights

Best Used On

About Page Team Page Company Page

Team Grid screenshot

Section Settings

Setting	Type	Default	Description
Heading	`text`	Meet the Team	Section heading
Subtext	`textarea`	—	Subtitle
Columns	`range`	4	Desktop columns (2–5)
Columns (mobile)	`range`	2	Mobile columns (1–3)
Grayscale photos	`checkbox`	Off	Photos start grayscale, reveal colour on hover
Image ratio	`select`	Portrait (3:4)	Portrait or square aspect ratio
Accent colour	`color`	#c8a97e	Hover accent and overlay colour
Content width	`range`	1200px	Max width (800–1400px)

Content Blocks

Team member — up to 12. Photo + name + role + bio + optional link

Values

Content

A grid of value/mission cards with either numbered indicators or icons. Each card supports 3D hover tilt on desktop and comes in glass, bordered, or minimal styles. Choose from 6 built-in icons (heart, star, shield, globe, leaf, bolt) or use numbered indicators (01, 02, 03, etc.) for a clean, editorial look.

How to Add

In the Shopify theme editor, click Add section and search for Values.

Quick Start

Add Value Card blocks — Each card gets a display type (number or icon), heading, and description
Choose numbers or icons — Numbered indicators (01, 02, 03) give an editorial feel. Icons (heart, star, shield, globe, leaf, bolt) add visual personality
Select card style — Glass works beautifully on dark backgrounds, bordered is clean, minimal is understated
Keep content concise — Short headings (2-3 words) and brief descriptions (1-2 sentences) make values scannable
Enable 3D tilt — Cards subtly tilt toward the cursor on desktop, adding an interactive premium touch

Best Used On

About Page Homepage Brand Story Page

Values Grid screenshot

Section Settings

Setting	Type	Default	Description
Heading	`text`	What We Stand For	Section heading
Subtext	`textarea`	—	Subtitle
Columns	`range`	3	Grid columns (2–4)
Card style	`select`	Bordered	Glass, bordered, or minimal
3D tilt on hover	`checkbox`	On	Cards tilt toward the cursor on desktop
Accent colour	`color`	#c8a97e	Number/icon accent colour
Max width	`range`	1200px	Content width (800–1400px)

Content Blocks

Value card — up to 6. Display type (number/icon) + number + icon + heading + description

Tip

Use numbered indicators (01, 02, 03) for a clean editorial feel, or icons for a more visual approach. The glass card style pairs beautifully with dark colour schemes.

Sections — Conversion

Sections focused on driving conversions — stats, contact forms, bundle builders, and promotional bars.

Stats Bar

Conversion

A row of animated counter stats that count up when scrolled into view. Supports prefixes (e.g. $, £), suffixes (e.g. +, %, K), and 4 number sizes. Display horizontally in a row or vertically stacked. Dividers between stats use your accent colour.

How to Add

In the Shopify theme editor, click Add section and search for Stats Bar. It works as a standalone section between other content sections — drop it anywhere on the page where you want to highlight key numbers.

Quick Start

Add Stat blocks — Each stat needs a number, optional prefix/suffix, and a label. For "$1M+" use prefix "$", number "1", suffix "M+"
Choose your layout — Row displays stats horizontally (best for 3–4 stats), Stack arranges them vertically (good for 5–6)
Set stat sizes — Larger sizes (L, XL) command attention for hero stats, smaller (S, M) work for inline placement
Enable dividers — Vertical lines between stats add structure. Set the colour to match your accent

Best Used On

Homepage About Page Landing Pages Above Footer

Section Settings

Setting	Type	Default	Description
Layout	`select`	Row	Row (horizontal) or stack (vertical)
Show dividers	`checkbox`	On	Vertical lines between stats
Divider colour	`color`	#c8a97e	Colour of the divider lines
Max width	`range`	1200px	Content width (600–1400px)

Content Blocks

Stat — up to 6. Number + prefix + suffix + label + size (S/M/L/XL)

Tip

The number field should contain just the target number (e.g. "1824", "40"). Use the prefix and suffix fields for symbols — so "$1M+" would be prefix "$", number "1", suffix "M+".

Contact Form

Conversion

A split-layout contact section with a brand panel on one side (heading, description, image, contact details) and a customisable form on the other. Toggle optional fields for phone, company, subject dropdown, and order number. Subject options are added as blocks — perfect for routing enquiries.

How to Add

Add section → Contact Form. Works best as the main section on a dedicated contact page.

Quick Start

Set up the brand panel — Add your heading, description, and optionally an image, email, phone, and address on the left side
Configure form fields — Toggle on/off phone, company, subject dropdown, and order number fields depending on your needs
Add Subject Option blocks — Each block adds a choice to the subject dropdown (e.g. "General Enquiry", "Wholesale", "Returns"). This helps route enquiries
Customise the button — Set the button text and accent colour. The success message appears after submission
Test the form — Preview the page and submit a test. Responses go to the email configured in Shopify Settings → Notifications

Best Used On

Contact Page Support Page B2B Enquiry Page

Contact Form screenshot

Section Settings

Setting	Type	Default	Description
Heading	`text`	Get in Touch	Brand panel heading
Subtext	`textarea`	(default copy)	Description text below heading
Image	`image_picker`	—	Image for the brand panel
Email address	`text`	hello@example.com	Displayed in the brand panel
Phone number	`text`	—	Optional phone display
Address	`textarea`	—	Physical address
Show phone field	`checkbox`	Off	Add a phone number input to the form
Show company field	`checkbox`	Off	Add a company name input
Show subject dropdown	`checkbox`	On	Subject select populated by blocks
Show order number	`checkbox`	Off	Add an order number input
Button text	`text`	Send Message	Submit button label
Success message	`text`	Thanks! We'll be in touch shortly.	Shown after successful submission
Accent colour	`color`	#c8a97e	Button and focus ring colour
Max width	`range`	1100px	Content width (800–1400px)

Content Blocks

Subject option — up to 8. Labels for the subject dropdown (e.g. "General Enquiry", "Wholesale")

Bundle Page

Conversion

A full-page bundle builder where customers pick a set number of products from a curated grid and add the bundle to their cart with an automatic discount. Supports percentage or fixed amount discounts, configurable bundle sizes, and a sticky summary bar showing the current selection and savings.

How to Add

Add section → Bundle Page. For best results, create a dedicated page template that contains only this section for a focused bundle shopping experience.

Quick Start

Select your products — Use the product list picker to choose up to 12 products customers can pick from
Set the bundle size — Choose how many products the customer must select (e.g. "Pick any 3")
Configure the discount — Set a percentage or fixed amount discount. This applies automatically when all slots are filled — no discount codes needed
Customise the CTA — Set button text and highlight colour for the selected state
Adjust the grid — Set desktop and mobile column counts for the product grid

Best Used On

Dedicated Bundle Page Product Landing Page Promotions Page

Bundle Page screenshot

Section Settings

Setting	Type	Default	Description
Heading	`text`	Build Your Box	Page heading
Subtext	`text`	Pick your favourites and save	Subtitle below heading
Products	`product_list`	—	Up to 12 products to choose from
Bundle size	`range`	3	How many products the customer must select (2–8)
Discount type	`select`	Percentage	Percentage or fixed amount discount
Discount value	`range`	15	Discount amount (5–50)
Button text	`text`	Add Bundle to Cart	CTA button label
Columns	`range`	3 / 2	Desktop (2–4) and mobile (1–3) columns
Highlight colour	`color`	#c8a97e	Selected state and discount highlights
Max width	`range`	1200px	Content width (800–1400px)

Tip

Create a dedicated page template with just the Bundle Page section for a focused shopping experience. The discount applies automatically when all slots are filled — no discount codes needed.

Shipping Bar

Conversion

An announcement-style free shipping progress bar that sits in the header or footer. Shows a dynamic message like "You're $35 away from free shipping!" with a configurable threshold. The text automatically updates to a success message when the threshold is met.

How to Add

This section is available in the Header and Footer section groups only. In the theme editor, go to your header or footer group and click Add section → Shipping Bar.

Quick Start

Set your threshold — Enter the amount customers need to spend for free shipping (e.g. $50)
Customise the message — Use the {amount} placeholder in your text, e.g. "You're {amount} away from free shipping!" The amount auto-formats in your store's currency
Set the qualified message — The text shown when the customer qualifies (e.g. "You've qualified for free shipping!")
Choose a colour scheme — Pick a Shopify colour scheme that contrasts with your header for visibility

Best Used On

Header Group Footer Group Above Navigation

Shipping Bar screenshot

Section Settings

Setting	Type	Default	Description
Threshold	`range`	$50	Free shipping threshold ($10–$500)
Progress text	`text`	You're {amount} away from free shipping!	Message shown below threshold. Use {amount} placeholder
Qualified text	`text`	You've qualified for free shipping!	Message shown when threshold is met
Section width	`select`	Full width	Page width or full width
Colour scheme	`color_scheme`	Scheme 1	Shopify colour scheme

Tip

This section is enabled for header and footer groups only. Add it above or below your header for maximum visibility. It uses the {amount} placeholder which automatically formats the remaining amount in the store's currency.

Sections — Social Proof

Showcase customer reviews and testimonials to build trust and credibility.

Review Slider

An auto-playing review carousel with star ratings, customer avatars, dates, and navigation arrows. Supports up to 12 reviews and shows 1–4 cards at a time (auto-scales to 1 on mobile). Cards come in elevated, outlined, or flat styles. Features staggered scroll-entry animation and configurable auto-play speed.

How to Add

In the Shopify theme editor, navigate to the page where you want reviews to appear. Click Add section and search for Review Slider — it appears under the Horizon Pro section group. It works on any page template, so you can add it to your homepage, product pages, or dedicated testimonials page.

Quick Start

Add Review blocks — Click into the section and add individual Review blocks from the left panel. Aim for 6 or more reviews so the carousel has enough content to loop smoothly without gaps.
Fill in each review — Set the star rating (1–5), reviewer name, review text, and optionally a date and avatar image. Real customer names and specific feedback build the most trust.
Choose how many cards to show — 3 cards at a time is the sweet spot for most layouts. The slider automatically drops to 1 card on mobile regardless of this setting.
Enable auto-play — Set a comfortable speed of 4000–5000ms (4–5 seconds) so visitors can read each review before it transitions. Navigation arrows are always available for manual browsing.
Pick your card style — "Elevated" adds a shadow for depth, "Outlined" uses a clean border, and "Flat" removes all decoration for a minimal look.

Best Used On

Homepage Product Pages Landing Pages

Section Settings

Setting	Type	Default	Description
Heading	`text`	What Our Customers Say	Section heading
Subtext	`text`	—	Subtitle below heading
Cards visible	`range`	3	Number of cards shown at once (1–4). 1 on mobile regardless
Auto-play	`checkbox`	On	Automatically cycle through reviews
Auto-play speed	`range`	4000ms	Time between slides (2000–8000ms)
Card style	`select`	Elevated	Elevated (shadow), outlined (border), or flat
Star colour	`color`	#c8a97e	Colour of the rating stars
Show avatars	`checkbox`	On	Display reviewer avatar images
Show dates	`checkbox`	On	Display review dates
Scroll entry animation	`checkbox`	On	Cards stagger fade up when scrolled into view
Content max width	`range`	1200px	Content width (800–1400px)

Content Blocks

Review — up to 12. Star rating (1–5) + review text + reviewer name + date + avatar image

Tip

For the best visual balance, aim for 6+ reviews so the carousel has enough content to loop smoothly. If you use avatars, keep them consistent — either use them for all reviews or none.

Sections — Effects

Animated and interactive sections that add visual flair and motion to your pages.

Infinite Marquee

Effect

A CSS-only infinite scrolling text ticker. Add up to 10 text items that scroll horizontally in a continuous loop. Fully customisable typography with font size, weight, transform, letter spacing, and opacity controls. Choose from 6 separator styles between items and configure scroll speed and direction.

How to Add

In the Shopify theme editor, navigate to the page where you want the marquee. Click Add section and search for Infinite Marquee — it appears under the Horizon Pro section group. Drag it into position between other sections. It works especially well as a visual break between content-heavy sections.

Quick Start

Add Text Item blocks — Click into the section and add your phrases as individual Text Item blocks. Short, punchy phrases work best — "Free Shipping", "100% Natural", "Award Winning", "Handmade in the UK".
Choose a separator style — Dot and Diamond work well between short phrases, Pipe suits a more structured look, and Star adds a decorative touch. Set to "None" if you prefer clean spacing.
Set font size and weight — Match your brand tone. A large, bold marquee (48–72px, semi-bold) makes a strong statement; a smaller, lighter one (18–24px, light weight) feels subtle and editorial.
Adjust the speed — The default 40s is a comfortable pace for most stores. Lower the value for faster scrolling (energetic feel), raise it for a slower, more relaxed movement.
Dial in text opacity — Lower opacity (40–60%) creates an understated, sophisticated background texture. Full opacity (100%) makes the marquee a bold, attention-grabbing element.

Best Used On

Homepage Between Sections Above Footer Product Pages

Section Settings

Animation

Setting	Type	Default	Description
Speed	`range`	40s	Duration in seconds — higher values scroll slower (10–120s)
Direction	`select`	Left	Scroll direction — left or right
Pause on hover	`checkbox`	On	Marquee pauses when the user hovers over it

Separator

Setting	Type	Default	Description
Separator	`select`	Dot	Character between items — Dot, Dash, Pipe, Star, Diamond, or None

Typography

Setting	Type	Default	Description
Font size	`range`	24px	Text size (12–72px)
Font weight	`select`	Light (300)	300 to 700
Text transform	`select`	Uppercase	None, uppercase, or lowercase
Letter spacing	`range`	4px	Space between characters (0–20px)
Text opacity	`range`	60%	How visible the text is (20–100%)

Content Blocks

Text item — up to 10. A text string that repeats in the marquee

Tip

For a subtle, editorial feel, use light weight (300) with high letter spacing and low opacity (40–60%). For a bold statement, increase the font size to 48–72px and use semi-bold or bold weight at full opacity.

Product Blocks

Modular blocks that can be added to any product page — bundle builders, volume discounts, delivery estimates, reviews, subscriptions, and trust signals.

Bundle Builder

Product Block

A full in-page bundle builder where customers pick products from a curated collection and add them to the cart with an automatic discount. Supports percentage or fixed amount discounts, configurable bundle sizes (2–6 products), and a primary or secondary button style. The product grid is responsive with separate desktop and mobile column controls.

How to Add

In the Shopify theme editor, navigate to your product page template. Click on the main product section, then click Add block and search for Bundle Builder. It renders below the product details.

Quick Start

Select a collection — Choose the collection containing products customers can bundle with this product
Set the bundle size — How many products must be selected (2–6). "Pick any 3" bundles are most popular
Configure the discount — Set a percentage or fixed discount that applies when the bundle is complete
Style the button — Choose primary (filled) or secondary (outlined) style, and set your highlight colour
Adjust the grid — Set column counts for desktop and mobile to control product card layout

Best Used On

Product Pages Featured Product Sections

Bundle Builder screenshot

Block Settings

Content

Setting	Type	Default	Description
Heading	`text`	Build Your Box	Bundle section heading
Subtext	`text`	Pick any 3 bottles and save	Subtitle below heading
Collection	`collection`	—	Collection to pull products from

Bundle Settings

Setting	Type	Default	Description
Bundle size	`range`	3	Number of products the customer must select (2–6)
Discount type	`select`	Percentage	Percentage or fixed amount discount
Discount value	`range`	15	Discount amount (5–50)

Button & Grid

Setting	Type	Default	Description
Button text	`text`	Add Bundle to Cart	CTA button label
Button style	`select`	Primary	Primary (filled) or secondary (outlined)
Columns (desktop)	`range`	3	Product grid columns on desktop (2–4)
Columns (mobile)	`range`	2	Product grid columns on mobile (1–3)
Highlight colour	`color`	#c8a97e	Selected state and discount highlights

Tip

Unlike the standalone Bundle Page section, this block is designed to be added to an existing product page. It pulls products from a collection rather than a manual product list, making it easier to maintain as your catalogue changes.

Buy More Save More

Product Block

A tiered volume discount block that shows 2 or 3 pricing tiers. Each tier has a quantity, label, and discount percentage. The active tier highlights based on the current quantity selected. A "Best Value" badge draws attention to the highest tier. Ideal for encouraging multi-unit purchases.

How to Add

In the product page template, click on the main product section → Add block → Buy More Save More. Position it near the quantity selector for maximum impact.

Quick Start

Set up tier 1 — This is typically the single-unit price. Set quantity to 1 and discount to 0% to show the base price
Configure tier 2 — Set a higher quantity (e.g. 2) with a discount (e.g. 10%). Add a descriptive label like "2 Bottles"
Enable tier 3 for best value — The third tier gets the "Best Value" badge automatically. Set the highest discount here
Set your highlight colour — The active tier and badge use this colour. Match it to your brand accent
Test the interaction — On the live page, the active tier highlight updates when the customer changes quantity

Best Used On

Product Pages

Block Settings

Setting	Type	Default	Description
Heading	`text`	Buy More, Save More	Block heading
Tier 1 quantity	`range`	1	Minimum quantity for tier 1 (1–10)
Tier 1 label	`text`	1 Bottle	Display label for tier 1
Tier 1 discount	`range`	0%	Discount percentage for tier 1 (0–50%)
Tier 2 quantity	`range`	2	Minimum quantity for tier 2 (1–10)
Tier 2 label	`text`	2 Bottles	Display label for tier 2
Tier 2 discount	`range`	10%	Discount percentage for tier 2 (0–50%)
Show tier 3	`checkbox`	On	Enable a third pricing tier
Tier 3 quantity	`range`	3	Minimum quantity for tier 3 (1–10)
Tier 3 label	`text`	3 Bottles	Display label for tier 3
Tier 3 discount	`range`	15%	Discount percentage for tier 3 (0–50%)
Highlight colour	`color`	#c8a97e	Active tier and badge colour
Badge text	`text`	Best Value	Label shown on the highest discount tier

Tip

Set tier 1 discount to 0% to show the base price as the starting point. The quantity selector on the product page automatically updates the active tier highlight, giving customers immediate visual feedback on their savings.

Delivery Estimate

Product Block

A real-time delivery estimate that calculates shipping dates based on a configurable cutoff hour, processing days, and shipping window. Includes an optional countdown timer showing time remaining to qualify for next-day processing. Dates are displayed as a range (e.g. "Mar 19 – Mar 21") and automatically skip weekends.

How to Add

Product page template → main product section → Add block → Delivery Estimate. Place it near the add-to-cart button.

Quick Start

Set your cutoff hour — Orders placed before this time ship same-day. Default is 2 PM (14:00)
Set processing days — How many business days to process before shipping (0 for same-day, 1 for next-day)
Set shipping window — Minimum and maximum transit days. A range like 3–5 days is typical
Enable the countdown — Shows "Order within X hrs Y min" urgency timer counting down to the cutoff
Customise colours — Set the truck icon colour and urgency countdown colour (red creates urgency)

Best Used On

Product Pages

Block Settings

Timing

Setting	Type	Default	Description
Cutoff hour	`range`	14 (2 PM)	Orders after this hour shift to next-day processing (0–23)
Processing days	`range`	1	Business days to process before shipping (0–5)
Shipping days (min)	`range`	3	Minimum shipping transit time (1–14 days)
Shipping days (max)	`range`	5	Maximum shipping transit time (1–14 days)

Appearance & Content

Setting	Type	Default	Description
Icon colour	`color`	#c8a97e	Truck/delivery icon colour
Urgency colour	`color`	#e85d4a	Countdown timer text colour
Show countdown	`checkbox`	On	Display "Order within X hrs Y min" countdown
Message before	`text`	Order within	Text before the countdown timer
Message after	`text`	get it by	Text before the delivery date range

Tip

The countdown timer creates urgency by showing exactly how much time is left to order before the cutoff. All calculations happen client-side using the customer's local timezone, so the estimates are always accurate regardless of where they're browsing from.

Review Stars

Product Block

A star rating display with review count. The rating is set as a whole number divided by 10 (e.g. 48 = 4.8 stars), supporting half-star precision. Features an optional wave animation on the stars and a scroll-triggered entrance effect. Choose between showing the rating + count, count only, or rating only.

How to Add

Product page template → main product section → Add block → Review Stars. Best positioned above the price or below the product title.

Quick Start

Set the rating — Enter a value from 0–50 (divide by 10 for display). For example, 48 = 4.8 stars, 45 = 4.5 stars
Enter the review count — The number displayed next to the stars (e.g. "127 reviews")
Choose the display format — "Rating and count" shows both, "Count only" shows just the number, "Rating only" shows just stars
Set star colours — Filled star colour and empty star colour for the remaining stars
Enable animations — Wave animation makes stars shimmer on load, scroll animation fades the block in when scrolled into view

Best Used On

Product Pages Featured Product Sections

Block Settings

Setting	Type	Default	Description
Rating	`range`	48 (4.8 stars)	Star rating value — divide by 10 for display (0–50)
Review count	`number`	127	Number of reviews to display
Star colour	`color`	#c8a97e	Filled star colour
Empty star colour	`color`	#e0e0e0	Unfilled star colour
Text format	`select`	Rating and count	Show rating + count, count only, or rating only
Wave animation	`checkbox`	On	Stars animate with a wave effect on load
Scroll animation	`checkbox`	On	Block animates in when scrolled into view

Tip

The rating value uses a 0–50 scale for precision. For example: 50 = 5.0 stars, 45 = 4.5 stars, 48 = 4.8 stars. This gives you half-star granularity without needing decimal inputs in the theme editor.

Subscribe & Save

Product Block

A toggle between one-time purchase and subscription options. When the product has selling plans configured in Shopify, the block automatically pulls in the real subscription data. For products without selling plans, a demo mode renders a visual preview with configurable discount and frequency options — useful for design previews or coming-soon subscriptions.

How to Add

Product page template → main product section → Add block → Subscribe & Save. Position it near the add-to-cart area.

Quick Start

Check for selling plans — If your product has selling plans configured via a subscriptions app (like Recharge or Shopify Subscriptions), the block automatically uses real data
No selling plans? Use demo mode — For products without subscriptions, the block shows a visual preview with configurable discount and frequencies. Great for design previews
Set labels — Customise "Subscribe & Save" and "One-time purchase" labels to match your brand voice
Choose the default — Decide whether one-time or subscription is selected by default
Set the badge colour — The discount percentage badge uses this colour

Best Used On

Product Pages (Consumable/Replenishable Products)

Block Settings

Labels

Setting	Type	Default	Description
Heading	`text`	—	Optional heading above the purchase options
Subscribe label	`text`	Subscribe & Save	Label for the subscription option
One-time label	`text`	One-time purchase	Label for the one-time option
Default selected	`select`	One-time	Which option is selected by default
Badge colour	`color`	#c8a97e	Discount badge colour

Demo Mode

Setting	Type	Default	Description
Demo discount	`range`	15%	Preview discount percentage (5–50%)
Demo frequency 1	`text`	Every 2 weeks	First frequency option in demo mode
Demo frequency 2	`text`	Every month	Second frequency option in demo mode
Demo frequency 3	`text`	Every 2 months	Third frequency option in demo mode

Tip

Demo mode only activates when the product has no selling plans configured in Shopify. Once you set up real selling plans through a subscriptions app, the block automatically switches to displaying the actual subscription options and discounts.

Trust Badges

Product Block

A row or grid of trust signal badges with icons and labels. Choose from 8 built-in SVG icons (shipping, returns, lock, award, leaf, heart, clock, check) for up to 4 badges. Display them in a horizontal row or 2x2 grid layout. The fourth badge is optional for layouts where 3 badges look better.

How to Add

Product page template → main product section → Add block → Trust Badges. Place it below the add-to-cart button for reassurance at the point of purchase.

Quick Start

Choose your badges — Pick from 8 built-in icons: shipping, returns, lock, award, leaf, heart, clock, check. Match them to your selling points
Write concise labels — Keep badge text short (2–3 words): "Free Shipping", "30-Day Returns", "Secure Checkout"
Choose the layout — Row for horizontal display (3 badges), grid (2x2) for 4 badges
Set icon colour — Match to your brand accent colour for consistency
Toggle badge 4 — Use 3 badges for a clean row, or enable the 4th for grid layout

Best Used On

Product Pages Cart Page

Block Settings

Badge Content

Setting	Type	Default	Description
Heading	`text`	—	Optional small heading above badges
Badge 1 icon	`select`	Shipping	8 options: shipping, returns, lock, award, leaf, heart, clock, check
Badge 1 text	`text`	Free Shipping	Label for badge 1
Badge 2 icon	`select`	Returns	Same 8 icon options
Badge 2 text	`text`	30-Day Returns	Label for badge 2
Badge 3 icon	`select`	Lock	Same 8 icon options
Badge 3 text	`text`	Secure Checkout	Label for badge 3
Show badge 4	`checkbox`	On	Enable a fourth badge
Badge 4 icon	`select`	Award	Same 8 icon options
Badge 4 text	`text`	Award Winning	Label for badge 4

Appearance

Setting	Type	Default	Description
Icon colour	`color`	#c8a97e	Colour of the badge icons
Text colour	`color`	—	Leave blank to inherit from theme
Layout	`select`	Row	Horizontal row or 2x2 grid
Icon size	`range`	20px	Icon dimensions (16–32px)

Tip

For a clean product page, use the row layout with 3 badges. The grid layout works better when you have 4 badges and want a more compact display. All icons are inline SVGs — no external files to load, so they render instantly and inherit your colour settings.

Theme Settings

Global settings that apply across your entire store — visual effects, UI enhancements, and product badge customisation. All found in Theme Settings from the Shopify theme editor.

Custom Cursor

Theme Setting

Replace the default browser cursor with a custom animated cursor. Choose from three styles: a minimal dot, a ring that follows the mouse, or a combined dot-ring effect. When magnetic mode is enabled, the cursor visually snaps towards buttons and links, adding a premium interactive feel. The cursor automatically reverts to the native arrow inside modal dialogs (like the cart drawer) for usability.

How to Enable

In the theme editor, click the gear icon (Theme Settings) in the bottom-left corner, then go to Animations. Select a cursor style to enable.

Quick Start

Choose a style — Dot is minimal, ring follows smoothly, dot-ring combines both for maximum effect
Enable magnetic mode — The cursor will visually snap toward buttons and links, adding a premium interactive feel
Preview on desktop — Custom cursors only work on devices with a mouse. Touch devices and cart drawer dialogs automatically revert to the native cursor

Custom Cursor screenshot

Theme Settings (Animations)

Setting	Type	Default	Description
Cursor style	`select`	None	None (default browser), dot, ring, or dot-ring
Magnetic cursor	`checkbox`	On	Cursor magnetically follows buttons and links on hover

Tip

The dot-ring style looks best on dark themes. The ring expands on hover over interactive elements, providing clear visual feedback. Custom cursors are automatically disabled on touch devices and inside the cart drawer dialog.

Dark Mode

Theme Setting

Add a dark/light mode toggle to your store. When enabled, a sun/moon icon appears in the header that lets customers switch colour modes. Optionally auto-detect the visitor's system preference so the store opens in their preferred mode. Uses Shopify's native colour schemes — pick any of your configured schemes as the dark mode palette.

How to Enable

Theme Settings → Colours → Enable dark mode toggle.

Quick Start

Create a dark colour scheme — In Theme Settings → Colours, set up a scheme with dark background and light text (e.g. Scheme 2)
Enable the toggle — Turn on "Enable dark mode toggle" — a sun/moon icon appears in your header
Set auto-detect — When enabled, the store automatically opens in the visitor's OS-preferred mode (dark or light)
Test both modes — Preview your store and click the toggle. Check that all sections look good in both colour modes

Dark Mode screenshot

Theme Settings (Colours)

Setting	Type	Default	Description
Enable dark mode toggle	`checkbox`	Off	Show the colour mode toggle icon in the header
Dark mode scheme	`color_scheme`	Scheme 2	Which Shopify colour scheme to apply in dark mode
Auto-detect preference	`checkbox`	On	Automatically match the visitor's OS dark/light setting

Tip

Set up a dedicated dark colour scheme in Shopify's colour settings (e.g. Scheme 2) with a dark background and light text. Then select it as the dark mode scheme here. The toggle remembers the visitor's choice via localStorage so it persists across pages.

Scroll Progress

Theme Setting

A thin progress bar fixed to the top of the viewport that fills as the visitor scrolls down the page. Great for long-form content like blog posts, product descriptions, and about pages. Choose between using your theme's accent colour or a custom colour, and adjust the bar thickness.

How to Enable

Theme Settings → Animations → Enable scroll progress.

Quick Start

Turn it on — Check "Enable scroll progress" to add a thin bar at the very top of the viewport
Choose a colour — Use your theme accent colour or set a custom one that contrasts with your header
Adjust thickness — 3px (default) is subtle. Go to 4-5px for more visibility on long pages

Scroll Progress screenshot

Theme Settings (Animations)

Setting	Type	Default	Description
Enable scroll progress	`checkbox`	Off	Show the scroll progress bar
Colour source	`select`	Accent	Use theme accent colour or a custom colour
Custom colour	`color`	#000000	Progress bar colour (only when source is "Custom")
Height	`range`	3px	Bar thickness (2–6px)

Tip

The progress bar renders above the header with a high z-index so it's always visible. It uses CSS transforms for smooth 60fps performance. On very short pages where no scrolling is needed, the bar won't appear.

Back to Top

Theme Setting

A floating scroll-to-top button that appears after the visitor scrolls past a configurable offset. Choose between circle or rounded square shapes, position it on the left or right side, and control its size, distance from edges, colours, and opacity. Can be hidden on mobile for a cleaner small-screen experience.

How to Enable

Theme Settings → Animations → Enable back to top.

Quick Start

Enable the button — Turn on "Enable back to top" to add a floating scroll-to-top button
Set the scroll offset — How far down the visitor scrolls before the button appears (400px default, lower for long pages)
Choose style and position — Circle or rounded square, positioned on the left or right side
Set your colours — Match the background and icon colours to your brand. Reduce opacity to 60-80% for a subtle look
Consider mobile — Enable "Hide on mobile" if the button conflicts with your mobile navigation or chat widget

Back to Top screenshot

Theme Settings (Animations)

Setting	Type	Default	Description
Enable back to top	`checkbox`	Off	Show the floating scroll-to-top button
Scroll offset	`range`	400px	Scroll distance before button appears (200–1000px)
Button style	`select`	Circle	Circle or rounded square shape
Position	`select`	Right	Left or right side of the screen
Size	`range`	44px	Button diameter/width (32–64px)
Bottom offset	`range`	24px	Distance from the bottom edge (12–80px)
Side offset	`range`	24px	Distance from the left/right edge (12–80px)
Background colour	`color`	—	Button background (inherits from theme if blank)
Icon colour	`color`	—	Arrow icon colour (inherits from theme if blank)
Opacity	`range`	100%	Button opacity (40–100%)
Hide on mobile	`checkbox`	Off	Hide the button on mobile devices

Tip

If you're also using the custom cursor, the back-to-top button is cursor-aware — the magnetic cursor will snap to it. Position it on the right side to avoid conflicting with mobile navigation or chat widgets.

Custom Scrollbar

Theme Setting

Customise the browser scrollbar appearance. Choose from four styles: the browser default, a thin minimal scrollbar, completely hidden (no visible scrollbar), or a fully custom scrollbar with your own thumb colour. Thin and custom styles use CSS scrollbar-width and webkit-scrollbar properties for cross-browser support.

How to Enable

Theme Settings → Page Layout → Scrollbar style.

Quick Start

Choose a style — Thin is the cleanest option for most stores. Hidden removes the scrollbar entirely (pair with scroll progress for usability). Custom lets you set your own thumb colour
Set the thumb colour — Only applies when style is "Custom". Pick a colour that's visible on your background
Preview the result — Scroll a long page to see the scrollbar in action

Custom Scrollbar screenshot

Theme Settings (Page Layout)

Setting	Type	Default	Description
Scrollbar style	`select`	Thin	Default, thin, hidden, or custom
Thumb colour	`color`	#888888	Custom scrollbar thumb colour (only when style is "Custom")

Tip

The "thin" option provides the cleanest look for most stores — it's less intrusive than the browser default but still gives visitors a visual scroll indicator. The "hidden" option removes the scrollbar entirely, which works well for stores with explicit scroll cues or the scroll progress bar enabled.

Film Grain

Theme Setting

A subtle animated noise texture overlay applied to the entire page. Creates a vintage, editorial feel reminiscent of film photography. The grain animates continuously using a CSS-based noise pattern, adding organic texture without impacting performance. Adjust the opacity to control intensity — from barely perceptible to a pronounced film look.

How to Enable

Theme Settings → Page Layout → Enable film grain.

Quick Start

Turn it on — Check "Enable film grain" to add an animated noise overlay to your entire store
Set the opacity — Start with 4% (default) — it's barely perceptible but adds organic texture. Go up to 8-10% for a pronounced vintage look
Check on dark backgrounds — Film grain is more visible on dark backgrounds, so you may want a lower value for dark themes

Film Grain screenshot

Theme Settings (Page Layout)

Setting	Type	Default	Description
Enable film grain	`checkbox`	Off	Show the animated grain overlay
Opacity	`range`	4%	Grain intensity (2–15%)

Tip

Film grain works beautifully with muted, warm-toned stores and editorial aesthetics. Start with the default 4% opacity — it's just enough to add texture without distracting from content. On dark backgrounds the effect is more pronounced, so you may want a lower value for dark themes.

Border Radius Scale

Theme Setting

A global multiplier that scales all border radii across the theme. This single setting transforms the entire feel of your store — from sharp geometric edges to soft rounded corners to full pill shapes. It affects buttons, cards, inputs, images, badges, and all other rounded elements consistently.

How to Enable

Theme Settings → Page Layout → Border radius scale.

Quick Start

Choose your style — Sharp (0) for geometric, modern brands. Default (1) for the standard Horizon look. Pill (2.5) for soft, friendly, rounded everything
Preview key elements — Check how buttons, cards, product images, inputs, and badges look at your chosen scale
Match your brand — Geometric brands (tech, architecture) suit sharp. Lifestyle and wellness brands suit rounded or pill

Border Radius screenshot

Theme Settings (Page Layout)

Setting	Type	Default	Description
Border radius scale	`select`	1 (Default)	Sharp (0) / Soft (0.5) / Default (1) / Rounded (1.5) / Pill (2.5)

Tip

The scale multiplies against the theme's base radius values. "Sharp" (0) gives everything squared-off corners — great for modern, geometric brands. "Pill" (2.5) creates fully rounded buttons and cards for a softer, friendlier feel. "Default" (1) matches the stock Horizon theme radius.

Product Badges

Theme Setting

Enhanced product badges that go beyond Horizon's stock "Sale" badge. Show the actual discount percentage on sale items (e.g. "−20%"), automatically badge recently added products as "New", and create custom badges from product tags. All badges are colour-scheme aware and configurable without touching code.

How to Enable

Theme Settings → Badges section.

Quick Start

Enable discount percentage — Turn on "Show discount percentage" to replace generic "Sale" badges with the actual discount (e.g. "-20%")
Set up "New" badges — Enable "Show New badge" and set how many days a product counts as new (28 days default). Choose a colour scheme for the badge
Create custom tag badges — Enable "Custom tag badge", then add a tag to any product in the format badge:Label Text. For example, badge:Limited Edition shows a "Limited Edition" badge
Choose badge colours — Each badge type can use a different Shopify colour scheme for visual distinction

Product Badges screenshot

Theme Settings (Badges)

Sale Badge

Setting	Type	Default	Description
Show discount percentage	`checkbox`	Off	Replace "Sale" text with the actual discount percentage (e.g. "−20%")

"New" Badge

Setting	Type	Default	Description
Show "New" badge	`checkbox`	Off	Badge products added within the configured time window
Days threshold	`range`	28 days	Products newer than this are badged as "New" (7–84 days)
Colour scheme	`color_scheme`	Scheme 1	Colour scheme for the "New" badge

Custom Tag Badge

Setting	Type	Default	Description
Enable custom tag badge	`checkbox`	Off	Show a badge for products with a specific tag (format: "badge:Label")
Colour scheme	`color_scheme`	Scheme 3	Colour scheme for custom tag badges

Tip

To use custom tag badges, add a tag to your product in the format badge:Label Text. For example, adding the tag badge:Limited Edition will display a "Limited Edition" badge on the product card. Only the first matching badge tag is displayed per product.

Cart Drawer

Enhanced cart drawer features built on top of Horizon's stock side cart — free shipping incentives, product upsells, and a robust update system.

Free Shipping Bar

Cart

A thin progress bar inside the cart drawer that shows how close the customer is to qualifying for free shipping. Supports two goal modes: quantity-based (e.g. "Add 1 more item") or amount-based (e.g. "Add $35.00 more"). Automatically updates on every cart change via Shopify's server-side section rendering.

How to Enable

Theme Settings → Cart section → Enable shipping bar. Note: this only works when your cart type is set to "Drawer".

Quick Start

Enable the bar — Turn on "Enable shipping bar" in cart settings
Choose a goal mode — "Number of items" counts cart items, "Cart total ($)" counts the cart value. Pick whichever matches your shipping policy
Set the threshold — Enter the number of items or dollar amount required for free shipping
Test it — Add items to cart and watch the bar update. It shows a truck icon with remaining text, switching to a checkmark when qualified

Theme Settings (Theme Settings → Cart)

Setting	Type	Default	Description
Enable shipping bar	`checkbox`	On	Show/hide the progress bar (only works when cart type is drawer)
Goal mode	`select`	Quantity	"Number of items" or "Cart total ($)"
Items for free shipping	`range`	2	Number of items needed (2–10). Only shown in quantity mode
Spend for free shipping	`range`	$100	Amount needed ($25–$500, step $5). Only shown in amount mode

Tip

The shipping bar renders between the cart drawer header and the cart items. It shows a truck icon with remaining text, and switches to a checkmark with a success message when the threshold is reached.

Upsell Recommendations

Cart

Shows up to 2 product recommendation cards inside the cart drawer, positioned between the cart items and the summary/checkout area. Products already in the cart are automatically filtered out. The heading changes contextually — "Add one more for free shipping" when below the threshold, or "You might also like" when above it.

How to Enable

Theme Settings → Cart section → Enable cart upsells. Requires cart type to be "Drawer".

Quick Start

Enable upsells — Turn on "Enable cart upsells" to show product recommendations inside the cart drawer
How products are chosen — Products are pulled from your store's catalogue and filtered to exclude items already in the cart
Contextual headings — The heading automatically changes: "Add one more for free shipping" when below the shipping threshold, "You might also like" when above it
Preview the behaviour — Add a product to cart and open the drawer to see upsell cards. Each card has a "+" button that adds the product via AJAX without a page reload

Theme Settings (Theme Settings → Cart)

Setting	Type	Default	Description
Enable cart upsells	`checkbox`	On	Show/hide upsell product cards (only works when cart type is drawer)

Tip

Upsell products are pulled from collections.all and filtered to exclude items already in the cart. Each card shows a 52x52 product image, truncated title, price, and a "+" add button that uses AJAX to add the product without a page reload.

How Cart Updates Work

Cart

Horizon Pro includes a custom cart update system (morph interceptor) that fixes a known issue with the stock Horizon cart drawer. Without it, Horizon's full DOM morph on cart updates could corrupt the header navigation styling. The interceptor uses targeted hydration — only updating specific cart elements while leaving the header and navigation untouched.

Do I Need to Configure This?

No — this system is fully automatic. It runs in the background whenever the cart updates, keeping your header navigation intact while ensuring cart contents, the shipping bar, and upsell recommendations refresh correctly. There are no settings to configure.

How It Works

Step	Description
1	Customer adds/removes a product — Shopify fires a `cart:update` event
2	Our capture-phase interceptor catches the event before Horizon's stock handler
3	Stock full-DOM morph is prevented via `stopImmediatePropagation()`
4	Only elements with `[data-hydration-key]` attributes are updated (cart items, shipping bar, upsells, summary)
5	Cart icon count badge is updated separately
6	Cart drawer opens automatically if the "Add to cart opens drawer" setting is enabled

Tip

This system is fully automatic — no configuration needed. It also ensures that the custom cursor (if enabled) behaves correctly inside the cart drawer by detecting dialog open/close states and restoring native cursors inside the drawer.

Updates & Licensing

Keep your theme up to date with one-click updates, and understand your license options.

One-Click Updates

Horizon Pro includes a companion app — Horizon Pro Manager — that handles theme updates directly from your Shopify admin. When a new version is available, the app shows the update with a changelog, and you can apply it with a single click.

One-Click Updates screenshot

Before You Update

Duplicate your theme — Go to Online Store → Themes and create a backup copy before updating, just in case
Check the changelog — Review what's changed in the new version. The app shows release notes for each update
Click Update — The app pushes only Horizon Pro's code files. Your theme settings, template configurations, and custom code are never touched
Preview after updating — Open your theme preview to confirm everything looks good before publishing

How Updates Work

Step	Description
1	Open the Horizon Pro Manager app from your Shopify admin
2	Navigate to the Updates page
3	If an update is available, you'll see the version number and what's changed
4	Click Update Theme — the app pushes only the changed files to your theme
5	Your customisations (template JSON, settings, etc.) are preserved — only Horizon Pro's code files are updated

Tip

Updates only modify Horizon Pro's custom section, snippet, and asset files. Your theme settings, template configurations, page content, and any custom code you've added are never touched. It's always a good idea to duplicate your theme before updating as a safety net.

License Types

Horizon Pro is available with two license options — both include lifetime updates and the full feature set.

How to Choose

The Single Store license is perfect if you're using Horizon Pro on one Shopify store. The Unlimited Stores license is ideal for agencies, freelancers, or anyone managing multiple client stores — activate the same key on as many stores as you need.

Feature	Single Store ($249)	Unlimited Stores ($499)
Number of stores	1 store	Unlimited stores
Theme updates	Lifetime	Lifetime
Priority support	6 months	12 months
All sections & blocks	Included	Included
Cart enhancements	Included	Included
Theme settings	Included	Included
One-click updates	Included	Included
Transferable	Yes (deactivate first)	Yes (no limit)

Tip

The Unlimited Stores license is ideal for agencies and developers working on multiple client stores. You can activate the same key on any number of stores simultaneously.

Version History

A record of all Horizon Pro releases and what's included in each version.

v1.0.0 — March 2026 (Initial Release)

Category	Count	Items
Custom Sections	17	Page Hero, About Hero, Split Story, Editorial Reveal, Sticky Steps, Story Timeline, Gallery, Big Quote, Magnetic Card, Team, Values, Stats Bar, Contact Form, Bundle Page, Shipping Bar, Review Slider, Infinite Marquee
Product Blocks	6	Bundle Builder, Buy More Save More, Delivery Estimate, Review Stars, Subscribe & Save, Trust Badges
Theme Settings	36	Custom Cursor, Dark Mode, Scroll Progress, Back-to-Top, Custom Scrollbar, Film Grain, Border Radius, Product Badges
Cart Enhancements	4	Free Shipping Bar, Upsell Recommendations, Morph-Safe Update System, Cursor Dialog Awareness
JavaScript Features	11	Custom Cursor, Film Grain, Scroll Progress, Dark Mode Toggle, Magnetic Buttons, Parallax, Back-to-Top, Custom Scrollbar, Ken Burns, Product Spin, Review Slider

Your cart is empty

Horizon Pro. Documentation

Getting Started

Installation

License Activation

Theme Setup

Sections — Heroes

Page Hero

About Hero

Sections — Content

Split Story

Editorial Reveal

Sticky Steps

Story Timeline

Gallery

Big Quote

Magnetic Card

Team

Values

Sections — Conversion

Stats Bar

Contact Form

Bundle Page

Shipping Bar

Sections — Social Proof

Review Slider

Sections — Effects

Infinite Marquee

Product Blocks

Bundle Builder

Buy More Save More

Delivery Estimate

Review Stars

Subscribe & Save

Trust Badges

Theme Settings

Custom Cursor

Dark Mode

Scroll Progress

Back to Top

Custom Scrollbar

Film Grain

Border Radius Scale

Product Badges

Cart Drawer

Free Shipping Bar

Upsell Recommendations

How Cart Updates Work

Updates & Licensing

One-Click Updates

License Types

Version History