Shopify themes, liquid, logos, and UX
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
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
Hi!
Would you be able to provide the details for this as well?
Thanks!
|Which details are you looking for?
How to add the <a> tag on the Dawn theme or a fix for this.
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?
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:
What this does:
{{ '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 %}
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:
What this does:
UPDATED 09-23-2021 Added Mobile Handling Too! @abdigital @calbowes @kierdesignlab
{{ '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 %}
Hi @TerraPowders ,
That didn't work unfortunately! The image isn't here as a link, just a non-clickable image.
@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?
@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
Hi from mobile the photos do not come out, is it possible to update the code?
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:
{{ '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:
UPDATED 09-23-2021 Added Mobile Handling Too! @Lorenzo123
User | RANK |
---|---|
126 | |
102 | |
74 | |
72 | |
44 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022