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 SetupNew StoresTheme 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 SetupAfter PurchaseStore 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 SetupBrand RefreshNew 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.
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 PagesAbout PageContact PageCampaign 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 PageStory PageTeam 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 PageBrand Story PageHomepageProduct 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 PageBrand Philosophy PageHomepageCampaign 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 PagesHow It Works PagesProcess PagesHomepage
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 PageCompany HistoryBrand 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 PageBehind the ScenesLookbookPortfolio 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 PageHomepageBrand StoryTestimonial 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
HomepageLanding PagesAbout PageCampaign 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 PageTeam PageCompany 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 PageHomepageBrand 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
HomepageAbout PageLanding PagesAbove 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 PageSupport PageB2B 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
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 GroupFooter GroupAbove 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
Social Proof
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
HomepageProduct PagesLanding 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
HomepageBetween SectionsAbove FooterProduct 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 PagesFeatured 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 PagesFeatured 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
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.
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.
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
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
