In the world of web design, creating visually appealing and functional components is essential for engaging users and enhancing their experience. One such component is the multi-image banner section, which allows for the display of multiple images in a dynamic and interactive format. This blog post will delve into a specific implementation of a multi-image banner using Liquid, a templating language commonly used in Shopify themes. We will explore the code that defines the structure, styling, and functionality of this banner, highlighting how it can be customized to fit various design needs while ensuring a responsive layout that adapts to different screen sizes.
Code: https://github.com/ndrishinski/blogs/commit/bdc7c13667d8edb8a4dc967071b9b6c92ed5850a
Prefer video?
Enjoy, otherwise read on!
Create a New Section File
In our theme code editor under the sections we need to create a new file. You can name it whatever you’d like, but I’ll call it ‘amazing-image-banner.liquid’. Once we have our newly created file we can paste in the styles at the top:
<style>
.banner-container {
align-items: center;
background: #e0e0e0;
display: flex;
flex-direction: row;
height: 100%;
justify-content: center;
}
@media screen and (max-width: 800px) {
.banner-container {
flex-direction: column;
}
.banner-container .banner-single-image {
width: 100%;
}
}
.banner-container:hover .banner-single-image {
opacity: 0.5;
}
.banner-container:hover .banner-single-image:hover {
box-shadow: 0px 0px 10px 6px black;
flex: 4 1;
font-size: 20pt;
opacity: 1;
}
.banner-container:hover .banner-single-image:hover .banner-name {
flex: 0 0 60px;
}
.banner-container .banner-single-image {
background: none 50%;
background-size: cover;
box-shadow: 0 0 0 0 black;
display: flex;
flex: 1 1;
flex-direction: column;
font-size: 10pt;
height: 100%;
justify-content: flex-end;
transition: 0.3s;
}
.banner-container .banner-single-image .banner-name {
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
color: white;
display: flex;
flex: 1 1;
justify-content: center;
width: 100%;
transition: 0.3s;
min-height: 500px;
text-decoration: none;
}
.banner-container #deadpool-banner {
/* background-image: url(http://www.hdwallpapers.in/walls/marvel_deadpool_movie-wide.jpg); */
background-image: url({{ section.settings.first-banner-image | image_url }})
}
.banner-container #guardians-banner {
/* background-image: url(https://images7.alphacoders.com/520/thumb-1920-520012.jpg); */
background-image: url({{ section.settings.second-banner-image | image_url }})
}
.banner-container #assassins-banner {
/* background-image: url(https://thesffblog.com/wp-content/uploads/2016/12/960-heres-what-we-think-of-the-upcoming-assassins-creed-movie.jpg); */
background-image: url({{ section.settings.third-banner-image | image_url }})
}
.banner-container #justice-banner {
/* background-image: url(http://www.hdwallpapers.in/walls/justice_league_2017_movie-wide.jpg); */
background-image: url({{ section.settings.fourth-banner-image | image_url }})
}
a {
text-decoration: none;
}
</style>The main thing to notice here is our ‘background-image’ properties being set with the values from our section schema (that we haven’t created yet. Now we can add our HTML/Liquid code right below our </style> tag:
<div class="banner-container">
<a href="/collections/{{ section.settings.first-banner-link }}" id="deadpool-banner" class="banner-single-image">
<div class="banner-name">{{ section.settings.first-banner-title }}</div>
</a>
<a href="/collections/{{ section.settings.second-banner-link }}" id="guardians-banner" class="banner-single-image">
<div class="banner-name">{{ section.settings.second-banner-title }}</div>
</a>
<a href="/collections/{{ section.settings.third-banner-link }}" id="assassins-banner" class="banner-single-image">
<div class="banner-name">{{ section.settings.third-banner-title }}</div>
</a>
<a href="/collections/{{ section.settings.fourth-banner-link }}" id="justice-banner" class="banner-single-image">
<div class="banner-name">{{ section.settings.fourth-banner-title }}</div>
</a>
</div>We have our wrapping div “banner-container” containing our 4 images. I’ve made them <a> tags so we can have them link to a collection of our choosing and they will also display dynamic text that we choose in the theme editor.
Lastly, we can add our schema settings so that we can:
- Add our new section in the theme editor
- Add our dynamic values:
- Images
- Collections to link
- Text to display on images
Under our HTML we can paste the following code:
{% schema %}
{
"name": "Amazing Image Banner",
"settings": [
{
"type": "image_picker",
"id": "first-banner-image",
"label": "First Image"
},
{
"type": "text",
"id": "first-banner-title",
"label": "First Image Text"
},
{
"type": "collection",
"id": "first-banner-link",
"label": "Collection to link to"
},
{
"type": "image_picker",
"id": "second-banner-image",
"label": "Second Image"
},
{
"type": "text",
"id": "second-banner-title",
"label": "Second Image Text"
},
{
"type": "collection",
"id": "second-banner-link",
"label": "Collection to link to"
},
{
"type": "image_picker",
"id": "third-banner-image",
"label": "Third Image"
},
{
"type": "text",
"id": "third-banner-title",
"label": "third Image Text"
},
{
"type": "collection",
"id": "third-banner-link",
"label": "Collection to link to"
},
{
"type": "image_picker",
"id": "fourth-banner-image",
"label": "Fourth Image"
},
{
"type": "text",
"id": "fourth-banner-title",
"label": "Fourth Image Text"
},
{
"type": "collection",
"id": "fourth-banner-link",
"label": "Collection to link to"
},
],
"presets": [
{
"name": "Amazing Image Banner"
}
]
}
{% endschema %}This schema gives each banner the selections for an image, collection to link to and text to display. It also adds our preset name so we can find it in the theme editor and add it to our template.
Add New Section from Theme Editor
In the Shopify Admin we can now select the option to customize our theme. In the homepage I can add a section, and search for ‘Amazing Image Banner’. After adding it to the template I see the options to add all the dynamic data we need!
Conclusion
In conclusion, the multi-image banner section is a powerful tool for showcasing products, promotions, or any visual content on a website. The provided Liquid code not only demonstrates how to implement this feature but also emphasizes the importance of responsive design and user interaction. By understanding and utilizing this code, developers can create stunning banners that enhance the overall aesthetic of their site while providing a seamless user experience. Whether you’re a seasoned developer or just starting, this implementation serves as a solid foundation for building engaging web components that captivate your audience.