How to create a reusable author bio in Shopify

Overview

In this tutorial, we will show you how to create a reusable author bio using the Custom Fields metafields app. We'll be creating a bio that is used in many places but the data is maintained in only one place. When the bio changes, all places that the bio is used are updated at the same time. 

This article applies to creating reusable authors on your Shopify blog. The end of this article includes a variation that you can use with authors of products instead of blogs. See "Variation: Referencing an author on a product" at the end.

Getting Started

We'll use a Global metafield (AKA Shop metafield) to store the bios so they can be referenced anywhere on the site. In this example, we're using them on blog posts. Check the end of the article on how to adapt the concept to use it with an author metafield on products.

We're going to take advantage of Field Collections in Custom Fields so we can group each author's data and be able to create an unlimited number of authors with these fields on them.

Setup

In the Custom Fields app, hover over globals and click Add new Field.

Now, from the New Custom Field Menu, set the name of the field to be "Authors" and for the field type, select Field Collection.

Once the new field is created, click Add Field on the newly created field collection. Make this field a text field and call it "Author Name". Then create another field, make it HTML, and call it "Author Bio". Add any other fields you want as part of the reusable bio, such as links to social media for that author, or their website URL.

This is what your field collection should look like when you are finished.

Code Changes

Custom Fields writes most of the code you need for this automatically. We just need to make a couple of quick adjustments.

All of our author bios will be stored grouped together in a list. Our first edit will make it so that the code only prints the author that is listed for the article you're viewing and doesn't print the list of all authors. We're going to reference this template in our theme's liquid file for blog posts. 

To do that, scroll down to the "Edit Code" section of the field collection

Place this code beneath the assign index = i tag:

{% if author_name_array[index] == article_author %}

Note that we're making up the variable article_author. We'll be passing that variable into this template in the next step. 

Place your "end if" just above the closing for loop.

Your code should look like this:

Copy the include statement as shown above, then head over to your Shopify theme code. The include statement is a reference back to the code in the box above it.

Go into your blog post template in your Shopify theme, and paste it just above your article content, or whereever you want the bio to appear. You might want to add a few line breaks after it to separate it from the rest of the content.

Next, we need to send that article_author variable we mentioned above, to make sure that our template knows who the author of the article is. After the closing quotation in the include statement, add "article_author: article.author". See line 10 below.

Adding Content

Now, back in the app, we need to fill in some bio data so we can start seeing some results.

Go to edit globals, and click into the field collection. Click into "Authors Field Collection" and click the button that says Add Author. 

Add the author's EXACT name in the name field as it appears in Shopify as an Author. If the name in Shopify doesn't match what's entered here, it won't print the bio. Fill out the other fields as you'd like. Then click save, and click Add Author for every author in your Shopify store. 

Test!

Visit a blog post for one of the authors you added a bio for. You should see the bio printed at the top of the page.

If you need to update the bio later, you only need to do it in one place.

Variation: Referencing an author on a product

The same general theories apply if you want to use this with products instead of blog posts. Here are the basic changes you'd need to make. All steps are the same as above unless otherwise noted.

1.) Create an author metafield (Custom Field) attached to products. This will be used instead of the article author that's attached to blog posts by default in Shopify. We recommend using a select list field. Simply load up the options in the select list with the names of your authors, then select the author you want to be displayed when creating the product content.

2.) Instead of changing your article template in your theme, change your product template. For the article_author variable, send the metafield you created in step 1. For example, it might look like this: products.metafields.custom_fields['author']. Using that example, the line in your product template would change to

{% include 'custom_fields.shop.authors' article_author: product.metafields.custom_fields['author'] %}

Check this article for details on getting the exact name of your author field.