Hi,
Does anybody can help me with a code to make the collage image clickable on the homepage of the DAWN theme.
I find a code for the image-banner.liquid and also for the multicolumn.liquid, but not for the collage.liquid.
I tried to do it by my own, but everything went wrong.
Thanks for your help!
I have the same question if anyone would have an answer?
I found this code for the image-banner.liquid so I’m assuming I just need to insert an ‹a› class? But to be honest I don’t know enough about coding so if someone could shed some light that’d be great!
Thanks
Credit: TerraPowders https://community.shopify.com/c/shopify-design/dawn-theme-make-image-banner-clickable/m-p/1325689#M346422
{{ '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 -%}
{%- 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 %}
Hi Adayto,
So I’ve been looking around for some fixes to this issue and here’s what I found:
(Again I’m not a developper but this worked for me so be cautious if you decide on modifying code. Always duplicate your theme is a good way to try stuff out.)
First check out this website https://www.ecommercethesis.com/how-to-make-slideshow-images-clickable-on-shopify/ he explains it very well with a video to go along though it’s for slideshow.liquid. But the same principle applies.
(Personally this was this line of code:
{%- if block.settings.image != blank -%}
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
{% if block.settings.image_link != blank %}
{% endif %}
The before last line of code here is the one I added, see below.)
{% if block.settings.image_link != blank %}
{% endif %}
Side note: He mentions to put the ‹/a› after a certain line of code. When I did it, the link worked but my image would scale up and not be proportionate so I just put the ‹/a› directly after and it works fine. So maybe just necessary for slideshow.liquid
{
"type": "url",
"id": "image_link",
"label": "Image Link"
},
You need to search the code for *"*image_picker" with Command+f (Mac) and paste below the closing bracket. (well technically open but it closes the line of code) “},”
Save and you should be good!
Again, not a dev so be cautious and duplicate. But let me know if this works for you I’m curious 
Cheers from France!
Dan
Hi Dan,
You may not be a developer, but you have solved my wish perfectly. Thanks for your help and great explanation.
I really appreciate it. Wonderful, I’m really happy.
Kind regards from Berlin
Jörg
Hi, I wonder if you can help me. We have a lookbook page which is all collages. We want to make the images of products clickable on this page. Do you know what code and exactly where should we paste it into the collage.liquid? Many thanks!