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.
  1. Loop through the live-willie-shows linklist.
  2. Capture the linklist link and assign to collection variable (This assumes that the linklist is linking to a collection).
  3. 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:

  1. Create a page template.
  2. 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 %}

Leave a comment