Header inside hero

Store Design
,
1

How to put a header inside a hero? My store is sorrows.store. I am using theme savor

1 Like
2

Hi @sorrows

Could you please send me a proper screenshot of how you want it?

3

@sorrows

:hammer_and_wrench: Method 1: Using Theme Editor (No Code)

If you just want a text header inside the hero banner, the Savor theme supports it natively:

  1. Go to Shopify Admin → Online Store → Themes.

  2. Click Customize on your Savor theme.

  3. In the left sidebar, click on your Hero Banner / Slideshow section (it’s usually called “Image banner” or “Hero” in Savor).

  4. Look for options such as:

    • Heading / Title

    • Subheading / Description

  5. Type your desired header text there (e.g., “Discover Elegance in Every Detail”).

  6. Adjust alignment (center, left, right), font size, and color under the section’s Typography / Text settings.

  7. Save.

:white_check_mark: This will place your header text directly on top of the hero image.

:hammer_and_wrench: Method 2: Adding a Custom Header via Custom Liquid (Code)

If you want a more customized header (like a styled <h1> tag) inside the hero:

  1. Go to Shopify Admin → Online Store → Themes → Customize → Sections.

  2. If the section doesn’t support headings the way you want:

    • Go back to Online Store → Themes → … → Edit Code.

  3. Open Sections → hero-banner.liquid or image-banner.liquid (Savor may name it slightly differently — check under sections/).

  4. Find where the main hero image is rendered. Usually there’s a <div class="hero__content">.

  5. Add your custom header above or below the existing text block. For example:

<div class="hero__content">
  <h1 class="hero-heading">Welcome to Sorrows Store</h1>
  {{ section.settings.text }}
</div>
  1. Save the file.

:artist_palette: Optional Styling (in theme.css)

To adjust font size or color, open Assets → base.css or theme.css and add:

.hero-heading {
  font-size: 3rem;          /* adjust size */
  color: #ffffff;           /* white text for contrast */
  text-align: center;       /* center text */
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3); /* optional shadow for visibility */
}

Save and refresh your store.

:light_bulb: Tips

  • Always keep the main page header as <h1> for SEO — usually your hero headline should be the <h1>.

  • If you’re not comfortable editing Liquid, Method 1 is safer.

  • Before editing code, always duplicate your theme (Online Store → Themes → Actions → Duplicate) to avoid breaking your live store.

Would you like me to show you exactly which section file name to edit if you share a screenshot of your theme’s Sections folder?

4

Hi @sorrows,

Please go to Customize > Sections > Header > Home page > Transparent background.

You just need to enable the option, it will display fine

Screenshot
Screenshot696×1430 59.8 KB

5

Hi @sorrows ,
I noticed you added the slideshow-slide text section to the header. Could you share a bit more about what you’d like it to look like or how you’d like it to work? I’ll be glad to guide you through it.

6

Hey @sorrows ,
I can see the header is already on the Hero Section. Is there any other modifications you required for that then let me know.
Thanks