Artists Page

If you are a music label with various artists, you probably have all the works by each artist in their own collection. These collections are significant to your customers, but are probably not the only collections you have in your store. Follow this guide to setup a dedicated artists page which will automatically fetch all the collections you have indicated are for artists.

NOTE: The method used in this guide may seem like a hack where other methods would be obviously more suitable. This turns out not to be the case. Collections can't have tags (only products within collections have tags). Third party apps which allow metafields don't necessarily support metafields on collections (the free and recommended Metafields Editor doesn't support collection metafields at the time of writing, for example).

Getting started

Here is the set of collections for the fictitious store Giraffic Records. You can see I have set up some collections for each of the artists. I also have a collection for merchandise (Collectables) and a collection for companion books published by Giraffic Records.

If you haven't done so already, make sure that each artist/act has their own collection before you continue.

Create a new collection template

In order to seperate our artists from the other collections, we are going to create a new collection template called collection.artist.liquid.

To do this, jump on to your store dashboard, pull up the theme section of your online store (click Online Store under Sales Channels, then select Themes). You may have already visited this section to apply the Label theme.

There will be a great big button with the words Customize theme. Don't press it, just locate where it is and the buttons its grouped with. Click the rightmost button of the three in the group (the one with an ellipse icon) and select Edit HTML/CSS. It should look something like this:

Edit HTML/CSS selected in menu

We want to add a new template, so go ahead and click Add a new template: Add a new template

We want to create a template for collection called artist.

New template form filled in

That's all we have to do for this part.

The template code that we're given by default basically just inherits the default collection template. It will look exactly the same if a collection uses this template or no template. We're not actually relying on the template providing any special behaviour itself, but if you want the template to do different stuff, you can do that too.

Set each artist collection to use collection.artist as its collection template

Next, for each of the artist collections we need to change the collection template to collection.artist (this is to get around that collections cannot have their own tags).

This is easy enough to do, just jump across to your collections, pull up one of your artist collections and look for the theme template option. Go ahead and select collection.artist:

set collection template

If you add a new artist later on, you will need to remember to perform this step when creating their collection.

What to do if you already have custom collection templates

Worried about your own custom collection templates? You can have as many custom templates for your artist collections as you need, just make sure they all start with the prefix artist- (including the dash at the end).

This technique is only practical for having a single category (artist in our case). If you want to have overlapping free-flowing collection tags, so that you can have an artist page, and a british page, and a sixties page, and a ... You have gone past the usefulness of this article and you need metafields, which aren't covered here.

Create the artist page template

We are getting closer. In order for the magic to happen, we need to do some custom liquid code, Shopify's templating language. Since we can't drop custom liquid code in a normal page, we're going to use a template instead.

For demonstrating how all the collection template stuff comes together, I'm going to create a page showing each artist name together with the artist collection description. Later, I will show some cooler pages you can create, but the basic principle is the same.

All the magic happens in a page template, so head back to the Edit HTML/CSS part again but this time make a template for a page instead of a collection. You can call it whatever you want, but I'm going to stick with artists.

Upon creating the new template, you'll be dropped into an editor full of liquid code. Go ahead and delete everything inside and replace it with this:

<!-- /templates/page.liquid -->
<section class="page">
  
  <header class="grid--table collection-header">
    <div class="grid__item large--one-half">
      <h1 class="standard-index">{{ page_title }}</h1>
    </div>
  </header>
  
  <div class="single-product section-product">
{% for collection in collections %}
	{% assign template_parts = collection.template_suffix | split: '-' %}
	{% assign template_prefix = template_parts | first %}
	{% if template_prefix == 'artist' %}
    
    {% capture order %}{% cycle 'text-right', 'text-left' %}{% endcapture %}
    <div class="wrapper">
    <div class="section-content">
      <div class="grid--table product-single">
		{% if order == 'text-right' %}
        <div class="grid__item large--one-third medium--one-whole text-right single-product-image">
          <div class="product-single__photos" id="ProductPhoto">
              
              <a href="{{ collection.url }}" ><img src="{{ collection.image | img_url: '1024x1024' }}" alt="{{ collection.image_alt | escape }}" id="ProductPhotoImg"></a>

          </div>
        </div>
        {% endif %}
        <div class="grid__item large--two-thirds medium--one-whole single-product-content {{ order }}">
          <h3 class="standard-single {{ order }}">
            <a href="{{ collection.url }}" >{{ collection.title }}</a>
          </h3>
            <div class="feature-copy">{{ collection.description }}</div>
        </div>
        
        {% if order == 'text-left' %}
        <div class="grid__item large--one-third medium--one-whole text-right single-product-image">
          <div class="product-single__photos" id="ProductPhoto">
              
              <a href="{{ collection.url }}" ><img src="{{ collection.image | img_url: '1024x1024' }}" alt="{{ collection.image_alt | escape }}" id="ProductPhotoImg"></a>
          </div>
        </div>
        {% endif %}
      </div>
      </div>
      </div>
    {% endif %}
{% else %}
<div class="rte feature-copy">
        {{ page.content }}
</div>
{% endfor %}
</div>
</section>

The key lines in this example are these:

{% assign template_parts = collection.template_suffix | split: '-' %}
{% assign template_prefix = template_parts | first %}
{% if collection.template_prefix == 'artist' %}
    <!--Do stuff with artist collection here-->
{% endif %}

The first two lines take care of the custom template situation I mentioned earlier. The if statement will only be entered into if the collection has a template either called artist or which starts with artist-.

You can put whatever you want in the middle of the {% if ... %} and {% endif %} lines.

Create the page

The last step is the easiest: simply create an Artists page and set its template to the one we just created ( page.artists in my case). You can then navigate to the page and check it out, you don't have to add any content to the page itself. You should see a list of the artists with their name and description:

What to do if it didn't work

If the page exists but doesn't show anything, first check that the page template is set to the one you created with this article. If that is correct, check that each artist collection is using collection.artist as its template or some variant of collection.artist-foobar where foobar is what ever word you want. Make sure you use a dash - as a separator.

Keep in mind that the artist name and description come from the underlying collection itself and there is nothing that can be done about that without moving onto metafields.

This extension is not limited to artists, you can use it with authors or some other significant collection category.