Make Column Images Clickable - Dawn Theme

[md249]

Hello,

I have 3 product images in columns on my homepage and I would like to configure them so that when you click on them it brings you to the product page. How can I do this? Here is a link to my store: https://089rck4vtfwm2bdx-77786251580.shopifypreview.com

[JennerDev]

There should be an option for “Link label” and “Link Url”

• some themes require you to have a button for the link to work, otherwise, you would have to modify the section’s code; you need to know basic html and liquid in order to be able to setup the settings for customization, or just basic html to copy paste some of the existing code and put it in the right places for it to be applied to each section-block

[md249]

Hi @JennerDev

Yes there is that option, but that then adds a button below. I was looking to make the image itself the button.

[JennerDev]

You would have to modify the section’s code; you need to know basic HTML and liquid in order to be able to setup the settings for customization, or just basic HTML in order to copy-paste some of the existing code and put it in the right places for it to be applied to each section-block.

I see you’re using a “Copy of Dawn” theme, what is the version? You may have to edit multiple files to achieve this - if the “multicolumn.liquid” file is using and rendering snippet files, for instance, sometimes it has “multicolumn-card.liquid” in snippets.

• If it is single file code, you can look for the “for” loop which detects and display each column you add (aka each image block), and add a simple link at the beginning of the “div”:

{%- for block in section.blocks -%}
... some random code here from shopify ... 
... find the beginning of the block HTML, sometimes a "- " or "
  "
  ... put the code found below, after the 

- or 

  {% if block.settings.link != blank %}
  
  {% endif %}

  ... then end the link tag, before the end of this block - "

" or ""

{% if block.settings.link != blank %}
  
{% endif %}