How to make homepage images clickable in Dawn theme

https://youtu.be/fw1izJP18oA

are you able to view the video?

1 Like

@ebon

yes i have let have find solution

@ebon

i have find and update someone else same issue try below code

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

{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
  {%- style -%}
    #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 -%}

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

Hi Ketan,

Are you able to clarify how to change the links that clicking the image leads to?

Thanks,

Tess

1 Like

@tessastbury

do you have use same theme so you have user above code or doesn’t same please share your store url

Which file did you alter this in?

@livit

you have compare

css, js and product page ccode

I’ve pasted your code into the image-banner.liquid file in the Dawn 2.0 theme. The overlay box with buttons/text jumps to the right side, instead of being centered.

@livit

yes please sent store url and image further issue

@tessastbury

yes i have update image link code

Hi My Friend,

Sorry I am new ot this platform and couldn’t figure out how to contact you, I saw you’ve been a great help to a number of other people. I am having issues with the sizes of my images on the product grid I’ve seen many other people have the same issues and you were able to give them code to help. I tried using this code on my site but couldn’t implement it properly. My site is Furniturehouseuk.com , you’ll be able to see if you click on the dining room the issue I am having. All the best:)

1 Like

@furniturehouse

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

thanks so much for this. furniturehouseuk.com
it’s a thalia theme,

all the best.

Hi Ketan,

I need to make the images in the multicolumn block click through to a link. Are you able to help me with code for this?

Many thanks,

Tess

Great solution but, it’s not working on mobile mode.

1 Like

@Aemaay

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

hello again,

this fix is not displaying the header on mobile with the update of Dawn 2.0

do you have a fix for this? URL is preacha.com

thank you

Show More

Hello, hope you are well.

Show More

the code you supplied to make the front page banner clickable is not working with The Dawn update. The banner at the top of the site or any banner for that matter will not appear on the mobile platform period.

Show More

I’ve got two banners on my site, one at the top and one near the bottom of the front page. You can see them on desktop and iPad but they disappear on mobile. I hope you can find the bug.

Show More

url preacha.com

1 Like

@ebon

thanks but can’t see new issue at new theme