Display Featured Collection Image From Link List
General:
This technique was first used on the willie Nelson Live Landing page. https://shop.willienelson.com/pages/live-willie-shows
The Problem:
Willie Nelson needed a landing page to display links to collections and be easily editable.
Solution:
There was a pre-existing linklist that contained links to the appropriate collections.- Loop through the live-willie-shows linklist.
- Capture the linklist link and assign to collection variable (This assumes that the linklist is linking to a collection).
- Looks to see if the collection has a featured image, if it does then display the image, if not then display the image of the first product in the collection.
The Code:
- Create a page template.
- Add the following code and style appropriately.
{% for link in linklists.live-willie-shows.links %}
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
{% assign collection = link.object %}
<a href="{{ link.url }}">
<span>{{ link.title }}</span>
{% if collection.image %}
<img src="{{ collection | img_url: 'master' }}" />
{% else %}
<img src="{{ collection.products.first | img_url: 'large' }}" />
{% endif %}
</a>
</div>
{% endfor %}