FROM CACHE - en_header

Dawn Theme - Make image banner clickable

calbowes
Excursionist
12 0 12
‎09-08-2021 01:02 PM

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

14,441 Views
0 Likes
Report
Replies 52 (52)
himanshuhkm
Shopify Partner
79 9 16
‎09-08-2021 01:57 PM

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

If helpful then please Like and Accept Solution.
Want a shopify store or custom changes on store Hire me.
Feel free to contact me on hk.maurya1981@gmail.com
Shopify Partner | Founder - MR Software Labs
9,699 Views
0 Likes
Report
In response to himanshuhkm
kierdesignlab
Visitor
2 0 1
‎09-10-2021 12:45 AM

Hi! 

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

Thanks!

9,669 Views
Report
In response to kierdesignlab
calbowes
Excursionist
12 0 12
‎09-12-2021 02:54 PM

|Which details are you looking for?

9,636 Views
0 Likes
Report
In response to calbowes
kierdesignlab
Visitor
2 0 1
‎09-12-2021 05:24 PM

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

9,623 Views
0 Likes
Report
abdigital
Excursionist
12 1 1
‎09-22-2021 06:57 AM

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?

9,568 Views
0 Likes
Report
In response to abdigital
TerraPowders
Excursionist
14 0 11
‎09-22-2021 05:47 PM

Try my solution in thread below!

9,540 Views
0 Likes
Report
In response to TerraPowders
abdigital
Excursionist
12 1 1
‎09-22-2021 06:30 PM

Please share link to thread 🙂

9,532 Views
0 Likes
Report
In response to TerraPowders
abdigital
Excursionist
12 1 1
‎09-22-2021 07:28 PM

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

9,443 Views
0 Likes
Report
In response to abdigital
TerraPowders
Excursionist
14 0 11
‎09-23-2021 03:08 PM

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 %}

 

  

9,430 Views
Report
In response to TerraPowders
calbowes
Excursionist
12 0 12
‎09-27-2021 01:29 PM

Hi @TerraPowders ,

 

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

9,404 Views
0 Likes
Report
In response to calbowes
TerraPowders
Excursionist
14 0 11
‎09-27-2021 01:56 PM

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

Link Add.PNG

9,394 Views
0 Likes
Report
In response to TerraPowders
calbowes
Excursionist
12 0 12
‎09-27-2021 06:52 PM

Yep sure did!

9,373 Views
0 Likes
Report
In response to calbowes
TerraPowders
Excursionist
14 0 11
‎09-27-2021 07:04 PM
Could you show me a link of where you have this live?
9,366 Views
0 Likes
Report
In response to TerraPowders
TerraPowders
Excursionist
14 0 11
‎09-27-2021 07:06 PM

@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?

9,362 Views
0 Likes
Report
In response to calbowes
TerraPowders
Excursionist
14 0 11
‎10-04-2021 12:31 PM

@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

9,278 Views
Report
In response to TerraPowders
Lorenzo123
Visitor
3 0 0
‎10-05-2021 08:46 AM

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

9,258 Views
0 Likes
Report
In response to Lorenzo123
TerraPowders
Excursionist
14 0 11
‎10-05-2021 12:11 PM

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 

9,239 Views
Report
In response to TerraPowders
Yamato102
Visitor
2 0 4
‎10-08-2021 08:04 PM

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

5,154 Views
0 Likes
Report
In response to Yamato102
Yamato102
Visitor
2 0 4
‎10-08-2021 08:32 PM

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 %}

 

5,144 Views
Report
In response to TerraPowders
thefourthplace
Explorer
47 0 40
‎11-11-2021 10:16 PM

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

Ian Struckhoff
The Fourth Place
https://thefourthplaceforgeeks.com
4,982 Views
0 Likes
Report
In response to thefourthplace
XtalS
Tourist
8 0 4
‎11-14-2021 08:19 AM

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

4,966 Views
0 Likes
Report
In response to TerraPowders
gzef
Tourist
6 0 2
‎12-12-2021 12:30 PM

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?

4,720 Views
0 Likes
Report
In response to TerraPowders
yvad101
Excursionist
18 0 11
‎01-09-2022 10:08 AM

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

Please help.

4,646 Views
0 Likes
Report
In response to TerraPowders
diego_ezfy
Shopify Partner
2880 549 826
‎01-13-2022 08:01 AM

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

◦ Make Slideshow & banner images stop cutting off | no apps..
◦ Replace apps with copy/paste code snippets & save money - click here.
◦ Available for hire! Click here to contact me.
4,629 Views
Report
In response to diego_ezfy
sweetlyfe
Visitor
1 0 0
‎02-12-2022 10:27 PM

@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?

3,671 Views
0 Likes
Report
In response to diego_ezfy
Jay444
Visitor
1 0 0
‎06-08-2023 04:45 PM

Hey 

That's a great tutorial, very clear. The link only works on the first image .... the second image inherits the first link.

Do you have a code snippet that would allow two individual links please?

 

TBH, l find it mind blowing how a Theme in the s day & age you can't put links on images as standard .. it's crazy!!

 

Is there a way of adding some similar code to the multi columns, to make the the individual columns a link or just the images.

 

Thanks for your time .. your a legend!

Jay 🙌

2,299 Views
0 Likes
Report
In response to diego_ezfy
JasmineB
Shopify Partner
21 0 7
‎06-17-2023 06:28 AM

Thank you,

The link only works on the first image .... the second and third image inherits the first link.

Do you have a code snippet that would allow two/three? individual links please?

2,056 Views
0 Likes
Report
In response to TerraPowders
ShopGlamSoc
Visitor
1 0 1
‎01-28-2022 06:56 PM

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. 

3,761 Views
Report
In response to ShopGlamSoc
diego_ezfy
Shopify Partner
2880 549 826
‎01-29-2022 03:00 PM

@ShopGlamSoc 

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

Kind regards,
Diego

◦ Make Slideshow & banner images stop cutting off | no apps..
◦ Replace apps with copy/paste code snippets & save money - click here.
◦ Available for hire! Click here to contact me.
3,753 Views
Report
In response to diego_ezfy
wiredogs
Tourist
3 0 1
‎02-08-2022 01:26 PM

Thank you @diego_ezfy  ! This example worked perfectly. 

3,695 Views
Report
In response to TerraPowders
Paul_Davis
Shopify Partner
46 1 33
‎02-18-2022 06:34 AM

@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

3,631 Views
0 Likes
Report
In response to TerraPowders
ParisSmith
Tourist
8 0 2
‎05-04-2022 01:28 PM

I can't get the mobile to work.

 

3,413 Views
0 Likes
Report
In response to TerraPowders
hypnotize
Tourist
10 0 4
‎09-07-2022 10:56 PM

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

3,170 Views
Report
Community Browser

Community Blog Articles

cropped-shutterstock_1498591895.webp
The 30-30-30 Rule: A Balanced Approach to Social Media for Startups

Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...

By Trevor Sep 20, 2023
cropped-shutterstock_1913321758.webp
How To Gain Customer Trust With Your Store’s Footer

Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...

By Skye Sep 15, 2023
shutterstock_2183225521_16x9.png
Who Are Shopify Partners?

In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...

By Imogen Sep 13, 2023
Terms of Service Privacy Policy