Shopify themes, liquid, logos, and UX
Hello Shopify Experts,
I would like to place two separate banner images, as shown in the attached image, with a Heading and link to each image.
Using the Dawn theme banner, I was able to easily split the image into two, but I cannot place the Heading and link separately in the center of the image.
Please let me know the solution.
Thank you in advance for your help.
@SZA ,
Please share the store URL..
Hello there, I am also running into the above issue with the new DAWN theme that i am yet to publish.
I am also looking for this. Two diffrent image , diffrent title and button. just like the below image.
Helllo,
Is someone found the solution for this ?
Thank you
Hi @Guillaume-AA @halland @Emowa_Emowa @SZA,
I do have solution for all of your questions. You can use image banner section twice and you will be able to get your images splitted where you can add different heading for each image section.
about to link the image with different URL, it needs small code customisation that will let you add different link for each images.
let me know if you need further help with specific requirements.
Hi @ankitpateldev,
I just ran into this issue while searching for a solution. Yes, Adding another image banner section allows to use everything twice. But how do you set them up to be in one row, next to each other? I am only able to put these sections below each other.
did you come up with a solution? I'd be interested to know how to do this too. Thanks
Hi, I come up with the solution. To achieve that, need to create custom section with schema settings to add 2 images, 2 titles, 2 subtitles, 2 buttons, 2 links for each side. Then have to create div structure like below. Once you place that in your theme you will able to see side by side banner with title, subtitle, button for each image.
<div class="banner_2-col-wrapper">
<!-- First Image Section -->
<div class="banner_image-left">
<img src="https://img.freepik.com/free-photo/seductive-girl-wearing-distressed-jeans-denim-jacket-looking-camera-while-sitting-chair-fitting-room-clothing-store_613910-20033.jpg" alt="Image 1">
<div class="banner_content">
<h3 class="image_banner_title">Title 1</h3>
<p class="image_banner_subtitle">Subtitle for Image 1</p>
<a href="URL_FOR_BUTTON_1">Button 1</a>
</div>
</div>
<!-- Second Image Section -->
<div class="banner_image-right">
<img src="https://img.freepik.com/free-photo/pretty-young-woman-near-old-fashion-door-wearing-black-hat-coat-street_231208-10615.jpg" alt="Image 2">
<div class="banner_content">
<h3 class="image_banner_title">Title 2</h3>
<p class="image_banner_subtitle">Subtitle for Image 2</p>
<a href="URL_FOR_BUTTON_2">Button 2</a>
</div>
</div>
</div>
<style type="text/css">
.banner_2-col-wrapper {
display: flex;
justify-content: space-between;
min-height: 30rem;
max-height: 72rem;
}
.banner_image-left,
.banner_image-right {
flex: 1;
position: relative;
text-align: center;
}
.banner_image-left img,
.banner_image-right img {
width: 100%;
height: 100%;
object-fit: cover;
}
.banner_2-col-wrapper .banner_content {
position: absolute;
bottom: 0%;
left: 0;
color: white;
text-align: center;
padding: 20px;
border-radius: 10px;
}
.banner_2-col-wrapper .image_banner_title {
font-size: 1.5rem;
margin-bottom: 10px;
}
.banner_2-col-wrapper .image_banner_subtitle {
font-size: 1rem;
margin-bottom: 15px;
}
.banner_2-col-wrapper .banner_content a {
display: inline-block;
background-color: #0073e6;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}
</style>
Desktop Output:
Mobile Output:
Let me know if you need further more help.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025