How to add 2 image on one image banner on shopify dawn theme

[zunairhaseeb]

I am sharing an image can please anyone guide me how to do this thing in dawn theme? 

Is it slider or image banner? How can i have 2 different images with two different buttons on it?

i have attached an image for an example.

[Mateen_Asghar]

Hi @zunairhaseeb,
Shopify Dawn does not have a built-in split banner feature, but you need to add custom code to achieve this.

Let me know if this is something you need help with.

[zunairhaseeb]

Can you help with it?

[Mateen_Asghar]

Hey @zunairhaseeb 
Sure, can you share the store URL?

[zunairhaseeb]

www.kashish.com.pk

[zunairhaseeb]

its www.kashish.com.pk

[Mateen_Asghar]

To add custom code for two images in a banner, follow these steps:
1. Go to Online Store > Themes > Actions > Edit Code
2. Locate sections/image-banner.liquid or the banner-related file
3. Duplicate it as a backup (e.g., name it split-banner.liquid)

Replace the code in the section file with this:

<div style="display: flex; justify-content: space-between; align-items: center; margin: 20px 0;">
  <!-- Left Image -->
  <div style="width: 50%; position: relative;">
    <img src="{{ section.settings.left_image | asset_url }}" alt="Left Image" style="width: 100%; height: auto;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
      <h2 style="color: #fff;">{{ section.settings.left_heading }}</h2>
      <p style="color: #fff;">{{ section.settings.left_text }}</p>
      <a href="{{ section.settings.left_button_link }}" style="padding: 10px 20px; background-color: black; color: white; text-decoration: none;">{{ section.settings.left_button_text }}</a>
    </div>
  </div>

  <!-- Right Image -->
  <div style="width: 50%; position: relative;">
    <img src="{{ section.settings.right_image | asset_url }}" alt="Right Image" style="width: 100%; height: auto;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
      <h2 style="color: #fff;">{{ section.settings.right_heading }}</h2>
      <p style="color: #fff;">{{ section.settings.right_text }}</p>
      <a href="{{ section.settings.right_button_link }}" style="padding: 10px 20px; background-color: black; color: white; text-decoration: none;">{{ section.settings.right_button_text }}</a>
    </div>
  </div>
</div>

4. Update the schema to allow uploading images and entering text/buttons dynamically:

{% schema %}
{
  "name": "Split Banner",
  "settings": [
    {
      "type": "image_picker",
      "id": "left_image",
      "label": "Left Image"
    },
    {
      "type": "text",
      "id": "left_heading",
      "label": "Left Heading"
    },
    {
      "type": "text",
      "id": "left_text",
      "label": "Left Text"
    },
    {
      "type": "url",
      "id": "left_button_link",
      "label": "Left Button Link"
    },
    {
      "type": "text",
      "id": "left_button_text",
      "label": "Left Button Text"
    },
    {
      "type": "image_picker",
      "id": "right_image",
      "label": "Right Image"
    },
    {
      "type": "text",
      "id": "right_heading",
      "label": "Right Heading"
    },
    {
      "type": "text",
      "id": "right_text",
      "label": "Right Text"
    },
    {
      "type": "url",
      "id": "right_button_link",
      "label": "Right Button Link"
    },
    {
      "type": "text",
      "id": "right_button_text",
      "label": "Right Button Text"
    }
  ]
}
{% endschema %}

5. Save the changes and go back to the Theme Editor (Customize). Add the newly created "Split Banner" section to your desired page, upload images, and configure the text/buttons.

[zunairhaseeb]

I have tried it but it doesn't work