Add Gravatar Images Next to Your Shopify Comments

James Parsons by James Parsons • Updated Jul 24th, 2024 •0 Comments•

Most Shopify themes don't have Gravatar support out of the box. Many commenters already have an avatar registered to their email, and it's great to display those to make your comments more personable and engaging. There's a reason every social network ever has avatars and user photos, right?

Thankfully Shopify supports the MD5 filter, which is needed to convert your email comments to strings before they can be sent to Gravatar, which makes this code very simple.

You'll want to open your theme's main-article.liquid file and then look for your comment section. It will look a little like the code below, just do a CTRL+F search for the word "comment":

 {%- for comment in article.comments -%}
      <article id="{{ comment.id }}" class="article-template__comments-comment">
        {{ comment.content }}
          <footer class="right">
              <span class="circle-divider caption-with-letter-spacing">{{ comment.author }}</span>
              <span class="caption-with-letter-spacing">
                {{- comment.created_at | time_tag: format: 'date' -}}
              </span>
          </footer>
      </article>
{%- endfor -%}

This is the magic line to add:

<img src="https://www.gravatar.com/avatar/{{ comment.email | md5 }}?s=80&d=robohash" alt="{{ comment.author }}'s Avatar" class="user-avatar">

So your final code might look something like this:

 {%- for comment in article.comments -%}
      <article id="{{ comment.id }}" class="article-template__comments-comment">
        {{ comment.content }}
          <footer class="right">
              <!-- Newly added Gravatar here --> 
              <img src="https://www.gravatar.com/avatar/{{ comment.email | md5 }}?s=80&d=robohash" alt="{{ comment.author }}'s Avatar" class="user-avatar">
              <span class="circle-divider caption-with-letter-spacing">{{ comment.author }}</span>
              <span class="caption-with-letter-spacing">
                {{- comment.created_at | time_tag: format: 'date' -}}
              </span>
          </footer>
      </article>
{%- endfor -%}

That's it! Now your comments will load the Gravatar image associated with your commenter's email.

You might want to add a little styling to make these look nicer, like making the images rounded or floating them to the left. Example:

.user-avatar {
    float:left;
    display:block;
    margin-right:30px;
    margin-bottom:30px;
    border-radius:50px;
}

Feel free to play with the styling as needed.

If this helped you or if you have any questions, please drop me a comment below!

Related Code Snippets

Written by James Parsons

James Parsons is the founder and CEO of Content Powered, a premier content marketing agency that leverages nearly two decades of his experience in content marketing to drive business growth. Renowned for founding and scaling multi-million dollar eCommerce businesses through strategic content marketing, James has become a trusted voice in the industry, sharing his insights in Search Engine Watch, Search Engine Journal, Forbes, Entrepreneur, Inc, and other leading publications. His background encompasses key roles across various agencies, contributing to the content strategies of major brands like eBay and Expedia. James's expertise spans SEO, conversion rate optimization, and effective content strategies, making him a pivotal figure in the industry.