How can I make the image banner clickable in the Dawn theme?

calbowes · September 8, 2021, 5:02pm

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

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

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

Thanks

himanshuhkm · September 8, 2021, 5:57pm

Hi @calbowes

You need to add the “” tag in the section

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

Thank you

kierdesignlab · September 10, 2021, 4:45am

Hi!

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

Thanks!

calbowes · September 12, 2021, 6:54pm

|Which details are you looking for?

kierdesignlab · September 12, 2021, 9:24pm

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

abdigital · September 22, 2021, 10:57am

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

TerraPowders · September 22, 2021, 8:41pm

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).

{%- if section.settings.image != blank -%}
{%- if section.settings.image_banner_link_1 != blank -%} {%- endif -%} {%- if section.settings.image_banner_link_1 != blank -%} {%- endif -%}
{%- elsif section.settings.image_2 == blank -%}{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%} {%- if section.settings.image_2 != blank -%}{%- if section.settings.image_banner_link_2 != blank -%} {%- endif -%} {%- if section.settings.image_banner_link_2 != blank -%} {%- endif -%}
{%- endif -%} {%- if section.settings.image_banner_link_1 == blank and section.settings.image_banner_link_2 == blank -%}
{%- 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 -%}

{%- endif -%}
{% 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 %} ```

TerraPowders · September 22, 2021, 9:47pm

Try my solution in thread below!

abdigital · September 22, 2021, 10:30pm

Please share link to thread

TerraPowders · September 22, 2021, 10:49pm

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

abdigital · September 22, 2021, 11:28pm

@TerraPowders it is returning a “Page not Found” error?

TerraPowders · September 23, 2021, 7:08pm

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

{%- if section.settings.image != blank -%}
{%- if section.settings.image_banner_link_1 != blank -%} {%- endif -%} {%- if section.settings.image_banner_link_1 != blank -%} {%- endif -%}
{%- elsif section.settings.image_2 == blank -%}{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%} {%- if section.settings.image_2 != blank -%}{%- if section.settings.image_banner_link_2 != blank -%} {%- endif -%} {%- if section.settings.image_banner_link_2 != blank -%} {%- endif -%}
{%- endif -%} {%- if section.settings.image_banner_link_1 == blank and section.settings.image_banner_link_2 == blank -%}
{%- 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 -%}

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

calbowes · September 27, 2021, 5:29pm

Hi @TerraPowders ,

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

TerraPowders · September 27, 2021, 5:56pm

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

calbowes · September 27, 2021, 10:52pm

Yep sure did!

TerraPowders · September 27, 2021, 11:04pm

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

TerraPowders · September 27, 2021, 11:06pm

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

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

TerraPowders · October 4, 2021, 4:31pm

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

Fix CSS:

Go to the section-image-banner.css

Change the following (see note)

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

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

Lorenzo123 · October 5, 2021, 12:46pm

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

TerraPowders · October 5, 2021, 4:11pm

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.

{%- if section.settings.image != blank -%}
{%- if section.settings.image_banner_link_1 != blank -%} {%- endif -%} {%- if section.settings.image_banner_link_1 != blank -%} {%- endif -%}
{%- elsif section.settings.image_2 == blank -%}{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%} {%- if section.settings.image_2 != blank -%}{%- if section.settings.image_banner_link_2 != blank -%} {%- endif -%} {%- if section.settings.image_banner_link_2 != blank -%} {%- endif -%}
{%- endif -%} {%- if section.settings.image_banner_link_1 == blank and section.settings.image_banner_link_2 == blank -%}
{%- 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 -%}

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

Topic		Replies	Views
How to make homepage images clickable in Dawn theme Store Design	89	10	December 6, 2023
How can I make my entire banner clickable in the Dawn 2.3.0 theme? Store Design	11	26	January 26, 2022
How can I make my entire banner image linkable in the Dawn theme? Technical Q&A	5	2	January 7, 2023
How can I make my dawn banner clickable? Shopify Discussion shop-performance	11	26	November 28, 2024
Code needed to making a banner image clickable in the new 15.0 Dawn theme Store Design design , landing-page , shopify-themes	48	130	December 29, 2024

How can I make the image banner clickable in the Dawn theme?

Related topics