The Hero is the first thing visitors see. In Neptune, it's built around 6 fixed patterns, each with tunable controls.
#Available patterns
| — | "Pattern" | "Best |
|---|
split | Single product + side image |
centered | Hero copy + CTA |
carousel | Rotating banners |
video | Video background + overlay |
product-grid | 3-6 featured products |
split-feature | Single feature + explainer |
#Settings
| Prop | Type | Default | Description |
|---|
pattern | string | split | One of the 6 patterns |
title_ar | string | — | Title (Arabic) |
title_en | string | — | Title (English) |
subtitle_ar | string | — | Subtitle copy |
ctalabelar | string | Shop now | Button label |
cta_href | string | /products | Button href |
background | image | — | Background image (recommended: 2880×1620) |
video_src | url | — | Background video (mp4 only) |
overlay_opacity | 0-100 | 60 | Black overlay opacity |
#JSON config example
json
{
"pattern": "split",
"title_en": "Summer fashion, your way",
"subtitle_en": "New collection, free shipping above 200 SAR",
"cta_label_en": "Shop now",
"cta_href": "/categories/summer-2026",
"background": "/uploads/hero-summer.jpg",
"overlay_opacity": 50
}
#Code: using Hero in templates
twig
{% include "@neptune/sections/hero.twig" with {
pattern: "split",
title: salla.store.name,
subtitle: "Summer collection",
cta_href: "/categories/summer-2026"
} %}
#Common pitfalls
