Lessons Learned: Shopify Blog Images Not Showing Up in E-mail Subscriptions February 18, 2016 08:00 7 Comments

Some quick announcements:

• Planners and calendars are 40% off! Snag one before we run out!
• So remember that time we filmed a video flipping through the UPstudio Planner to help you all visualize the layout? Well, we found another solution (which was way easier than filming a video..whomp whomp). Flip through a sample here, or on the planner product page.

We have learned so much about starting a business, creating a website, creating a product, finding suppliers, (the list goes on and on) since we launched UPstudio last year. That being said, we have decided to start a blog series sharing things that we've learned on our journey that we think could be helpful to others. We plan to post once a month sharing something that we have learned or figured out. These posts might not interest all of our readers, but for the one person that is going through the same struggle, you're welcome, and good luck!

We use Shopify as the platform for our website (in a future post we will share why we chose Shopify instead of all of the other options out there). We use one of the free website templates with some added applications and coding. 

One of the factors that played into us choosing Shopify is that it offers blogging along with e-commerce capabilities. We understand the power of a blog and we felt it was the best way for us to share our story and share more about our products. There is so much that we have figured out in regards to our blog but today we are focusing on images in e-mail subscriptions.

We have supporters that aren't on social media and aren't typical blog readers that want a way to know that we added a new blog post. An easy solution is to send our blog out via e-mail for those that sign up. The best free options we found to do this were FeedBurner and MailChimp. In the end we chose MailChimp because we liked that there was more customization regarding the e-mail appearance. There are easy tutorials on both websites showing how to set up your subscription, just click on the links above. You can sign up to receive our blog via e-mail here.

We set up everything in both platforms to test out how the e-mails came through and to see what we liked and didn't like prior to advertising this service. Everything looked great, except our images weren't coming through on either platform. Lets be honest, no one wants to read a blog post with no pictures. 

Example:

A sample of a previous blog post:

How it showed via e-mail with the FeedBurner e-mail subscription:

How it showed up via e-mail with the MailChimp e-mail subscription:

So, yea, not good... We proceeded to scour the internet for answers, trying every little thing we came across, all of which didn't work, leading us to believe we were in the minority. So, we asked the question, how is our blog different from the average blog out there? The light bulb moment: We are hosted by Shopify instead of a typical blog platform like Wordpress, Blogger, or Tumblr. So we change our focus to the Shopify forums (uber helpful if you haven't checked them out). We finally came across this discussion which explained our issue and had a simple fix. (This one paragraph covering like 3 months of searching and experimenting seems anticlimactic. For us, finding this forum, was like finding a gold mine.)

Summary of what we learned and how to fix it:

The blog feed (RSS) from Shopify sends your images protocol-less. The easy fix is to manually add the "https:" protocol to the source code. (Note that there are apps in the Shopify store that do this for you if you have have tons of pictures. These apps however cost money, so not an option for us.)

In layman's terms: When MailChimp or FeedBurner was reading our blog feed from our website there was an error. Our website wasn't explaining the location of our images correctly, so MailChimp or FeedBurner couldn't find them. So we just had to fix the explanation.

How to fix the issue:

When placing the picture above into our blog post, the html code that Shopify automatically generates looks like this:

In order for MailChimp, FeedBurner, or any other e-mail subscription program to locate your image file you simply add the text "https:" to the code. Do this by clicking on the "<>" button in the formatting menu:

Find the code regarding your picture and add the text in the following location:

To get out of the code just click on the "<>" button. You will notice that nothing in the view area has changed at all. The only difference is now MailChimp, FeedBurner, or whatever platform you are using can now find your image to display. VOILA! 

All of your images are stored within your site with their own link address. Essentially all you are doing is completing the link address so that your image can be found. So if you need a reminder of what text to add in your code, just find the link address for you image by going to Settings-> Files and finding that image.

Example:

Hopefully you could follow our fix explanation. For all those coding geniuses out there, we probably didn't use all the correct terms, so we apologize. 

Hopefully this helps fellow Shopify bloggers!

(Now let us go add the "https:" to all our images in this post so you can see them in our e-mail!)