Choose and configure SAISON hero sections by page goal, media strength, mobile crop, overlay contrast, and call-to-action priority.
Hero sections create the first impression, but the common setup issues usually come from the same settings: media crop, text contrast, section height, mobile stacking, and button priority. Start with your page goal before changing visual controls.
The image or video customers see in the hero on desktop and phone screens.
The desktop crop loses the subject on phones.
Upload dedicated mobile media for all first-screen heroes.
Trying to solve every crop problem with position settings after using the wrong image.
The vertical space the hero takes before the next section appears.
The hero feels too shallow or traps too much first-screen space.
Use viewport-style height for launch/campaign pages and shorter heights for utility pages.
Using a full-screen hero on contact, FAQ, or policy pages where customers need answers quickly.
Where the heading, copy, and buttons sit on top of or beside the hero media.
Text covers a face, product, logo, or important detail.
Place content in the quietest area of the image and retest at mobile width.
Centering text by default over busy photography.
A tinted layer placed over media to make text and buttons readable.
Heading or buttons are hard to read over media.
Add just enough overlay for contrast, usually 20-45%.
Increasing heading size instead of fixing contrast.
The main and optional supporting actions shown inside the hero.
The hero has more than one possible action.
Use one primary CTA. Add a secondary CTA only when both paths are useful.
Using equal button styles for actions that are not equally important.
How hero media, copy, panels, and buttons reorder on small screens.
Split or multi-card heroes become crowded on phones.
Choose mobile behavior before polishing desktop spacing.
Assuming desktop split composition will translate to mobile.
The speed and trigger for hero animations, reveals, or scroll effects.
The hero uses sequential, shrink, or visual effects.
Keep motion short enough that shopping paths appear quickly.
Making customers wait for the CTA to become clear.
| Setting | Location | Recommended | Notes |
|---|---|---|---|
| Homepage hero | Split hero or Hero banner | One clear collection/campaign path with mobile-specific media | The homepage hero should tell customers where to go next, not explain the whole brand. |
| Campaign hero | Hero banner, Hero shrink reveal, or Hero sequential reveal | Large media, short headline, one campaign CTA | Use motion only when it reinforces the campaign story. |
| Collection intro | Hero banner or Image text grid collection header | Shorter height with direct shop path | Do not push products too far below the fold on collection pages. |
| About page hero | About hero | Specific brand statement plus authentic image | This section should create trust, not read like placeholder marketing copy. |
| Support/contact hero | Contact page hero | Compact height and practical copy | Customers on support pages are usually trying to complete a task. |