Linking a column of a multicolumn to a collection - Is this possible

Solved
HRoss82
Excursionist
21 1 1

I have created a multicolumn section on the home page.
In each column I have an image with description text underneath and below that a link to the collection.
At the moment if you happen to click on the image - it is opening it full size and not taking you to the collection - it is only the link that is taking you to the collection
What I would like to is to link the whole of the column to a collection so that wherever you click in the column you will be taken to the collection.


Is it possible to get the whole of the column to link to the collection (and not opening the image seperatly) and if so how do I do this?

 

Alternatively, if there was a way to add text underneath the link in a Collection List element, this would probably also work - but so far I haven't found a solution yet.

 

Please note that I am not that knowledgable using code yet - still learning - but if it is a solution that will work and you tell me where to put it I will put it in place.

 

I am currently using the Craft Theme

 

Thanks for help in advance

Accepted Solution (1)
NomtechSolution
Trailblazer
1245 111 139

This is an accepted solution.

  1. Find the code for each column: Within the multicolumn section code, locate the code for each individual column. It will likely be contained within a loop that iterates over the columns.

  2. Wrap each column code with a link to the collection: Wrap the code for each column with an anchor (<a>) tag that links to the desired collection. Here's an example of how to modify the code:

 

{% for column in section.columns %}
  <a href="{{ column.collection.url }}">
    <!-- Your column content here, including image, description, and link -->
    <img src="{{ column.image.src }}" alt="{{ column.image.alt }}">
    <p>{{ column.description }}</p>
    <a href="{{ column.collection.url }}">Shop Now</a>
  </a>
{% endfor %}

 

Chat on WhatsApp: +923246370042
Need a Shopify developer? noumanmasood64@gmail.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications

View solution in original post

Replies 2 (2)
NomtechSolution
Trailblazer
1245 111 139

This is an accepted solution.

  1. Find the code for each column: Within the multicolumn section code, locate the code for each individual column. It will likely be contained within a loop that iterates over the columns.

  2. Wrap each column code with a link to the collection: Wrap the code for each column with an anchor (<a>) tag that links to the desired collection. Here's an example of how to modify the code:

 

{% for column in section.columns %}
  <a href="{{ column.collection.url }}">
    <!-- Your column content here, including image, description, and link -->
    <img src="{{ column.image.src }}" alt="{{ column.image.alt }}">
    <p>{{ column.description }}</p>
    <a href="{{ column.collection.url }}">Shop Now</a>
  </a>
{% endfor %}

 

Chat on WhatsApp: +923246370042
Need a Shopify developer? noumanmasood64@gmail.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
HRoss82
Excursionist
21 1 1

Where would I find the code for the multi column section please?

- I am just beginning editing code so still new to this

I have found multicolumn.liquid in the Edit code : Sections

and also in Assets - sections-multicolumn.css