Re: DAWN THEME - Image-Banner Section - How to add the two heading on split images.

DAWN THEME - Image-Banner Section - How to add the two heading on split images.

SZA
Visitor
3 0 1

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.

 

43531038-5BC8-4226-A86C-4394CE2F6D67.jpeg

 

 

 

Replies 8 (8)

oscprofessional
Shopify Partner
16266 2431 3161

@SZA ,

Please share the store URL..

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free | OSCP Shipping Discounts App : Free
Emowa_Emowa
Excursionist
29 1 9

Hello there, I am also running into the above issue with the new DAWN theme that i am yet to publish. 

halland
Visitor
2 0 0

I am also looking for this. Two diffrent image , diffrent title and button.  just like the below image.Screenshot 2024-02-23 023752.png

Guillaume-AA
Shopify Partner
2 0 0

Helllo,

Is someone found the solution for this ? 

Thank you

ankitpateldev
Shopify Partner
35 3 3

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.

Best regards,
Ankit Patel | Shopify Expert
caas
Visitor
2 0 0

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. 

HelsBels
Shopify Partner
10 0 2

did you come up with a solution? I'd be interested to know how to do this too. Thanks

ankitpateldev
Shopify Partner
35 3 3

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:

4888a40d-fa23-46c6-8337-17102a3ea02e.png


Mobile Output:

a5bf7aa5-ac27-4913-b234-7403cfec4ef2.png

 Let me know if you need further more help.

 

 

Best regards,
Ankit Patel | Shopify Expert