How To Add Author Box To Articles [No App Required]

View Code Here

Step 1: Go to Content → Metaobjects → Click Add definition

Step 2: Name the definition as “Authors”

Step 3: You will need to add 4 fields. Click add fields to add the below fields:

• Field 1:

  • Select Single Line Text as value type
  • Type “Name” as the name of the field
  • Click Add

  

• Field 2:

  • Select File as value type
  • Type “Image” as the name of the field
  • Uncheck Videos in the Accepted File Types
  • Click Add

• Field 3:

  • Select Single Line Text as value type
  • Type “Link” as the name of the field
  • Click Add

  

• Field 4:

  • Select Rich Text as value type
  • Type “Description” as the name of the field
  • Uncheck Videos in the Accepted File Types
  • Click Add

  

Step 4: Go to Settings → Custom Data → Blog Posts

Step 5: Click Add Definition → Enter “Author” as the Name → Click Select Type → Choose Metaobject → Select Authors as the Reference → Save

Step 6: Paste the below code in your article theme code.

If you are using Superstore Theme you need to paste this code in you static-article.liquid file. Please watch video tutorial above to see how to do it.

     {% assign author = article.metafields.custom.author.value %}
     
		 {% if author != blank %}
       <div class="author-box-container">
          <div class="author-main-info">    
            {% if author.image != blank %}
              <img alt="{{ author.name.value }} profile picture" src="{{ author.image.value | image_url }}" style="border-radius: 50%;" width="70px" height="auto"/>
            {% endif %} 
          <div>
              <p class="author-box-title" ><strong>{{  author.name.value }}</strong></p>
              <a href="{{ author.link.value }}"  class="author-link" target="_blank">Learn More</a>
          </div>
          </div>
          <div class="author-bio-container">
            {{  author.description | metafield_tag   }}
          </div>
      </div>
      {% endif %}
      
      <style>
          .author-box-container {
            background-color: #f4f4f4;
            padding: 20px;
            margin-top: 20px;
            margin-bottom: 20px;
          }

          .author-link {
            text-decoration: underline; 
            display: inline-block; 
            margin-right: 8px; 
            font-size: 14px;
          }

          .author-box-title {
            font-size: 16px; margin-bottom: 0px;
            margin-top:0px;
          }
          
          .author-main-info {
            display: flex;
            gap: 20px;
            align-items: center;
          }
          
          .author-bio-container {
            margin-top: 15px;
          }
          
          .author-links {
            text-decoration:underline;
          }
      </style>

Step 7: You can now add and manage authors by going to Content → Metaobjects → Authors → Add Entry

Final Step: You can assign author to any articles by going to your blog post → scroll down to Metafields