How to make homepage images clickable in Dawn theme

Solved
ebon
Pathfinder
108 3 37

How can I make the homepage images in the Dawn theme clickable? 

I don't want the button on the homepage image.

thank you

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
32385 3255 10813

This is an accepted solution.

@ebon 

thanks for code please update this code

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
  {%- style -%}
    #Banner-{{ section.id }}::before, #Banner-{{ section.id }} .banner__media::before {
      padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
      content: '';
      display: block;
    }
  {%- endstyle -%}
{%- endif -%}

<div id="Banner-{{ section.id }}" class="banner{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank%} banner--stacked{% endif %}{% if section.settings.adapt_height_first_image and section.settings.image != blank %} banner--adapt{% endif %}">
  {%- if section.settings.image != blank -%}
    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
     
      <img srcset="{%- if section.settings.image.width >= 375 -%}{{ section.settings.image | img_url: '375x' }} 375w,{%- endif -%}
        {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
        {%- if section.settings.image.width >= 1100 -%}{{ section.settings.image | img_url: '1100x' }} 1100w,{%- endif -%}
        {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
        {%- if section.settings.image.width >= 1780 -%}{{ section.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
        {%- if section.settings.image.width >= 2000 -%}{{ section.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
        {%- if section.settings.image.width >= 2800 -%}{{ section.settings.image | img_url: '2800x' }} 2800w{%- endif -%}"
        sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
        src="{{ section.settings.image | img_url: '750x' }}"
        loading="lazy"
        alt="{{ section.settings.image.alt | escape }}"
        width="{{ section.settings.image.width }}"
        height="{{ section.settings.image.width | divided_by: section.settings.image.aspect_ratio }}"
        {% if section.settings.image_2 != blank %}class="banner__media-image-half"{% endif %}
      >
     
    </div>
  {%- elsif section.settings.image_2 == blank -%}
    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
      {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
    </div>
  {%- endif -%}
  {%- if section.settings.image_2 != blank -%}
    <div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
    
      <img srcset="{%- if section.settings.image_2.width >= 375 -%}{{ section.settings.image_2 | img_url: '375x' }} 375w,{%- endif -%}
        {%- if section.settings.image_2.width >= 750 -%}{{ section.settings.image_2 | img_url: '750x' }} 750w,{%- endif -%}
        {%- if section.settings.image_2.width >= 1100 -%}{{ section.settings.image_2 | img_url: '1100x' }} 1100w,{%- endif -%}
        {%- if section.settings.image_2.width >= 1500 -%}{{ section.settings.image_2 | img_url: '1500x' }} 1500w,{%- endif -%}
        {%- if section.settings.image_2.width >= 1780 -%}{{ section.settings.image_2 | img_url: '1780x' }} 1780w,{%- endif -%}
        {%- if section.settings.image_2.width >= 2000 -%}{{ section.settings.image_2 | img_url: '2000x' }} 2000w,{%- endif -%}
        {%- if section.settings.image_2.width >= 2800 -%}{{ section.settings.image_2 | img_url: '2800x' }} 2800w{%- endif -%}"
        sizes="{% if section.settings.image != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image != blank %}50vw{% else %}100vw{% endif %}"
        src="{{ section.settings.image_2 | img_url: '750x' }}"
        loading="lazy"
        alt="{{ section.settings.image_2.alt | escape }}"
        width="{{ section.settings.image_2.width }}"
        height="{{ section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio }}"
        {% if section.settings.image != blank %}class="banner__media-image-half"{% endif %}
      >
     
    </div>
  {%- endif -%}
  <a class="banner__content-link" href="{{ section.settings.button_link_0 }}"></a>
  <div class="banner__content page-width" style="align-items: {{ section.settings.desktop_text_box_position }};">
     
    <div class="banner__box color-{{ section.settings.color_scheme }}">
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'heading' -%}
            <h2 class="banner__heading h1" {{ block.shopify_attributes }}>
              <span>{{ block.settings.heading | escape }}</span>
            </h2>
          {%- when 'text' -%}
            <div class="banner__text" {{ block.shopify_attributes }}>
              <span>{{ block.settings.text | escape }}</span>
            </div>
          {%- when 'buttons' -%}
            <div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_link_1 != blank and block.settings.button_label_2 != blank and block.settings.button_link_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
              {%- if block.settings.button_label_1 != blank -%}
                <a{% if block.settings.button_link_1 != blank %} href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_1 == blank %} aria-disabled="true"{% endif %}>{{ block.settings.button_label_1 | escape }}</a>
              {%- endif -%}
              {%- if block.settings.button_label_2 != blank -%}
                <a{% if block.settings.button_link_2 != blank %} href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_2 == blank %} aria-disabled="true"{% endif %}>{{ block.settings.button_label_2 | escape }}</a>
              {%- endif -%}
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
  </div>
</div>

<style>
a.banner__content-link {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}
</style>

{% schema %}
{
  "name": "t:sections.image-banner.name",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
	{
          "type": "url",
          "id": "button_link_0",
          "label": "Image Link"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "t:sections.image-banner.settings.image_2.label"
    },
    {
      "type": "select",
      "id": "desktop_text_box_position",
      "options": [
        {
          "value": "flex-start",
          "label": "t:sections.image-banner.settings.desktop_text_box_position.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.desktop_text_box_position.options__2.label"
        },
        {
          "value": "flex-end",
          "label": "t:sections.image-banner.settings.desktop_text_box_position.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.desktop_text_box_position.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.image-banner.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.image-banner.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.image-banner.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.image-banner.settings.color_scheme.options__4.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.image-banner.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.image-banner.settings.color_scheme.label"
    },
    {
      "type": "checkbox",
      "id": "stack_images_on_mobile",
      "default": true,
      "label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "adapt_height_first_image",
      "default": false,
      "label": "t:sections.image-banner.settings.adapt_height_first_image.label"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-banner.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image banner",
          "label": "t:sections.image-banner.blocks.heading.settings.heading.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-banner.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Give customers details about the banner image(s) or content on the template.",
          "label": "t:sections.image-banner.blocks.text.settings.text.label"
        }
      ]
    },
    {
      "type": "buttons",
      "name": "t:sections.image-banner.blocks.buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label_1",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_1",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
        },
        {
          "type": "text",
          "id": "button_label_2",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_2",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.image-banner.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "buttons"
        }
      ]
    }
  ]
}
{% endschema %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 80 (80)
KetanKumar
Shopify Partner
32385 3255 10813

@ebon 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ebon
Pathfinder
108 3 37

thank you so much.

preacha.com

KetanKumar
Shopify Partner
32385 3255 10813

@ebon 

yes please share this section code so i will update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ebon
Pathfinder
108 3 37

main-page.liquid 

is this the section you need? sorry, Im not much good with code.

KetanKumar
Shopify Partner
32385 3255 10813

@ebon 

no rush give me theme zip code so i will check and update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ebon
Pathfinder
108 3 37

Is this the code for the homepage?

 

<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>

<div class="page-width page-width--narrow">
<h1 class="main-page-title page-title h0">
{{ page.title | escape }}
</h1>
<div class="rte">
{{ page.content }}
</div>
</div>

{% schema %}
{
"name": "t:sections.main-page.name",
"tag": "section",
"class": "spaced-section"
}
{% endschema %}

KetanKumar
Shopify Partner
32385 3255 10813

@ebon 

can you please give me this file code image-banner.liquid

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ebon
Pathfinder
108 3 37

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}

@media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}

{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}

<div id="Banner-{{ section.id }}" class="banner{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank%} banner--stacked{% endif %}{% if section.settings.adapt_height_first_image and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
{%- if section.settings.image != blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
<img
srcset="{%- if section.settings.image.width >= 375 -%}{{ section.settings.image | img_url: '375x' }} 375w,{%- endif -%}
{%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
{%- if section.settings.image.width >= 1100 -%}{{ section.settings.image | img_url: '1100x' }} 1100w,{%- endif -%}
{%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
{%- if section.settings.image.width >= 1780 -%}{{ section.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
{%- if section.settings.image.width >= 2000 -%}{{ section.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
{%- if section.settings.image.width >= 3000 -%}{{ section.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
{%- if section.settings.image.width >= 3840 -%}{{ section.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}"
sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
src="{{ section.settings.image | img_url: '1500x' }}"
loading="lazy"
alt="{{ section.settings.image.alt | escape }}"
width="{{ section.settings.image.width }}"
height="{{ section.settings.image.width | divided_by: section.settings.image.aspect_ratio }}"
{% if section.settings.image_2 != blank %}class="banner__media-image-half"{% endif %}
>
</div>
{%- elsif section.settings.image_2 == blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if section.settings.image_2 != blank -%}
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
<img
srcset="{%- if section.settings.image_2.width >= 375 -%}{{ section.settings.image_2 | img_url: '375x' }} 375w,{%- endif -%}
{%- if section.settings.image_2.width >= 750 -%}{{ section.settings.image_2 | img_url: '750x' }} 750w,{%- endif -%}
{%- if section.settings.image_2.width >= 1100 -%}{{ section.settings.image_2 | img_url: '1100x' }} 1100w,{%- endif -%}
{%- if section.settings.image_2.width >= 1500 -%}{{ section.settings.image_2 | img_url: '1500x' }} 1500w,{%- endif -%}
{%- if section.settings.image_2.width >= 1780 -%}{{ section.settings.image_2 | img_url: '1780x' }} 1780w,{%- endif -%}
{%- if section.settings.image_2.width >= 2000 -%}{{ section.settings.image_2 | img_url: '2000x' }} 2000w,{%- endif -%}
{%- if section.settings.image_2.width >= 3000 -%}{{ section.settings.image_2 | img_url: '3000x' }} 3000w,{%- endif -%}
{%- if section.settings.image_2.width >= 3840 -%}{{ section.settings.image_2 | img_url: '3840x' }} 3840w,{%- endif -%}"
sizes="{% if section.settings.image != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image != blank %}50vw{% else %}100vw{% endif %}"
src="{{ section.settings.image_2 | img_url: '1500x' }}"
loading="lazy"
alt="{{ section.settings.image_2.alt | escape }}"
width="{{ section.settings.image_2.width }}"
height="{{ section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio }}"
{% if section.settings.image != blank %}class="banner__media-image-half"{% endif %}
>
</div>
{%- endif -%}
<div class="banner__content banner__content--{{ section.settings.desktop_text_box_position }} page-width">
<div class="banner__box color-{{ section.settings.color_scheme }}">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2 class="banner__heading {% if block.settings.heading_size == 'medium' %}h1{% else %}h0{% endif %}" {{ block.shopify_attributes }}>
<span>{{ block.settings.heading | escape }}</span>
</h2>
{%- when 'text' -%}
<div class="banner__text" {{ block.shopify_attributes }}>
<span>{{ block.settings.text | escape }}</span>
</div>
{%- when 'buttons' -%}
<div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_link_1 != blank and block.settings.button_label_2 != blank and block.settings.button_link_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.button_label_1 != blank -%}
<a{% if block.settings.button_link_1 != blank %} href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_1 == blank %} aria-disabled="true"{% endif %}>{{ block.settings.button_label_1 | escape }}</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a{% if block.settings.button_link_2 != blank %} href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_2 == blank %} aria-disabled="true"{% endif %}>{{ block.settings.button_label_2 | escape }}</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>

{% schema %}
{
"name": "t:sections.image-banner.name",
"tag": "section",
"class": "spaced-section spaced-section--full-width",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.image-banner.settings.image.label"
},
{
"type": "image_picker",
"id": "image_2",
"label": "t:sections.image-banner.settings.image_2.label"
},
{
"type": "checkbox",
"id": "adapt_height_first_image",
"default": false,
"label": "t:sections.image-banner.settings.adapt_height_first_image.label"
},
{
"type": "select",
"id": "desktop_text_box_position",
"options": [
{
"value": "flex-start",
"label": "t:sections.image-banner.settings.desktop_text_box_position.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.desktop_text_box_position.options__2.label"
},
{
"value": "flex-end",
"label": "t:sections.image-banner.settings.desktop_text_box_position.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.desktop_text_box_position.label"
},
{
"type": "checkbox",
"id": "show_text_box",
"default": true,
"label": "t:sections.image-banner.settings.show_text_box.label"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "t:sections.image-banner.settings.image_overlay_opacity.label",
"default": 0
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.image-banner.settings.color_scheme.options__1.label"
},
{
"value": "accent-2",
"label": "t:sections.image-banner.settings.color_scheme.options__2.label"
},
{
"value": "background-1",
"label": "t:sections.image-banner.settings.color_scheme.options__3.label"
},
{
"value": "background-2",
"label": "t:sections.image-banner.settings.color_scheme.options__4.label"
},
{
"value": "inverse",
"label": "t:sections.image-banner.settings.color_scheme.options__5.label"
}
],
"default": "background-1",
"label": "t:sections.image-banner.settings.color_scheme.label",
"info": "t:sections.image-banner.settings.color_scheme.info"
},
{
"type": "header",
"content": "t:sections.image-banner.settings.header.content"
},
{
"type": "checkbox",
"id": "stack_images_on_mobile",
"default": true,
"label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
},
{
"type": "checkbox",
"id": "show_text_below",
"default": true,
"label": "t:sections.image-banner.settings.show_text_below.label"
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-banner.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "heading",
"default": "Image banner",
"label": "t:sections.image-banner.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "medium",
"label": "t:sections.image-banner.blocks.heading.settings.heading_size.options__1.label"
},
{
"value": "large",
"label": "t:sections.image-banner.blocks.heading.settings.heading_size.options__2.label"
}
],
"default": "medium",
"label": "t:sections.image-banner.blocks.heading.settings.heading_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.image-banner.blocks.text.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "text",
"default": "Give customers details about the banner image(s) or content on the template.",
"label": "t:sections.image-banner.blocks.text.settings.text.label"
}
]
},
{
"type": "buttons",
"name": "t:sections.image-banner.blocks.buttons.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "button_label_1",
"default": "Button label",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
},
{
"type": "url",
"id": "button_link_1",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_1",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
},
{
"type": "text",
"id": "button_label_2",
"default": "Button label",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
},
{
"type": "url",
"id": "button_link_2",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_2",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
}
]
}
],
"presets": [
{
"name": "t:sections.image-banner.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "buttons"
}
]
}
]
}
{% endschema %}

KetanKumar
Shopify Partner
32385 3255 10813

This is an accepted solution.

@ebon 

thanks for code please update this code

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
  {%- style -%}
    #Banner-{{ section.id }}::before, #Banner-{{ section.id }} .banner__media::before {
      padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
      content: '';
      display: block;
    }
  {%- endstyle -%}
{%- endif -%}

<div id="Banner-{{ section.id }}" class="banner{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank%} banner--stacked{% endif %}{% if section.settings.adapt_height_first_image and section.settings.image != blank %} banner--adapt{% endif %}">
  {%- if section.settings.image != blank -%}
    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
     
      <img srcset="{%- if section.settings.image.width >= 375 -%}{{ section.settings.image | img_url: '375x' }} 375w,{%- endif -%}
        {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
        {%- if section.settings.image.width >= 1100 -%}{{ section.settings.image | img_url: '1100x' }} 1100w,{%- endif -%}
        {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
        {%- if section.settings.image.width >= 1780 -%}{{ section.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
        {%- if section.settings.image.width >= 2000 -%}{{ section.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
        {%- if section.settings.image.width >= 2800 -%}{{ section.settings.image | img_url: '2800x' }} 2800w{%- endif -%}"
        sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
        src="{{ section.settings.image | img_url: '750x' }}"
        loading="lazy"
        alt="{{ section.settings.image.alt | escape }}"
        width="{{ section.settings.image.width }}"
        height="{{ section.settings.image.width | divided_by: section.settings.image.aspect_ratio }}"
        {% if section.settings.image_2 != blank %}class="banner__media-image-half"{% endif %}
      >
     
    </div>
  {%- elsif section.settings.image_2 == blank -%}
    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
      {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
    </div>
  {%- endif -%}
  {%- if section.settings.image_2 != blank -%}
    <div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
    
      <img srcset="{%- if section.settings.image_2.width >= 375 -%}{{ section.settings.image_2 | img_url: '375x' }} 375w,{%- endif -%}
        {%- if section.settings.image_2.width >= 750 -%}{{ section.settings.image_2 | img_url: '750x' }} 750w,{%- endif -%}
        {%- if section.settings.image_2.width >= 1100 -%}{{ section.settings.image_2 | img_url: '1100x' }} 1100w,{%- endif -%}
        {%- if section.settings.image_2.width >= 1500 -%}{{ section.settings.image_2 | img_url: '1500x' }} 1500w,{%- endif -%}
        {%- if section.settings.image_2.width >= 1780 -%}{{ section.settings.image_2 | img_url: '1780x' }} 1780w,{%- endif -%}
        {%- if section.settings.image_2.width >= 2000 -%}{{ section.settings.image_2 | img_url: '2000x' }} 2000w,{%- endif -%}
        {%- if section.settings.image_2.width >= 2800 -%}{{ section.settings.image_2 | img_url: '2800x' }} 2800w{%- endif -%}"
        sizes="{% if section.settings.image != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image != blank %}50vw{% else %}100vw{% endif %}"
        src="{{ section.settings.image_2 | img_url: '750x' }}"
        loading="lazy"
        alt="{{ section.settings.image_2.alt | escape }}"
        width="{{ section.settings.image_2.width }}"
        height="{{ section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio }}"
        {% if section.settings.image != blank %}class="banner__media-image-half"{% endif %}
      >
     
    </div>
  {%- endif -%}
  <a class="banner__content-link" href="{{ section.settings.button_link_0 }}"></a>
  <div class="banner__content page-width" style="align-items: {{ section.settings.desktop_text_box_position }};">
     
    <div class="banner__box color-{{ section.settings.color_scheme }}">
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'heading' -%}
            <h2 class="banner__heading h1" {{ block.shopify_attributes }}>
              <span>{{ block.settings.heading | escape }}</span>
            </h2>
          {%- when 'text' -%}
            <div class="banner__text" {{ block.shopify_attributes }}>
              <span>{{ block.settings.text | escape }}</span>
            </div>
          {%- when 'buttons' -%}
            <div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_link_1 != blank and block.settings.button_label_2 != blank and block.settings.button_link_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
              {%- if block.settings.button_label_1 != blank -%}
                <a{% if block.settings.button_link_1 != blank %} href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_1 == blank %} aria-disabled="true"{% endif %}>{{ block.settings.button_label_1 | escape }}</a>
              {%- endif -%}
              {%- if block.settings.button_label_2 != blank -%}
                <a{% if block.settings.button_link_2 != blank %} href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_2 == blank %} aria-disabled="true"{% endif %}>{{ block.settings.button_label_2 | escape }}</a>
              {%- endif -%}
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
  </div>
</div>

<style>
a.banner__content-link {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}
</style>

{% schema %}
{
  "name": "t:sections.image-banner.name",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
	{
          "type": "url",
          "id": "button_link_0",
          "label": "Image Link"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "t:sections.image-banner.settings.image_2.label"
    },
    {
      "type": "select",
      "id": "desktop_text_box_position",
      "options": [
        {
          "value": "flex-start",
          "label": "t:sections.image-banner.settings.desktop_text_box_position.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.desktop_text_box_position.options__2.label"
        },
        {
          "value": "flex-end",
          "label": "t:sections.image-banner.settings.desktop_text_box_position.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.desktop_text_box_position.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.image-banner.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.image-banner.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.image-banner.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.image-banner.settings.color_scheme.options__4.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.image-banner.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.image-banner.settings.color_scheme.label"
    },
    {
      "type": "checkbox",
      "id": "stack_images_on_mobile",
      "default": true,
      "label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "adapt_height_first_image",
      "default": false,
      "label": "t:sections.image-banner.settings.adapt_height_first_image.label"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-banner.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image banner",
          "label": "t:sections.image-banner.blocks.heading.settings.heading.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-banner.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Give customers details about the banner image(s) or content on the template.",
          "label": "t:sections.image-banner.blocks.text.settings.text.label"
        }
      ]
    },
    {
      "type": "buttons",
      "name": "t:sections.image-banner.blocks.buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label_1",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_1",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
        },
        {
          "type": "text",
          "id": "button_label_2",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_2",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.image-banner.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "buttons"
        }
      ]
    }
  ]
}
{% endschema %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ebon
Pathfinder
108 3 37

inserted the code. then inserted the link.

issue #1 The homepage just refreshes itself.

issue #2 none of the dropdown links will work until you select a main menu item first

preacha.com so you can see what it does.

KetanKumar
Shopify Partner
32385 3255 10813

@ebon 

please check your theme setting and select link as you like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ebon
Pathfinder
108 3 37

okay, it just started working. great!!!

KetanKumar
Shopify Partner
32385 3255 10813

@ebon 

its my pleasure to help us 

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ebon
Pathfinder
108 3 37

one slight problem. when you first come to my website which is preacha.com

No matter which menu selection you make, you are taken to whatever the homepage image link is set to which in this case is the Face Mask collection.

After that, every link works. If you refresh the url, same thing. Can help fix the bug in your code. I have not removed your last code so you can see the issue.

Thank you

KetanKumar
Shopify Partner
32385 3255 10813

@ebon 

sorry for any issue i have check this same code my demo store is working fine 

possible to share video for this?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ebon
Pathfinder
108 3 37

i have not removed the code. preacha.com to see what happens. both on mobile and desktop

KetanKumar
Shopify Partner
32385 3255 10813

@ebon 

can you pleas show me video?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ebon
Pathfinder
108 3 37

can you not see my url??? preacha.com

video? really?? i will try 

ebon
Pathfinder
108 3 37

uploading to youtube now. gimme a sec