Production Shopify · Campaign heroes
Ship campaign heroes merchants can refresh without a deploy
Homepage campaign heroes are not content pages and not product grids. This guide is about full-width landing sections merchants refresh every season—headline, CTA, hero image with overlay—without touching Liquid or waiting for development cycles.
Production implementation guide · Updated 2026-08-03
When to use flat settings instead of blocks for campaign heroes
Campaign hero sections typically need one headline, one subheadline, one CTA, and one large image with optional overlay. Blocks introduce unnecessary complexity when content operators will never need multiple instances. Flat section settings keep the editor surface focused on the campaign message.
Flat section settings
- Single headline + CTA + background image per section instance
- Settings appear as one form—no add/remove block UI
- Preset gives complete campaign scaffold in one click
- Mobile and desktop media separate when aspect ratios diverge
Block-based heroes
- Useful for multi-slide carousels (not covered here)
- Overkill when campaign always ships one message
- Adds remove-block risk that can break homepage
- Requires defensive empty-state handling
Overlay and text contrast for hero sections
Campaign photography is chosen for brand impact, not text legibility. Overlay gradients or color washes ensure heading and CTA remain readable regardless of image content. Expose overlay opacity and color as section settings so merchants can adapt per campaign without touching CSS.
Do not hardcode overlay in the stylesheet. Each campaign has different contrast needs—summer beach photography vs dark product shots.
Overlay pattern (setting-driven opacity and color)
<div class="hero" style="background-image: url('{{ section.settings.image | image_url }}')">
<div
class="hero__overlay"
style="
background-color: {{ section.settings.overlay_color }};
opacity: {{ section.settings.overlay_opacity | divided_by: 100.0 }};
"
></div>
<div class="hero__content">
<h1 class="hero__heading">{{ section.settings.heading | escape }}</h1>
<p class="hero__subheading">{{ section.settings.subheading | escape }}</p>
<a href="{{ section.settings.cta_url }}" class="hero__cta">
{{ section.settings.cta_text | escape }}
</a>
</div>
</div>Overlay sits between background and content. Inline styles from settings avoid !important fights in seasonal CSS.
Mobile media strategy: separate source vs CSS crop
Desktop campaign images are often 21:9 or wider. Mobile viewports are portrait. CSS object-fit can crop, but merchants often need different framing—showing the product on mobile, showing the scene on desktop. Provide separate mobile_image setting when crop alone cannot deliver the campaign message.
Document which strategy the section uses. Merchants should not guess whether uploading a mobile image will replace or supplement the desktop source.
- Same image, different crop (object-fit/object-position): acceptable when subject stays centered and recognizable.
- Separate mobile image: required when desktop composition loses meaning in portrait crop.
- Art direction via picture element: ideal for serving optimal resolution and framing per viewport.
- Setting mobile_image_enable checkbox: lets merchants choose per campaign.
Do not force one strategy. Campaign photography varies.
Scope hero styles to section ID so other heroes coexist
Themes often have multiple hero variants—homepage campaign, collection landing, about page. Namespace hero CSS under #shopify-section-{{ section.id }} so one hero's overlay or typography does not leak into another template.
Use section-specific class prefixes (.campaign-hero) even inside the scoped block for clarity in browser DevTools.
Scoped stylesheet pattern
{% stylesheet %}
#shopify-section-{{ section.id }} .campaign-hero {
position: relative;
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
}
#shopify-section-{{ section.id }} .campaign-hero__overlay {
position: absolute;
inset: 0;
pointer-events: none;
}
#shopify-section-{{ section.id }} .campaign-hero__content {
position: relative;
z-index: 1;
max-width: 48rem;
text-align: center;
padding: 2rem;
}
{% endstylesheet %}Section.id makes every instance isolated. Multiple campaign heroes on staging templates will not collide.
Presets that accelerate campaign launches
Campaign teams ship heroes under tight deadlines. Preset should include realistic headline, subheading, CTA text, and a placeholder image that demonstrates the expected aspect ratio. Do not ship an empty preset or Lorem Ipsum—merchants need to see the section structure immediately.
Preset name should say 'Campaign hero' or 'Homepage hero'—not 'Hero section' or 'Banner'. Clarity prevents accidental use on wrong templates.
Campaign hero preset (realistic scaffold)
{
"name": "Campaign hero",
"settings": [
{ "type": "image_picker", "id": "image", "label": "Desktop image" },
{ "type": "image_picker", "id": "mobile_image", "label": "Mobile image (optional)" },
{ "type": "text", "id": "heading", "label": "Headline", "default": "New collection available now" },
{ "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Explore seasonal essentials designed for comfort and style." },
{ "type": "url", "id": "cta_url", "label": "CTA link", "default": "/collections/all" },
{ "type": "text", "id": "cta_text", "label": "CTA button text", "default": "Shop now" },
{ "type": "color", "id": "overlay_color", "label": "Overlay color", "default": "#000000" },
{ "type": "range", "id": "overlay_opacity", "label": "Overlay opacity", "min": 0, "max": 100, "step": 5, "default": 40, "unit": "%" }
],
"presets": [
{
"name": "Campaign hero",
"settings": {
"heading": "New collection available now",
"subheading": "Explore seasonal essentials designed for comfort and style.",
"cta_text": "Shop now",
"cta_url": "/collections/all",
"overlay_opacity": 40
}
}
]
}Default copy reads like a real campaign—not instructional placeholder text. Merchants replace it, not decode it.
Production mistakes that make campaigns require engineering
| Symptom | Checks |
|---|---|
| Merchant cannot change overlay darkness | Overlay hardcoded in CSS? Setting exists but has no effect? Important override? |
| Mobile shows white image edge or wrong crop | No mobile_image setting? Object-fit default is wrong? Background-size not cover? |
| CTA button inherits wrong color from theme globals | Hero CTA not scoped? Global button class applied? No section-level override? |
| Headline visible on desktop, cut off on mobile | Absolute positioning without responsive adjustment? Min-height too short? Font-size not clamped? |
Practice a campaign hero section by hand
Build this on a development homepage before using any generator. You should be able to explain why flat settings are better than blocks for single-message campaigns, and how to scope styles so collection heroes are unaffected.
- 01
Create sections/campaign-hero.liquid
Flat settings for heading, subheading, CTA, image, overlay color, and overlay opacity. No blocks.
- 02
Add overlay and content layers
Background image, semi-transparent overlay div, content container with relative z-index. Overlay styles driven by settings, not hardcoded.
- 03
Scope all styles under section ID
Namespace with #shopify-section-{{ section.id }}. Verify by adding a second hero to a different template.
- 04
Implement mobile image strategy
Decide: separate mobile_image source or object-position setting. Test with wide desktop campaign photo.
- 05
Realistic preset
Default heading, subheading, CTA that look like a real campaign—not empty or placeholder.
Use the converter after the campaign structure is locked
If you have static hero HTML from a design comp, the converter can draft the Liquid scaffold faster once you know you need flat settings, overlay strategy, and mobile media handling. The converter does not decide campaign UX architecture for you.
Supporting draft acceleration—not a substitute for campaign section design decisions.
What to study next for campaign landing sections
Continue with adjacent skills. Product grids and FAQ pages are different information architectures—study them when you need those outcomes, not campaign heroes.
Beginner
Understand sections and settings before campaign structure.
- How Shopify sections work
Where index.json sections sit and how merchants reorder them.
- Shopify Liquid for beginners
Read section.settings values and image_url filters.
Intermediate
Settings, presets, and media handling for campaigns.
- Shopify schema guide
Build settings and presets that merchants understand immediately.
- Worked section examples
Implementation patterns and editor UX for settings-driven sections.
- Section design patterns
When to use flat settings vs blocks vs dynamic content.
Advanced
Scale campaigns across templates and themes.
- Ship sections on Dawn
Register sections on JSON templates cleanly.
- Theme design token alignment
Keep custom sections visually native after brand updates.
- Resources hub
Full curriculum for production Shopify section development.
Editorial review
Reviewed by the HTML to Liquid Converter team
Content is reviewed by the HTML to Liquid Converter Shopify development team before publication. Technical accuracy is validated against current Shopify Online Store 2.0 conventions and active client theme work.
Last updated:
Questions or corrections? Contact us.