Hello! I need help adding a way to add a link on each image in my collage on my homepage. I have the dawn theme if anyone can help me please? Thank you in advance!
Topic summary
Main issue: add custom links to each image in the Dawn theme’s Collage section, especially for image blocks that don’t link by default.
Core solution:
- Edit collage.liquid. Wrap the image (or better, the entire collage-card block) with an anchor: … .
- In the schema, add a URL setting under the image block: {“type”:“url”,“id”:“image_link”,“label”:“Image URL”}. This exposes a link field in the theme editor.
- Ensure the id in Liquid and schema match exactly (e.g., image_link vs img_link).
Common issues and fixes:
- Images appear zoomed/cropped: move the to wrap the whole collage-card instead of just the img tag.
- Links redirect to home or 404: caused by missing quotes, empty URL, or id mismatch. Fix quoting and synchronize ids.
- JSON errors when editing schema: keep the new URL setting inside the block’s settings array and place commas correctly.
- Crave theme: same approach (wrap markup and add schema URL) applies.
Outcomes:
- Multiple users confirmed success, including 3 separate links in Dawn v10 by wrapping the collage-card. One Dawn v9 user sought an updated method; no final resolution posted.
Notes: Screenshots and code snippets were central to the guidance.
1 Like
The collage section in dawn theme automatically is clickable to the collection/product item which is added to it. Not sure what issue you’re facing specifically @da_bestess
When I add an image to a block there is no where to add a link at all.
1 Like
Hi! Right here please! I can copy and past whatever code or complete any necessary functions to add the link. Thank you for the help!!
If you’d like to help, it’s much appreciated!! I just would like you to help me here please and thank you!
Sorry for the late reply. This is how you fix it. @da_bestess
You got to Edit code > collage.liquid , then wrap the code img tag with the code in black.
Then scroll down to the schema and do this.
2 Likes
Okay. Can you tell me how to wrap the code img tag with the code in black please? Thank you in advance
Type what I have in the black rectangle in your code. Kindly follow the screenshots and then refer to your code and do the same thing.
After you’ve edited your code. Go back to your customizer and try adding an
image in your collage again and you should see an option to add a url.
Hi
This code works, but it puts the collage images of the 2 smaller images completely out of proportion.
It there a way to fix this?
Can you show me how it looks on your end because I tried with dawn theme and it looked okay.
Top is original, bottom is with your code.
The big image is also affected, first I thought it was not. They all are zoomed in somehow.
This is the code I have:
1 Like
Thanks alot! That works 
Hi, really thanks for the help. I succeed to make them clickable, however, even though I set them to go relevant catalog, when I click it redirects me to the main page. What is the issue? URL: rugsbycarpetde.com
Very Helpful!
I got stuck on trying to fix the images in the code here, I hope you can suggest: As I tried and maybe I have misplaced your content, so sending you here my original code so you can highlight where I should implement the code if possible please.
@modacarpet I just checked your store and the links seems to pointing to different products. Has the issue been fixed? If not then lemme know the exact location where you have the collage so I check it out.
[email removed] you want to make your video clickable? And with that I already see there’s a wrapping that should make your video go to a url. If you can gimme more details on what you want to achieve
Hey @lunaworks I am trying to implement your code on a CRAVE theme.
I’ve added the Im unsure of how to add a link on the image now on the backend.
{%- case block.type -%}
{%- when 'image' -%}
{%- if block.settings.image != blank -%}
{%- capture sizes -%}(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px)}{%- endcapture -%}
{{
block.settings.image
| image_url: width: 3000
| image_tag: loading: 'lazy', sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
}}
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}