Add Overlay Effect for Hero Banner

The final result will perform like this:

Custom Overlay For A Single Hero Banner

Step 01 - Add a new hero banner:

  • Drag and drop the Hero Banner into the page.
  • Upload your own image or choose one from Gallery
  • Add an Extra Class Name: "gem-custom-hero-banner" (We'll refer to this class later in our custom code).

 

Step 02 - Use a row as overlay:

  • Drag and drop a Row inside the Hero Banner.
  • Add an Extra Class Name: "gem-custom-hero-banner-overlay".
  • Increase Row's padding top & padding bottom to a large number (e.g: 200px)
  • Change Row's background color to a desired color (e.g: #F3B4AF)
  • Decrease Hero Banner's padding-top & padding-bottom to zero. Now the nested Row will cover 100% its area

 

Step 03 - Design the Row Overlay:

  • Think of the Row Overlay as any other Row. You can divide it into columns or drag and drop anything inside it. The only limit is your imagination!
  • In this tutorial, we'll create a Heading and a Text Block as sub-heading:

 

Step 04 - Use the Liquid module to control the hover effect:

  • Drag and drop a Liquid module into your page
  • Right-click on its label, choose Edit HTML / Liquid and remove all the code inside.
  • Right-click on the label again, choose Edit CSS and add the following code at the bottom:
[data-label="Hero Banner"] > .gem-custom-hero-banner .gem-custom-hero-banner-overlay{ 
transition: all 0.5s ease !important;
opacity: 0 !important;
}
[data-label="Hero Banner"]:hover > .gem-custom-hero-banner .gem-custom-hero-banner-overlay{
opacity: 1 !important;
}

 

(Note: Both classes we added to the Hero Banner and Row in the previous steps are referred in this code)

 

 

Step 05 - Save and preview the page. The result should look like this:

 

Make It Global

You also can apply this effect for all Hero Banners without adding Liquid codes at step 04 - Part I

 

Step 01- From your Shopify admin, go to Online Store > Themes > Actions > Edit Code

 

 

Step 02 - Search for the theme.liquid file. Click on the file to open it in the editor.

 

 

Step 03 - Scroll down and locate this snippet:

 

{% include 'gem-app-header-scripts' %}


After this snippet, paste the following code:

 

<style> 
[data-label="Hero Banner"] > .gem-custom-hero-banner 
.gem-custom-hero-banner-overlay{ 
transition: all 0.5s ease !important; 
opacity: 0 !important; 
} 
[data-label="Hero Banner"]:hover > .gem-custom-hero-banner 
.gem-custom-hero-banner-overlay{ 
opacity: 1 !important; 
} 
<style> 

 

(Note: The part nested inside <style> tag is the same as the one we've used in part I)

 

 

Step 04 - Click Save to save your changes.

 

From now on for any pages, repeat all steps in Part I (without creating Liquid module) to create a hero banner with custom overlay.

 

Was this helpful?