Shopify Hero Section

About this module

A Shopify hero section with a background image, dark overlay, headline, subtext and two call-to-action buttons.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-hero, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-hero` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <section class="mh-hero" style="background-image: url('{{ section.settings.image | image_url: width: 2000 }}')">
     <div class="mh-hero-overlay" style="opacity: {{ section.settings.overlay_opacity | divided_by: 100.0 }}"></div>
     <div class="mh-hero-inner">
       {% if section.settings.eyebrow != blank %}
         <span class="mh-eyebrow">{{ section.settings.eyebrow }}</span>
       {% endif %}
       {% if section.settings.heading != blank %}
         <h1 class="mh-hero-title">{{ section.settings.heading }}</h1>
       {% endif %}
       {% if section.settings.subtext != blank %}
         <div class="mh-hero-sub">{{ section.settings.subtext }}</div>
       {% endif %}
       <div class="mh-hero-actions">
         {% if section.settings.primary_button_label != blank %}
           <a href="{{ section.settings.primary_button_link | default: '#' }}" class="mh-btn-primary">
             {{ section.settings.primary_button_label }}
           </a>
         {% endif %}
         {% if section.settings.secondary_button_label != blank %}
           <a href="{{ section.settings.secondary_button_link | default: '#' }}" class="mh-btn-ghost">
             {{ section.settings.secondary_button_label }}
           </a>
         {% endif %}
       </div>
     </div>
   </section>
   
   {% schema %}
   {
     "name": "MH Hero",
     "tag": "section",
     "class": "mh-hero-section",
     "settings": [
       { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "New collection" },
       { "type": "text", "id": "heading", "label": "Heading", "default": "Welcome to our store" },
       { "type": "richtext", "id": "subtext", "label": "Subtext" },
       { "type": "image_picker", "id": "image", "label": "Background image" },
       { "type": "range", "id": "overlay_opacity", "label": "Overlay opacity", "min": 0, "max": 90, "step": 5, "unit": "%", "default": 40 },
       { "type": "text", "id": "primary_button_label", "label": "Primary button label", "default": "Shop now" },
       { "type": "url", "id": "primary_button_link", "label": "Primary button link" },
       { "type": "text", "id": "secondary_button_label", "label": "Secondary button label" },
       { "type": "url", "id": "secondary_button_link", "label": "Secondary button link" }
     ],
     "presets": [{ "name": "MH Hero", "category": "ModuleHarbor" }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.