Create a Stunning Custom Header Section for Shopify with Liquid & CSS

Example

Introduction

A lightweight hero header section designed for Shopify stores to showcase featured products, promotions, or seasonal campaigns. This section includes a full-width background image, a bold title, a supporting subtitle, and a call-to-action button — all optimized for desktop and mobile.

This custom header gives your storefront a modern, premium feel and helps direct customers to your most important collections or campaigns. It’s fully responsive and can be customized with different images and text for different devices.

When to Use This

This custom header section lets you:

• Launch a new collection or product line (e.g., “Spring Collection 2025”).

• Highlight a seasonal campaign (e.g., “Holiday Tea Sale”).

• Replace the default theme banner with a fully customized design.

• Create a conversion-focused landing page section with a direct CTA.

Code (Custom Liquid + CSS)

<style>
  .custom-header-section-2 {
    position: relative;
    overflow: hidden;
  }

  .custom-header-background {
    width: 100%;
    height: 60vh;
    background-image: url('https://images.unsplash.com/photo-1756631996294-9cd16a26b192?q=80&w=1469&auto=format&fit=crop'); /* *Replace background image URL here* */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 0 30px;
  }

  .custom-header-content {
    color: #ffffff;
    max-width: 1000px;
    z-index: 2;
  }

  .custom-header-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #ffffff; /* *Change title color if needed* */
  }

  .custom-header-subtitle {
    font-size: 20px;
    font-weight: 400;
    /* *Change subtitle color if needed* */
  }

  .custom-header-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ffffff; /* *Button background color* */
    color: #000000; /* *Button text color* */
    text-decoration: none;
    border-radius: 8px; /* *Adjust roundness (e.g., 4px, 12px)* */
    font-weight: 600;
    font-size: 16px;
    margin-top: 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .custom-header-button:hover {
    background-color: #f0f0f0; /* *Hover background color* */
    color: #333333; /* *Hover text color* */
  }

  .custom-header-overlap {
    position: relative;
    top: -20vh; /* *Adjust overlap height* */
  }

  @media (max-width: 768px) {
    .custom-header-title {
      font-size: 36px;
    }

    .custom-header-subtitle {
      font-size: 16px;
    }

    .custom-header-background {
      padding: 0 16px;
      background-image: url('https://images.unsplash.com/photo-1757608317604-a124f9930c67?q=80&w=687&auto=format&fit=crop'); /* *Replace mobile background image URL here* */
      background-position: center;
      background-size: cover;
      height: 70vh;
    }

    .custom-header-button {
      font-size: 14px; /* *Mobile button font size* */
      padding: 8px 16px; /* *Mobile button padding* */
    }
  }
</style>

<div class="custom-header-section-2">
  <div class="custom-header-background">
    <div class="custom-header-content">
      <h2 class="custom-header-title">Header Banner Preview</h2> <!-- *Change title text* -->
      <p class="custom-header-subtitle">This is the preview</p> <!-- *Change subtitle text* -->
      <a href="https://google.com" class="custom-header-button">Explore More</a> <!-- *Change button link & text* -->
    </div>
  </div>
</div>

<div class="custom-header-overlap"></div>

Preview

How to Use

• Copy the HTML & CSS code above.

• Paste it into a Custom Liquid section in your Shopify Theme Editor.

• Replace:

  • Images → background-image URL for desktop & mobile.

  • Title → inside <h2 class="custom-header-title">...</h2>.

  • Subtitle → inside <p class="custom-header-subtitle">...</p>.

  • CTA button text & link → inside <a ...>Explore More Teas</a>.

• Adjust font sizes, colors, and spacing in the CSS.

• Save and preview your store.

Customizable Parameters

Parameter	Description	Default	Example Change
background-image	Hero background image	Default tea banner	Replace with seasonal campaign image
height	Section height	60vh (desktop) / 70vh (mobile)	80vh
font-size	Title text size	48px desktop / 36px mobile	56px desktop
border-radius	Button shape	999px (pill)	8px (square button)
Button link	CTA destination	Tea collection	Product page/promotion URL

Pro Tips

• Use high-quality lifestyle images that match your products.

• Add seasonal keywords in your text for SEO (e.g., “Holiday Tea Gifts”).

• Keep titles short (under 6 words) for readability.

• Test different CTAs (e.g., “Shop Now”, “Discover More”, “Limited Time Offer”).

• For A/B testing, try different background images to see which performs best.

This Custom Liquid section is a lightweight, high-converting hero header that any Shopify store owner can implement without advanced coding. It’s perfect for tea, coffee, beverages, or lifestyle stores and can be repurposed for multiple campaigns.