How to create category thumbnails in Big Cartel

July 24, 2012

Here’s a quick one we’ve devised while working on a client’s custom theme for Big Cartel: how to have a thumbnail image to represent your categories. Big Cartel does this out of the box for products because each product has one or more images assigned to it but it’s a bit trickier to work something out for categories.

You’ll need a Platinum plan or greater in order to edit your home page content, plus access to a hosting account for your images. Category thumbnails work by creating images with the same file name as the category permalink – so if your category is called Soft Furnishings, the permalink will be soft-furnishings, and your file name will be soft-furnishing.jpg (or whatever image format you choose).

On your home page (or wherever you wish to display your category thumbs), you’ll need something like this:

{% for category in categories.active %}}
<div class="category-menu-thumb">
<div class="{{ product.css_class }} product-wrap">
<a href="{{ category.url }}" title="View {{ category.name | escape }}" class="product-a">
<div class="product-thumb thumb-{{ category.permalink }}" style="background:url(http://yourhostaccount.com/thumb-{{ category.permalink }}.jpg);">
</div>
</a>
</div>
<div>
<h2 class="product-title"><a href="{{ category.url }}" title="View {{ category.name | escape }}" class="product-a">{{ category.name }}</a></h2>
</div>
</div>
{% endfor %}

You’ll notice that the background image is declared dynamically:

<div style="background:url(http://yourhostaccount.com/thumb-{{ category.permalink }}.jpg);">

Assuming you’ve got the right path and file name to your images, your Big Cartel store should now display category thumbs.