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
It’s okay I fixed it:
Show More
{%- if section.settings.image != blank -%}
{%- elsif section.settings.image_2 == blank -%}{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%} {%- if section.settings.image_2 != blank -%}
{%- endif -%}
{%- for block in section.blocks -%} {%- case block.type -%} {%- when 'heading' -%}## {{ block.settings.heading | escape }}{%- when 'text' -%}{{ block.settings.text | escape }}
{%- when 'buttons' -%}{%- if block.settings.button_label_1 != blank -%}
{%- endcase -%} {%- endfor -%}
{% 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 %} ```
Is there a way to keep the text block, but make the whole section (or at least the background image/s) clickable?
That would be so ideal! I wonder why it is impossible for Dawn, such basic features…
Agree with you and thanks for providing the code.
Have you figured out how to make clickable columns in the multi-column layout? I’ve been looking up everywhere.
I have the same problem. I want to do clickable the header banner. I put the code that you have given here. The link sections appear but when i put the link doesnt work. I am trying to click the banner and dont appear the"hand" only the “arrow”
Earlier in the thread I provided both the code and the CSS change here:
https://community.shopify.com/post/1340320
On that message I provided the code and the change you need to make to CSS for it to work properly. If you don’t make the CSS change it will not function.
I can provide you with a way to make your multi-columns clickable. This is based on the Vanilla Dawn version out of the box.
First backup your multicolumn.liquid then replace it with this:
Show More
## {{ section.settings.title | escape }}{%- if section.settings.button_label != blank and section.settings.swipe_on_mobile -%} {{ section.settings.button_label | escape }} {%- endif -%}
{%- if section.settings.button_label != blank -%} {{ section.settings.button_label | escape }} {%- endif-%}
{% schema %} { "name": "t:sections.multicolumn.name", "class": "spaced-section spaced-section--full-width", "tag": "section", "settings": [ { "type": "text", "id": "title", "default": "Multicolumn", "label": "t:sections.multicolumn.settings.title.label" }, { "type": "select", "id": "image_width", "options": [ { "value": "third", "label": "t:sections.multicolumn.settings.image_width.options__1.label" }, { "value": "half", "label": "t:sections.multicolumn.settings.image_width.options__2.label" }, { "value": "full", "label": "t:sections.multicolumn.settings.image_width.options__3.label" } ], "default": "full", "label": "t:sections.multicolumn.settings.image_width.label" }, { "type": "select", "id": "image_ratio", "options": [ { "value": "adapt", "label": "t:sections.multicolumn.settings.image_ratio.options__1.label" }, { "value": "portrait", "label": "t:sections.multicolumn.settings.image_ratio.options__2.label" }, { "value": "square", "label": "t:sections.multicolumn.settings.image_ratio.options__3.label" }, { "value": "circle", "label": "t:sections.multicolumn.settings.image_ratio.options__4.label" } ], "default": "adapt", "label": "t:sections.multicolumn.settings.image_ratio.label" }, { "type": "select", "id": "column_alignment", "options": [ { "value": "left", "label": "t:sections.multicolumn.settings.column_alignment.options__1.label" }, { "value": "center", "label": "t:sections.multicolumn.settings.column_alignment.options__2.label" } ], "default": "left", "label": "t:sections.multicolumn.settings.column_alignment.label" }, { "type": "select", "id": "background_style", "options": [ { "value": "none", "label": "t:sections.multicolumn.settings.background_style.options__1.label" }, { "value": "primary", "label": "t:sections.multicolumn.settings.background_style.options__2.label" }, { "value": "secondary", "label": "t:sections.multicolumn.settings.background_style.options__3.label" } ], "default": "primary", "label": "t:sections.multicolumn.settings.background_style.label" }, { "type": "text", "id": "button_label", "default": "Button label", "label": "t:sections.multicolumn.settings.button_label.label" }, { "type": "url", "id": "button_link", "label": "t:sections.multicolumn.settings.button_link.label" }, { "type": "checkbox", "id": "swipe_on_mobile", "default": false, "label": "t:sections.multicolumn.settings.swipe_on_mobile.label" } ], "blocks": [ { "type": "column", "name": "t:sections.multicolumn.blocks.column.name", "settings": [ { "type": "image_picker", "id": "image", "label": "t:sections.multicolumn.blocks.column.settings.image.label" }, { "type": "url", "id": "column_link", "label": "Column Link", "info": "Adding a link will make entire column clickable." }, { "type": "text", "id": "title", "default": "Column", "label": "t:sections.multicolumn.blocks.column.settings.title.label" }, { "type": "richtext", "id": "text", "default": "
Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.
", "label": "t:sections.multicolumn.blocks.column.settings.text.label" } ] } ], "presets": [ { "name": "t:sections.multicolumn.presets.name", "blocks": [ { "type": "column" }, { "type": "column" }, { "type": "column" } ] } ] } {% endschema %} ```
Then fix the CSS by adding this to the bottom of section-multicolumn.css
.column-card-link {
color: inherit;
text-decoration: none;
}
.column-card-link:hover {
text-decoration: none;
}
This should provide you with the ability to add links to your columns through your customizable theme editor.
Let me know if you have more questions.
@TerraPowders thanks for the code 
I tried the first set for the clickable banner image(s).
I’m assuming the code copied correctly as I can now see the Paste Link box, if I add links for both images, it renders in desktop but in mobile it’s a grey screen.
When I delete the link in the first image but leave the second, both images reappear on mobile, with the second pic linkable?
If I only use one image with a link it renders/works on desktop but shows as a grey box on mobile 
On the bright side the clickable multicolumn code works perfectly on both mobile and desktop
Thank you!
Did you use the following to adjust the CSS for the clickable image banner?
Fix CSS:
Go to the section-image-banner.css
Change the following (see note)
.banner::after {
content: none; /* change the '' to none then save */
position: absolute;
background: #000000;
opacity: 0;
z-index: 1;
width: 100%;
height: 100%;
}
The grey box is usually caused by this bit. Please let me know if you still aren’t seeing a fix.
@TerraPowders thanks for responding
This is what is pasted into my section-image-banner.css.
When both images are added and linked -
On desktop
Both images render and are clickable
On mobile
Nothing.
When 1st image link is deleted
Desktop
Only second link is clickable
Mobile
Renders both images but only second is clickable.
Hey @BTMR .
Thanks for the details on that. My version of the build is not reproducing this issue. Do you have a preview link I can look at to examine?
Also be sure that the code you are using in the image-banner.liquid is the one from this post:
https://community.shopify.com/post/1340320
I know there has been a bit of back and forth over this in the thread, but the code in that perm-linked post is the one with the fix for grey boxes.
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?
Hi there! This works as a great mobile solution on our website (shopsogold.com) but the link isn’t working for the image on desktop. Is there a solve to make sure the link works on both versions? Thanks in advance!
Just kidding, read through the full thread and figured out the CSS issue!!
I have followed your advice several times and the results i get are this… when you don’t set your image to “Adapt section height to first image”, your image will not appear. and once i apply the liquid file and css file mods, i get this on the left hand side… this brings up a selection list of 3 items.
any ideas?
here is the verbiage of one of the selections…
missing translation: “t:sections.image-banner.settings.desktop_text_box_position.label” is not present in any of the [“en-US”, “en”] schema locale files
This works on desktop but on mobile, the image banner disappears when I add link destination.
Please help.
Hi,
We’ve followed the instructions and it works fine on desktop, just not on mobile, even after changing the ’ ’ to none in the section-image-banner.css
This is the link to the test store we’re adding the code to.
https://0li79pj22qtt0ock-5408445.shopifypreview.com
are you able to help solve the mobile issue.
Here’s also the code from the css
.banner {
display: flex;
position: relative;
flex-direction: column;
}
.banner__box {
text-align: center;
}
@media only screen and (max-width: 749px) {
.banner–content-align-mobile-right .banner__box {
text-align: right;
}
.banner–content-align-mobile-left .banner__box {
text-align: left;
}
}
@media only screen and (min-width: 750px) {
.banner–content-align-right .banner__box {
text-align: right;
}
.banner–content-align-left .banner__box {
text-align: left;
}
.banner–content-align-left.banner–desktop-transparent .banner__box,
.banner–content-align-right.banner–desktop-transparent .banner__box,
.banner–medium.banner–desktop-transparent .banner__box {
max-width: 68rem;
}
}
@media screen and (max-width: 749px) {
.banner–small.banner–mobile-bottom:not(.banner–adapt) .banner__media,
.banner–small.banner–stacked:not(.banner–mobile-bottom):not(.banner–adapt) > .banner__media {
height: 28rem;
}
.banner–medium.banner–mobile-bottom:not(.banner–adapt) .banner__media,
.banner–medium.banner–stacked:not(.banner–mobile-bottom):not(.banner–adapt) > .banner__media {
height: 34rem;
}
.banner–large.banner–mobile-bottom:not(.banner–adapt) .banner__media,
.banner–large.banner–stacked:not(.banner–mobile-bottom):not(.banner–adapt) > .banner__media {
height: 39rem;
}
.banner–small:not(.banner–mobile-bottom):not(.banner–adapt) .banner__content {
min-height: 28rem;
}
.banner–medium:not(.banner–mobile-bottom):not(.banner–adapt) .banner__content {
min-height: 34rem;
}
.banner–large:not(.banner–mobile-bottom):not(.banner–adapt) .banner__content {
min-height: 39rem;
}
}
@media screen and (min-width: 750px) {
.banner {
flex-direction: row;
}
.banner–small:not(.banner–adapt) {
min-height: 42rem;
}
.banner–medium:not(.banner–adapt) {
min-height: 56rem;
}
.banner–large:not(.banner–adapt) {
min-height: 72rem;
}
.banner__content.banner__content–top-left {
align-items: flex-start;
justify-content: flex-start;
}
.banner__content.banner__content–top-center {
align-items: flex-start;
justify-content: center;
}
.banner__content.banner__content–top-right {
align-items: flex-start;
justify-content: flex-end;
}
.banner__content.banner__content–middle-left {
align-items: center;
justify-content: flex-start;
}
.banner__content.banner__content–middle-center {
align-items: center;
justify-content: center;
}
.banner__content.banner__content–middle-right {
align-items: center;
justify-content: flex-end;
}
.banner__content.banner__content–bottom-left {
align-items: flex-end;
justify-content: flex-start;
}
.banner__content.banner__content–bottom-center {
align-items: flex-end;
justify-content: center;
}
.banner__content.banner__content–bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
}
@media screen and (max-width: 749px) {
.banner:not(.banner–stacked) {
flex-direction: row;
flex-wrap: wrap;
}
.banner–stacked {
height: auto;
}
.banner–stacked .banner__media {
flex-direction: column;
}
}
.banner__media {
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.banner__media-half {
width: 50%;
}
.banner__media-half + .banner__media-half {
right: 0;
left: auto;
}
@media screen and (max-width: 749px) {
.banner–stacked .banner__media-half {
width: 100%;
}
.banner–stacked .banner__media-half + .banner__media-half {
order: 1;
}
}
@media screen and (min-width: 750px) {
.banner__media {
height: 100%;
}
}
.banner–adapt,
.banner–adapt_image.banner–mobile-bottom .banner__media:not(.placeholder) {
height: auto;
}
@media screen and (max-width: 749px) {
.banner–mobile-bottom .banner__media,
.banner–stacked:not(.banner–mobile-bottom) .banner__media {
position: relative;
}
.banner–stacked.banner–adapt .banner__content {
height: auto;
}
.banner:not(.banner–mobile-bottom) .banner__box {
background-color: transparent;
–color-foreground: 255, 255, 255;
–color-button: 255, 255, 255;
–color-button-text: 0, 0, 0;
}
.banner:not(.banner–mobile-bottom) .button–secondary {
–color-button: 255, 255, 255;
–color-button-text: 255, 255, 255;
–alpha-button-background: 0;
}
.banner–stacked:not(.banner–mobile-bottom):not(.banner–adapt)
.banner__content {
position: absolute;
height: auto;
}
.banner–stacked.banner–adapt:not(.banner–mobile-bottom) .banner__content {
max-height: 100%;
overflow: hidden;
position: absolute;
}
.banner–stacked:not(.banner–adapt) .banner__media {
position: relative;
}
.banner::before {
display: none !important;
}
.banner–stacked .banner__media-image-half {
width: 100%;
}
}
.banner__media .placeholder-svg {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.banner__content {
padding: 0;
display: flex;
position: relative;
width: 100%;
align-items: center;
justify-content: center;
z-index: 2;
}
@media screen and (min-width: 750px) {
.banner__content {
padding: 5rem;
}
.banner__content–top-left {
align-items: flex-start;
justify-content: flex-start;
}
.banner__content–top-center {
align-items: flex-start;
justify-content: center;
}
.banner__content–top-right {
align-items: flex-start;
justify-content: flex-end;
}
.banner__content–middle-left {
align-items: center;
justify-content: flex-start;
}
.banner__content–middle-center {
align-items: center;
justify-content: center;
}
.banner__content–middle-right {
align-items: center;
justify-content: flex-end;
}
.banner__content–bottom-left {
align-items: flex-end;
justify-content: flex-start;
}
.banner__content–bottom-center {
align-items: flex-end;
justify-content: center;
}
.banner__content–bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
}
@media screen and (max-width: 749px) {
.banner–mobile-bottom:not(.banner–stacked) .banner__content {
order: 2;
}
}
.banner__box {
border: 0;
padding: 4rem 3.5rem;
position: relative;
height: fit-content;
align-items: center;
text-align: center;
width: 100%;
word-wrap: break-word;
}
@media screen and (min-width: 750px) {
.banner–desktop-transparent .banner__box {
background-color: transparent;
–color-foreground: 255, 255, 255;
–color-button: 255, 255, 255;
–color-button-text: 0, 0, 0;
max-width: 89rem;
padding: 0;
}
.banner–desktop-transparent .button–secondary {
–color-button: 255, 255, 255;
–color-button-text: 255, 255, 255;
–alpha-button-background: 0;
}
}
@media screen and (max-width: 749px) {
.banner–mobile-bottom::after,
.banner–mobile-bottom .banner__media::after {
display: flex;
}
}
.banner::after,
.banner__media::after {
content: none;
position: absolute;
top: 0;
background: #000000;
opacity: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.banner__box > * + .banner__text {
margin-top: 1.5rem;
}
@media screen and (min-width: 750px) {
.banner__box > * + .banner__text {
margin-top: 2rem;
}
}
.banner__box > * + * {
margin-top: 1rem;
}
.banner__box > *:first-child {
margin-top: 0;
}
@media screen and (max-width: 749px) {
.banner–stacked .banner__box {
width: 100%;
}
}
@media screen and (min-width: 750px) {
.banner__box {
padding: 5rem;
width: auto;
max-width: 71rem;
min-width: 45rem;
}
}
@media screen and (min-width: 1400px) {
.banner__box {
max-width: 90rem;
}
}
.banner__heading {
margin-bottom: 0;
}
.banner__box .banner__heading + * {
margin-top: 1rem;
}
.banner__buttons {
display: inline-flex;
flex-wrap: wrap;
gap: 1rem;
max-width: 45rem;
word-break: break-word;
}
@media screen and (max-width: 749px) {
.banner–content-align-mobile-right .banner__buttons–multiple {
justify-content: flex-end;
}
.banner–content-align-mobile-center .banner__buttons–multiple > * {
flex-grow: 1;
min-width: 22rem;
}
}
@media screen and (min-width: 750px) {
.banner–content-align-center .banner__buttons–multiple > * {
flex-grow: 1;
min-width: 22rem;
}
.banner–content-align-right .banner__buttons–multiple {
justify-content: flex-end;
}
}
.banner__box > * + .banner__buttons {
margin-top: 2rem;
}
Kind Regards Stacey
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
Hi,
Is there a solution confirmed for this?
Could someone please send me a step by step guide to change this to clickable?
Thanks