Hero
The hero section is usually the first thing shoppers see. Get this right and the rest of the homepage does its job better.
Add a hero
Open the theme editor for your homepage
Add section → Hero
If your homepage already has a hero (most Citera themes come pre-loaded with one), click it in the left panel to edit.
Upload the hero image
Click Image → Select image. Best practices:
- Landscape orientation (2400×1200 minimum)
- Keep the focal subject away from where text will overlay
- Compress before uploading — a heavy hero image slows every visit
Write your headline
The Heading is your main message. Keep it short: 5–7 words on mobile, maybe 10 on desktop.
Good: “Handmade in small batches” Bad: “Welcome to our online store where we sell handmade products”
Write a subheading
One line under the heading — a supporting phrase. Skip this if the heading is strong enough alone.
Set your primary CTA
Button label — the button text (e.g. “Shop now”, “See the collection”). Button link — the destination.
Set a secondary CTA (optional)
Some brands work well with two CTAs — one for shoppers ready to buy, one for those still exploring. Example: “Shop skincare” + “Read our story”.
Save
Layout options
The hero has a few layout modes:
Click the Hero section
Find Layout
Options:
- Text overlay — the image fills the section, text sits on top with an optional dim overlay
- Text next to image — image on one side, text panel on the other (works well for busy product photos)
- Text below image — the image sits at the top, text below (best for editorial content and photos with no safe overlay zone)
Mobile behavior
On phones, hero images automatically stack — the image is at the top, text below — even if you chose “Text overlay” for desktop. This is because overlays on phone-cropped images almost always look bad. You can’t override this — it’s an intentional design choice.
Upload a separate mobile image. If you want the phone version to be different (say, a portrait crop instead of a landscape), click the Hero → find Mobile image and upload the phone version. Otherwise the desktop image is used.
Overlay opacity
If your image is busy and text is hard to read:
Click the Hero section
Find Overlay opacity
Slider from 0 (no overlay) to 100 (opaque black). Common values:
20— subtle darkening40— noticeable, most common60— heavy, reserved for very busy images
Heading size
Click the Hero section
Find Heading size
Options: Small, Medium (default), Large, XL. Bigger sizes work for shorter headings; longer headings need Small or Medium to avoid wrapping into multiple lines on mobile.
Color scheme
The hero uses a color scheme like any section. Since it’s usually at the top of the page, the scheme also determines the header’s initial color (if the header sits over the hero image).