Sections

Customize the hero

Hero sections are commonly seen on theme Home pages and typically serve welcome visitors and present search and navigation options.

This guide covers how to add content or make layout changes to a hero section as part of branding or customization.

  • <section class="hero bg-cover bg-center bg-home py-9">
      <div class="container">
        <div class="search rounded max-w-md my-4 mx-auto">
          <h2 class="sr-only">
            {{t 'search' }}
          </h2>
          {{search submit=false instant=settings.instant_search class='form-field border rounded bg-white mb-0 transition'}}
          <svg class="search-icon transition" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 12 12" aria-hidden="true">
            <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
            <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
          </svg>
        </div>
      </div>
    </section>

The background image is applied using the .bg-home utility, which references the Home page hero image theme setting. Replace .bg-home with a background color utility like .bg-primary if you’d prefer a full-color background instead.

It’s possible to combine both approaches using a semi-transparent image overlay:

<div class="absolute top-0 left-0 w-full h-full block opacity-75 bg-gray-800 z-0"></div>

The use of .bg-gray-800 means that the underlying image is given a tint of the color gray ($color-gray-800 defined in your theme’s Sass variables). The z-0 z-index utility is applied to the overlay and z-10 to the content container. This ensures that the overlay and background image always appear behind the content of the hero section.

  • <section class="hero bg-cover bg-center bg-home py-9">
      <div class="absolute top-0 left-0 w-full h-full block opacity-75 bg-gray-800 z-0"></div>
      <div class="container z-10">
        <h1 class="text-white text-center font-size-4xl lg:font-size-5xl">
          How can we help?
        </h1>
        <div class="search shadow-lg border-radius max-w-sm my-5 mx-auto md:font-size-xl">
          <h2 class="sr-only">
            {{t 'search' }}
          </h2>
          {{search submit=false instant=settings.instant_search class='form-field border border-radius bg-white p-1 mb-0 transition'}}
          <svg class="search-icon transition ml-5" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 12 12" aria-hidden="true">
            <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"></circle>
            <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"></path>
          </svg>
        </div>
      </div>
    </section>

The example above introduces a custom heading and resizes the search bar. Both changes are accomplished using utilities and can be copied directly into your theme.

The hero section page in our Pattern Library contains additional examples of modified hero sections that you can use straight away or take certain parts from.

Questions or feedback about this guide? Let us know