Skip to content

Instantly share code, notes, and snippets.

@Cam
Last active August 29, 2015 14:13
Show Gist options
  • Save Cam/cffe0a2cd533c6757814 to your computer and use it in GitHub Desktop.
Save Cam/cffe0a2cd533c6757814 to your computer and use it in GitHub Desktop.
Basic Shopify Brand Image Link List
<ul class="brands">
{% for link in linklists.brands.links %}
{% unless link.object.image.src == blank %}
<li>
<a href="{{ link.object.url }}" title="{{ link.object.title | escape }}">
<img src="{{ link.object.image.src | collection_img_url: 'medium' }}" alt="{{ link.object.title | escape }}" />
</a>
</li>
{% endunless %}
{% endfor %}
</ul>
<style>
ul.brands { list-style-type:none;text-align:center; }
ul.brands li { display:inline-block;vertical-align:middle; }
ul.brands li a { text-decoration:none; } /* Just in case any trailing spaces are rendered (they wont be!) */
ul.brands li a img { width:100%;height:auto;max-width:150px;max-height:100px;margin:20px;opacity:0.5; }
ul.brands li a:hover img { opacity:1.0; }
</style>
@Cam
Copy link
Author

Cam commented Jan 19, 2015

This will create a really simple responsive brand image list to feature on your Shopify store.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment