Add Gravatar Images Next to Your Shopify Comments

Updated 07/24/2024, Posted 07/24/2024 by James Parsons James Parsons •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

Hi, I'm James Parsons! I founded Content Powered, a content marketing agency where I partner with businesses to help them grow through strategic content. With nearly twenty years of SEO and content marketing experience, I've had the joy of helping companies connect with their audiences in meaningful ways. I started my journey by building and growing several successful eCommerce companies solely through content marketing, and I love to share what I've learned along the way. You'll find my thoughts and insights in publications like Search Engine Watch, Search Engine Journal, Forbes, Entrepreneur, and Inc, among others. I've been fortunate to work with wonderful clients ranging from growing businesses to Fortune 500 companies like eBay and Expedia, and helping them shape their content strategies. My focus is on creating optimized content that resonates and converts. I'd love to connect – the best way to contact me is by scheduling a call or by email.