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.