How to create a reusable author bio in Shopify

Overview

This tutorial covers the coding and setup to create a reusable author bio for blog posts. Adding and managing author content is done in the interface without writing any code. Simply select an author when creating content. Authors are not users in Shopify and do not need accounts in Shopify.

All coding is copy/paste and no coding is required to update bios after this is built.

This tutorial will walk through:

1. Creating a new Global (shop) field for configuration that will define the authors and the bios associated with them.
2. Creating a Blog Post field to reference the author's bio.
3. Copy/pasting some generic Liquid code into a template to handle printing the bio on the blog post.
4. Updating your theme to print the code.

Create Fields

Global Settings Field

Create a  Global field. From the left sidebar, click on Globals, then +Field. Create a Field Collection. Label the Field Collection Authors. It must have the key of authors otherwise later steps will not work.

Once the Field Collection is created, we need to define the fields we'll need for the author.  

To do this, add one  text field called Name, and another text field called Identifier. Also, created an HTML field called Bio and an Image field called Photo (photos will be optional). 

Blog Post Field

Create a Text (List) field on Blog Posts. 

From the left sidebar, click on  Blog Posts, then +Field. Select Text (List) name the field Author. Choose whichever format you prefer, either Radio Buttons or Select Dropdown.

Later, we'll set up the list options. Skip this step for now.

Add Authors

Now that the structure has been defined, and would work with any number of authors, let's add our author content. 

From the  left sidebar, click on Globals.

In the  Authors field, click +Author. Add some author information. For the Identifier field, keep this simple, for example if the author is Mr. Steven King, you might make the identifier steven_king. This is just used in the code and also shown when selecting the author during content creation, so keep it simple and unique, but descriptive.  

Make a note of the identifiers you used for your authors, they will be used in the next step.

Update List Options

From the left sidebar, click on Blog Posts, then Configure Fields. From the list, click the edit icon under the Author field created earlier.

Fill out your authors as needed.

Copy/Paste Code

From the  left sidebar, click on Blog Posts, then Configure Fields. From the list, click the edit icon under the Author field created earlier.

Generate the template by clicking on  Create Now with Create Default Template selected under More Actions.

Copy this code to your clipboard and paste it into the template, then Save. No changes are needed. The code will look like the screenshot below.

Place the Field for Display

In the Custom Fields app, from the left sidebar choose Blog Posts, then Display Fields. Enable the field for display in the Inner Area.

Add Data For Testing

From the left sidebar, click on Blog Posts and locate a post to test with. Choose an author on your test post. View the post on the front-end of your store and test.

Your test post should have an author with the bio you added.

Remove Default Authoring Information

Some themes will show authoring information associated with the Shopify user by default (as shown above in the Debut theme). This can be turned off by going into Customize for the theme. Look for Blogs and Blog Posts and uncheck the option to "Show Author" on both.