Dawn Theme - Make image banner clickable

[calbowes]

Hi - i've started designing a new shopfront on the Dawn theme and so far it seems to be great.

However, i would like to know if it is possible to add the option of adding a url to the Image Banner section so that it links to your chosen url when clicked?

This is one feature on my old homepage (www.walltowallmusic.co.uk) that i would love to be able to replicate.

Thanks

[himanshuhkm]

Hi @calbowes 

You need to add the "<a>" tag in the section 

I can do that if possble do contact me in private it wont cost any money

Thank you

[kierdesignlab]

Hi! 

Would you be able to provide the details for this as well?

Thanks!

[calbowes]

|Which details are you looking for?

[kierdesignlab]

How to add the <a> tag on the Dawn theme or a fix for this.

[abdigital]

Did anyone manage to figure this out? I have added the <a> tag to the banner but it seems like the theme strips our the href?

[TerraPowders]

Try my solution in thread below!

[abdigital]

Please share link to thread 🙂

[TerraPowders]

https://community.shopify.com/c/shopify-design/dawn-theme-make-image-banner-clickable

[abdigital]

@TerraPowders it is returning a "Page not Found" error?

[TerraPowders]

In my honest opinion this should have been an out of the box feature. Along with clickable columns in the multi-column layout.

But I have restructured the schema and added some conditional statements that will make it much easier to make an image banner clickable. 

How to install:

• Copy a backup of your image-banner.liquid file just in case.
• Replace all the text in your image-banner.liquid file with what's included here.

What this does:

• This will insert two URL link fields in the vanilla version of your Customize visual theme editor for Dawn. Allowing you to easily select links for your images.
• It will allow for a single or double clickable image layout in the vanilla version.
• To use the blocks versus a clickable image just be sure to leave the link fields blank and the blocks will reappear over the image(s).

UPDATED 09-23-2021 Added Mobile Handling Too! @abdigital @calbowes @kierdesignlab 

Click to expand...

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

{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
  {%- style -%}
{%- if section.settings.image_banner_link_1 == blank and section.settings.image_banner_link_2 == blank -%}
  @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;
    }
  }
{%- endif -%}

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

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

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

  @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 id="banner1" 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 %}">
      {%- if section.settings.image_banner_link_1 != blank -%}
		<a 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 %}" href="{{ section.settings.image_banner_link_1 }}">
	  {%- 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 %}>
      {%- if section.settings.image_banner_link_1 != blank -%}
        </a>
	  {%- 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 id="banner2" class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
      {%- if section.settings.image_banner_link_2 != blank -%}
		<a class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}" href="{{ section.settings.image_banner_link_2 }}">
	  {%- 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 %}>
      {%- if section.settings.image_banner_link_2 != blank -%}
        </a>
	  {%- endif -%}
    </div>
  {%- endif -%}
  {%- if section.settings.image_banner_link_1 == blank and section.settings.image_banner_link_2 == blank -%}
  <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>
  {%- endif -%}
</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": "url",
      "id": "image_banner_link_1",
      "label": "Image Link 1",
	  "info": "To use button and header blocks, remove links 1 and 2."
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "t:sections.image-banner.settings.image_2.label"
    },
	{
      "type": "url",
      "id": "image_banner_link_2",
      "label": "Image Link 2",
      "info": "To use button and header blocks, remove links 1 and 2."
    },
    {
      "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 %}

[calbowes]

Hi @TerraPowders ,

That didn't work unfortunately!  The image isn't here as a link, just a non-clickable image.

[TerraPowders]

@calbowes Did you add a link to the image as seen below?

[calbowes]

Yep sure did!

[TerraPowders]

Could you show me a link of where you have this live?

[TerraPowders]

@calbowes It's working fine for me here. https://sfv73aq85n3qabgo-48367042714.shopifypreview.com

Do you have a link to yours with the version that I provided available to see?

[TerraPowders]

@calbowes My apologies! I should have included this step for installation.

Fix CSS:

Go to the section-image-banner.css

Change the following (see note)

.banner::after {
  content: none; /* change the '' to none then save */
  position: absolute;
  background: #000000;
  opacity: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

That (along with the code I put in 5-6 posts back should make it work)  should fix your image not being clickable. So sorry about missing that small step. Should work as seen here https://oj50yugge3dakt5z-48367042714.shopifypreview.com

[Lorenzo123]

Hi from mobile the photos do not come out, is it possible to update the code?

[TerraPowders]

The below should work for mobile and desktop - please note that the opacity is disabled for this to work. All else should function typically.

If it does not - please provide a link to the draft of what is not working.

How to install:

• Copy a backup of your image-banner.liquid file just in case.
• Replace all the text in your image-banner.liquid file with what's included here.

Click to expand...

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

{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
  {%- style -%}
{%- if section.settings.image_banner_link_1 == blank and section.settings.image_banner_link_2 == blank -%}
  @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;
    }
  }
{%- endif -%}

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

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

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

  @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 id="banner1" 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 %}">
      {%- if section.settings.image_banner_link_1 != blank -%}
		<a 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 %}" href="{{ section.settings.image_banner_link_1 }}">
	  {%- 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 %}>
      {%- if section.settings.image_banner_link_1 != blank -%}
        </a>
	  {%- 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 id="banner2" class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
      {%- if section.settings.image_banner_link_2 != blank -%}
		<a class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}" href="{{ section.settings.image_banner_link_2 }}">
	  {%- 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 %}>
      {%- if section.settings.image_banner_link_2 != blank -%}
        </a>
	  {%- endif -%}
    </div>
  {%- endif -%}
  {%- if section.settings.image_banner_link_1 == blank and section.settings.image_banner_link_2 == blank -%}
  <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>
  {%- endif -%}
</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": "url",
      "id": "image_banner_link_1",
      "label": "Image Link 1",
	  "info": "To use button and header blocks, remove links 1 and 2."
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "t:sections.image-banner.settings.image_2.label"
    },
	{
      "type": "url",
      "id": "image_banner_link_2",
      "label": "Image Link 2",
      "info": "To use button and header blocks, remove links 1 and 2."
    },
    {
      "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 %}

• Fix CSS:

  Go to the section-image-banner.css replace the below as mentioned in the note.

.banner::after {
  content: none; /* change the '' to none then save */
  position: absolute;
  background: #000000;
  opacity: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

What this does:

• This will insert two URL link fields in the vanilla version of your Customize visual theme editor for Dawn. Allowing you to easily select links for your images.
• It will allow for a single or double clickable image layout in the vanilla version.
• To use the blocks versus a clickable image just be sure to leave the link fields blank and the blocks will reappear over the image(s).

UPDATED 09-23-2021 Added Mobile Handling Too! @Lorenzo123 

[Yamato102]

Hello, 

I changed as provided, everything works fine on desktop, but the banner disappears on mobile.

Here's my website: https://mercurycomfort.com

Thank you

[Yamato102]

It's okay I fixed it:

Click to expand...

{{ '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.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 -%}
  
  <div class="banner__content page-width" style="align-items: {{ section.settings.desktop_text_box_position }};">
      <a class="banner__content-link" href="{{ section.settings.button_link_0 }}"></a>
    <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 {
    display: flex;
    width: 100%;
    height: 100%;
}
  .banner::after {display: none;}  
</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 %}

[thefourthplace]

Is there a way to keep the text block, but make the whole section (or at least the background image/s) clickable?

[XtalS]

That would be so ideal! I wonder why it is impossible for Dawn, such basic features...

[gzef]

Sorry but this code honestly doesnt work. I put this in my Dawn store and it crops completely the image banner from mobile and crops in the half the banners in desktop. Why?

[yvad101]

This works on desktop but on mobile, the image banner disappears when I add link destination. 

Please help.

[diego_ezfy]

For anyone still looking for a solution, there is an updated tutorial here. Let me know if it doesn't work, I'm happy to help.

Kind regards,
Diego

[sweetlyfe]

@diego_ezfy  This works great! But is there a way to make the image/banner not so large, the height is much larger than before I replaced the code?

[ShopGlamSoc]

This worked great however the updated CSS file you added adds text above the banner photo. For me it worked best without it. Thank you, you're a life saver. 

[diego_ezfy]

@ShopGlamSoc 

I'm glad to hear! I have updated the code as well, it should fix this issue you have experienced.

Kind regards,
Diego

[wiredogs]

Thank you @diego_ezfy  ! This example worked perfectly. 

[Paul_Davis]

@TerraPowders How do I make the banner image stay within the frame?  At the moment it is going edge to edge however I would like it to stay within the frame like everything else.  I have tried the % reduction in width but this does not do what I need.

Thanks

[ParisSmith]

I can't get the mobile to work.

[hypnotize]

this code worked perfectly for me. Easy to set up and i'm happy. thanks for sharing w us. 

[gzef]

I have the same problem. I want to do clickable the header banner. I put the code that you have given here. The link sections appear but when i put the link doesnt work. I am trying to click the banner and dont appear the"hand" only the "arrow"

[TerraPowders]

Earlier in the thread I provided both the code and the CSS change here:

https://community.shopify.com/c/shopify-design/dawn-theme-make-image-banner-clickable/m-p/1340320/hi...

On that message I provided the code and the change you need to make to CSS for it to work properly. If you don't make the CSS change it will not function.

[Stacey_Dale]

Hi,

We've followed the instructions and it works fine on desktop, just not on mobile, even after changing the ' ' to none in the section-image-banner.css

This is the link to the test store we're adding the code to.

https://0li79pj22qtt0ock-5408445.shopifypreview.com

are you able to help solve the mobile issue.

Here's also the code from the css

.banner {
display: flex;
position: relative;
flex-direction: column;
}

.banner__box {
text-align: center;
}

@media only screen and (max-width: 749px) {
.banner--content-align-mobile-right .banner__box {
text-align: right;
}

.banner--content-align-mobile-left .banner__box {
text-align: left;
}
}

@media only screen and (min-width: 750px) {
.banner--content-align-right .banner__box {
text-align: right;
}

.banner--content-align-left .banner__box {
text-align: left;
}

.banner--content-align-left.banner--desktop-transparent .banner__box,
.banner--content-align-right.banner--desktop-transparent .banner__box,
.banner--medium.banner--desktop-transparent .banner__box {
max-width: 68rem;
}
}

@media screen and (max-width: 749px) {
.banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media,
.banner--small.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
height: 28rem;
}

.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media,
.banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
height: 34rem;
}

.banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media,
.banner--large.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
height: 39rem;
}

.banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 28rem;
}

.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 34rem;
}

.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 39rem;
}
}

@media screen and (min-width: 750px) {
.banner {
flex-direction: row;
}

.banner--small:not(.banner--adapt) {
min-height: 42rem;
}

.banner--medium:not(.banner--adapt) {
min-height: 56rem;
}

.banner--large:not(.banner--adapt) {
min-height: 72rem;
}

.banner__content.banner__content--top-left {
align-items: flex-start;
justify-content: flex-start;
}

.banner__content.banner__content--top-center {
align-items: flex-start;
justify-content: center;
}

.banner__content.banner__content--top-right {
align-items: flex-start;
justify-content: flex-end;
}

.banner__content.banner__content--middle-left {
align-items: center;
justify-content: flex-start;
}

.banner__content.banner__content--middle-center {
align-items: center;
justify-content: center;
}

.banner__content.banner__content--middle-right {
align-items: center;
justify-content: flex-end;
}

.banner__content.banner__content--bottom-left {
align-items: flex-end;
justify-content: flex-start;
}

.banner__content.banner__content--bottom-center {
align-items: flex-end;
justify-content: center;
}

.banner__content.banner__content--bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
}

@media screen and (max-width: 749px) {
.banner:not(.banner--stacked) {
flex-direction: row;
flex-wrap: wrap;
}

.banner--stacked {
height: auto;
}

.banner--stacked .banner__media {
flex-direction: column;
}
}

.banner__media {
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
}

.banner__media-half {
width: 50%;
}

.banner__media-half + .banner__media-half {
right: 0;
left: auto;
}

@media screen and (max-width: 749px) {
.banner--stacked .banner__media-half {
width: 100%;
}

.banner--stacked .banner__media-half + .banner__media-half {
order: 1;
}
}

@media screen and (min-width: 750px) {
.banner__media {
height: 100%;
}
}

.banner--adapt,
.banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
height: auto;
}

@media screen and (max-width: 749px) {
.banner--mobile-bottom .banner__media,
.banner--stacked:not(.banner--mobile-bottom) .banner__media {
position: relative;
}

.banner--stacked.banner--adapt .banner__content {
height: auto;
}

.banner:not(.banner--mobile-bottom) .banner__box {
background-color: transparent;
--color-foreground: 255, 255, 255;
--color-button: 255, 255, 255;
--color-button-text: 0, 0, 0;
}

.banner:not(.banner--mobile-bottom) .button--secondary {
--color-button: 255, 255, 255;
--color-button-text: 255, 255, 255;
--alpha-button-background: 0;
}

.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)
.banner__content {
position: absolute;
height: auto;
}

.banner--stacked.banner--adapt:not(.banner--mobile-bottom) .banner__content {
max-height: 100%;
overflow: hidden;
position: absolute;
}

.banner--stacked:not(.banner--adapt) .banner__media {
position: relative;
}

.banner::before {
display: none !important;
}

.banner--stacked .banner__media-image-half {
width: 100%;
}
}

.banner__media .placeholder-svg {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

.banner__content {
padding: 0;
display: flex;
position: relative;
width: 100%;
align-items: center;
justify-content: center;
z-index: 2;
}

@media screen and (min-width: 750px) {
.banner__content {
padding: 5rem;
}

.banner__content--top-left {
align-items: flex-start;
justify-content: flex-start;
}

.banner__content--top-center {
align-items: flex-start;
justify-content: center;
}

.banner__content--top-right {
align-items: flex-start;
justify-content: flex-end;
}

.banner__content--middle-left {
align-items: center;
justify-content: flex-start;
}

.banner__content--middle-center {
align-items: center;
justify-content: center;
}

.banner__content--middle-right {
align-items: center;
justify-content: flex-end;
}

.banner__content--bottom-left {
align-items: flex-end;
justify-content: flex-start;
}

.banner__content--bottom-center {
align-items: flex-end;
justify-content: center;
}

.banner__content--bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
}

@media screen and (max-width: 749px) {
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
order: 2;
}
}

.banner__box {
border: 0;
padding: 4rem 3.5rem;
position: relative;
height: fit-content;
align-items: center;
text-align: center;
width: 100%;
word-wrap: break-word;
}

@media screen and (min-width: 750px) {
.banner--desktop-transparent .banner__box {
background-color: transparent;
--color-foreground: 255, 255, 255;
--color-button: 255, 255, 255;
--color-button-text: 0, 0, 0;
max-width: 89rem;
padding: 0;
}

.banner--desktop-transparent .button--secondary {
--color-button: 255, 255, 255;
--color-button-text: 255, 255, 255;
--alpha-button-background: 0;
}
}

@media screen and (max-width: 749px) {
.banner--mobile-bottom::after,
.banner--mobile-bottom .banner__media::after {
display: flex;
}
}

.banner::after,
.banner__media::after {
content: none;
position: absolute;
top: 0;
background: #000000;
opacity: 0;
z-index: 1;
width: 100%;
height: 100%;
}

.banner__box > * + .banner__text {
margin-top: 1.5rem;
}

@media screen and (min-width: 750px) {
.banner__box > * + .banner__text {
margin-top: 2rem;
}
}

.banner__box > * + * {
margin-top: 1rem;
}

.banner__box > *:first-child {
margin-top: 0;
}

@media screen and (max-width: 749px) {
.banner--stacked .banner__box {
width: 100%;
}
}

@media screen and (min-width: 750px) {
.banner__box {
padding: 5rem;
width: auto;
max-width: 71rem;
min-width: 45rem;
}
}

@media screen and (min-width: 1400px) {
.banner__box {
max-width: 90rem;
}
}

.banner__heading {
margin-bottom: 0;
}

.banner__box .banner__heading + * {
margin-top: 1rem;
}

.banner__buttons {
display: inline-flex;
flex-wrap: wrap;
gap: 1rem;
max-width: 45rem;
word-break: break-word;
}

@media screen and (max-width: 749px) {
.banner--content-align-mobile-right .banner__buttons--multiple {
justify-content: flex-end;
}

.banner--content-align-mobile-center .banner__buttons--multiple > * {
flex-grow: 1;
min-width: 22rem;
}
}

@media screen and (min-width: 750px) {
.banner--content-align-center .banner__buttons--multiple > * {
flex-grow: 1;
min-width: 22rem;
}

.banner--content-align-right .banner__buttons--multiple {
justify-content: flex-end;
}
}

.banner__box > * + .banner__buttons {
margin-top: 2rem;
}

Kind Regards Stacey

@TerraPowders

[TerraPowders]

In my honest opinion this should have been an out of the box feature. Along with clickable columns in the multi-column layout.

But I have restructured the schema and added some conditional statements that will make it much easier to make an image banner clickable.

How to install:

• Copy a backup of your image-banner.liquid file just in case.
• Replace all the text in your image-banner.liquid file with what's included here.

What this does:

• This will insert two URL link fields in the vanilla version of your Customize visual theme editor for Dawn. Allowing you to easily select links for your images.
• It will allow for a single or double clickable image layout in the vanilla version.
• To use the blocks versus a clickable image just be sure to leave the link fields blank and the blocks will reappear over the image(s).

Click to expand...

{{ '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 }} a::before,
    #Banner-{{ section.id }} a.banner__media::before,
    #Banner-{{ section.id }} a: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 }} a::before,
    #Banner-{{ section.id }} a.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 %}">
      {%- if section.settings.image_banner_link_1 != blank -%}
		<a 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 %}" href="{{ section.settings.image_banner_link_1 }}">
	  {%- 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 %}
      >
      {%- if section.settings.image_banner_link_1 != blank -%}
        </a>
	  {%- 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 %}">
      {%- if section.settings.image_banner_link_2 != blank -%}
		<a class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}" href="{{ section.settings.image_banner_link_2 }}">
	  {%- 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 %}
      >
      {%- if section.settings.image_banner_link_2 != blank -%}
        </a>
	  {%- endif -%}
    </div>
  {%- endif -%}
  {%- if section.settings.image_banner_link_1 == blank and section.settings.image_banner_link_2 == blank -%}
  <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>
  {%- endif -%}
</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": "url",
      "id": "image_banner_link_1",
      "label": "Image Link 1",
	  "info": "To use button and header blocks, remove links 1 and 2."
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "t:sections.image-banner.settings.image_2.label"
    },
	{
      "type": "url",
      "id": "image_banner_link_2",
      "label": "Image Link 2",
      "info": "To use button and header blocks, remove links 1 and 2."
    },
    {
      "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 %}

[XtalS]

Agree with you and thanks for providing the code.

Have you figured out how to make clickable columns in the multi-column layout? I've been looking up everywhere.

[TerraPowders]

I can provide you with a way to make your multi-columns clickable. This is based on the Vanilla Dawn version out of the box.

First backup your multicolumn.liquid then replace it with this:

Click to expand...

{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>

<div class="multicolumn background-{{ section.settings.background_style }}{% if section.settings.title == blank %} no-heading{% endif %}">
  <div class="page-width">
    <div class="title-wrapper-with-link title-wrapper--self-padded-mobile{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}">
      <h2 class="title">
        {{ section.settings.title | escape }}
      </h2>
      {%- if section.settings.button_label != blank and section.settings.swipe_on_mobile -%}
        <a href="{{ section.settings.button_link }}" class="link underlined-link large-up-hide">{{ section.settings.button_label | escape }}</a>
      {%- endif -%}
    </div>
    <slider-component class="slider-mobile-gutter">
      <ul class="multicolumn-list grid grid--1-col{% if section.blocks.size > 3 and section.settings.image_width != 'full' %} grid--2-col-tablet grid--4-col-desktop{% elsif section.blocks.size > 3 and section.settings.image_width == 'full' %} grid--2-col-tablet{% else %} grid--3-col-tablet{% endif %}{% if section.settings.swipe_on_mobile and section.blocks.size > 1 %} slider slider--mobile grid--peek{% endif %}"
        id="Slider-{{ section.id }}"
        role="list"
      >
        {%- liquid
          assign highest_ratio = 0
          for block in section.blocks
            if block.settings.image.aspect_ratio > highest_ratio
              assign highest_ratio = block.settings.image.aspect_ratio
            endif
          endfor
        -%}
        {%- for block in section.blocks -%}
          <li class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}" {{ block.shopify_attributes }}>
            {%- if block.settings.column_link != blank -%}
            <a class="column-card-link" href="{{block.settings.column_link}}">
            {%- endif -%}
            <div class="multicolumn-card">
              {%- if block.settings.image != blank -%}
                {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %}
                  {% assign spaced_image = true %}
                {% endif %}
                <div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
                  <div class="media media--transparent media--{{ section.settings.image_ratio }}"
                    {% if section.settings.image_ratio == 'adapt' %}
                      style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
                    {% endif %}>
                    <img
                      srcset="{%- if block.settings.image.width >= 275 -%}{{ block.settings.image | img_url: '275x' }} 275w,{%- endif -%}
                        {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | img_url: '550x' }} 550w,{%- endif -%}
                        {%- if block.settings.image.width >= 710 -%}{{ block.settings.image | img_url: '710x' }} 710w,{%- endif -%}
                        {%- if block.settings.image.width >= 1420 -%}{{ block.settings.image | img_url: '1420x' }} 1420w,{%- endif -%}"
                      src="{{ block.settings.image | img_url: '550x' }}"
                      sizes="(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %},
                        (min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %},
                        calc(100vw - 30px)"
                      alt="{{ block.settings.image.alt }}"
                      height="{{ block.settings.image.height }}"
                      width="{{ block.settings.image.width }}"
                      loading="lazy"
                    >
                  </div>
                </div>
              {%- endif -%}
              <div class="multicolumn-card__info">
                {%- if block.settings.title != blank -%}
                  <h3>{{ block.settings.title | escape }}</h3>
                {%- endif -%}
                {%- if block.settings.text != blank -%}
                  <div class="rte">{{ block.settings.text }}</div>
                {%- endif -%}
              </div>
            </div>
            {%- if block.settings.column_link != blank -%}
            </a>
            {%- endif -%}
          </li>
        {%- endfor -%}
      </ul>

      {%- if section.settings.swipe_on_mobile -%}
        <div class="slider-buttons no-js-hidden medium-hide{% if section.blocks.size < 2 %} small-hide{% endif %}">
          <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
            <span class="slider-counter--total">{{ section.blocks.size }}</span>
          </div>
          <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
        </div>
      {%- endif -%}
    </slider-component>
    <div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
      {%- if section.settings.button_label != blank -%}
        <a class="button button--primary"{% if section.settings.button_link == blank %} aria-disabled="true" role="link"{% else %} href="{{ section.settings.button_link }}"{% endif %}>
          {{ section.settings.button_label | escape }}
        </a>
      {%- endif-%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.multicolumn.name",
  "class": "spaced-section spaced-section--full-width",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "Multicolumn",
      "label": "t:sections.multicolumn.settings.title.label"
    },
    {
      "type": "select",
      "id": "image_width",
      "options": [
        {
          "value": "third",
          "label": "t:sections.multicolumn.settings.image_width.options__1.label"
        },
        {
          "value": "half",
          "label": "t:sections.multicolumn.settings.image_width.options__2.label"
        },
        {
          "value": "full",
          "label": "t:sections.multicolumn.settings.image_width.options__3.label"
        }
      ],
      "default": "full",
      "label": "t:sections.multicolumn.settings.image_width.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
        },
        {
          "value": "circle",
          "label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.multicolumn.settings.image_ratio.label"
    },
    {
      "type": "select",
      "id": "column_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.multicolumn.settings.column_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.multicolumn.settings.column_alignment.options__2.label"
        }
      ],
      "default": "left",
      "label": "t:sections.multicolumn.settings.column_alignment.label"
    },
    {
      "type": "select",
      "id": "background_style",
      "options": [
        {
          "value": "none",
          "label": "t:sections.multicolumn.settings.background_style.options__1.label"
        },
        {
          "value": "primary",
          "label": "t:sections.multicolumn.settings.background_style.options__2.label"
        },
        {
          "value": "secondary",
          "label": "t:sections.multicolumn.settings.background_style.options__3.label"
        }
      ],
      "default": "primary",
      "label": "t:sections.multicolumn.settings.background_style.label"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Button label",
      "label": "t:sections.multicolumn.settings.button_label.label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "t:sections.multicolumn.settings.button_link.label"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.multicolumn.settings.swipe_on_mobile.label"
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "t:sections.multicolumn.blocks.column.name",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.multicolumn.blocks.column.settings.image.label"
        },
		{
          "type": "url",
          "id": "column_link",
          "label": "Column Link",
	      "info": "Adding a link will make entire column clickable."
        },
        {
          "type": "text",
          "id": "title",
          "default": "Column",
          "label": "t:sections.multicolumn.blocks.column.settings.title.label"
        },
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "t:sections.multicolumn.blocks.column.settings.text.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.multicolumn.presets.name",
      "blocks": [
        {
          "type": "column"
        },
        {
          "type": "column"
        },
        {
          "type": "column"
        }
      ]
    }
  ]
}
{% endschema %}

Then fix the CSS by adding this to the bottom of section-multicolumn.css

.column-card-link {
  color: inherit;
  text-decoration: none;
}

.column-card-link:hover {
  text-decoration: none;
}

This should provide you with the ability to add links to your columns through your customizable theme editor.

Let me know if you have more questions.

[BTMR]

@TerraPowders thanks for the code 🙂

I tried the first set for the clickable banner image(s).

I'm assuming the code copied correctly as I can now see the Paste Link box, if I add links for both images, it renders in desktop but in mobile it's a grey screen.

When I delete the link in the first image but leave the second, both images reappear on mobile, with the second pic linkable?

If I only use one image with a link it renders/works on desktop but shows as a grey box on mobile 😞

On the bright side the clickable multicolumn code works perfectly on both mobile and desktop 🙂 

Thank you!

[TerraPowders]

Did you use the following to adjust the CSS for the clickable image banner?

Fix CSS:

Go to the section-image-banner.css

Change the following (see note)

.banner::after {
  content: none; /* change the '' to none then save */
  position: absolute;
  background: #000000;
  opacity: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

The grey box is usually caused by this bit. Please let me know if you still aren't seeing a fix.

[BTMR]

@TerraPowders thanks for responding 🙂

This is what is pasted into my section-image-banner.css.

When both images are added and linked - 

On desktop

Both images render and are clickable

On mobile

Nothing.

When 1st image link is deleted

Desktop

Only second link is clickable

Mobile

Renders both images but only second is clickable. 

[TerraPowders]

Hey @BTMR.

Thanks for the details on that. My version of the build is not reproducing this issue. Do you have a preview link I can look at to examine?

Also be sure that the code you are using in the image-banner.liquid is the one from this post:

https://community.shopify.com/c/shopify-design/dawn-theme-make-image-banner-clickable/m-p/1340320/hi...

I know there has been a bit of back and forth over this in the thread, but the code in that perm-linked post is the one with the fix for grey boxes.

[lyndams]

Hi there! This works as a great mobile solution on our website (shopsogold.com) but the link isn't working for the image on desktop. Is there a solve to make sure the link works on both versions? Thanks in advance! 

[lyndams]

Just kidding, read through the full thread and figured out the CSS issue!! 

[clever-crumb]

Hi Terra,

I've used your code to make my banner clickable in my Dawn 7.0v but have now updated to the 9.0v and it's not sizing my banner correctly. It's making it really thin. Any suggestions? Thank you 🙂

[SmallBatchSoups]

I have followed your advice several times and the results i get are this....   when you don't set your image to "Adapt section height to first image", your image will not appear.  and once i apply the liquid file and css file mods, i get this on the left hand side....   this brings up a selection list of 3 items.

any ideas?

here is the verbiage of one of the selections...
missing translation: "t:sections.image-banner.settings.desktop_text_box_position.label" is not present in any of the ["en-US", "en"] schema locale files

[Personalisedpup]

Hi,

Is there a solution confirmed for this? 

Could someone please send me a step by step guide to change this to clickable?

Thanks

[diego_ezfy]

@Personalisedpup 

Yes, you can take a look at it here. Did you try it out? If it doesn't work let me know and i'll help you. 

Kind regards,
Diego

[Stacey_Dale]

Thanks Diego_ezfy. The code works but it obstructs our mega menu from working properly.  If you select a menu item that is above the banner image it's fine, but if the menu item is one of the dropdown items and it drops over the banner image, when you click the menu item, it takes you to the banner image link.

[EMSC]

Hi @diego_ezfy

Thank you for providing this code and a link to your article! Quick question: after making this change I now get the following error when I edit headings in image banners: 

missing translation: "t:sections.image-banner.blocks.heading.settings.heading_size.label" is not present in any of the ["en"] schema locale files

I would greatly appreciate any help I can get with this! Thank you in advance!