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

Shopify Discussion
1

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.

hnh.jpg
hnh.jpg1231×900 114 KB

2

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.

3

Can you help with it?

4

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

5

www.kashish.com.pk

6

its www.kashish.com.pk

7

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:


  
  

    
    

      ## {{ section.settings.left_heading }}
      

{{ section.settings.left_text }}

      {{ section.settings.left_button_text }}
    

  

  
  
    
    

      ## {{ section.settings.right_heading }}
      

{{ section.settings.right_text }}

      {{ section.settings.right_button_text }}
  1. 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 %}
  1. 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.
8

I have tried it but it doesn’t work