Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
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.
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 %}
This is an accepted solution.
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.
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 %}
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
User | RANK |
---|---|
182 | |
150 | |
80 | |
72 | |
61 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023