Why is my Shopify blog content loading incorrectly on my live site but it looks okay in the preview?

If a blog post you created in Builder looks strange when it is published live onto your site, specifically if you notice the blog post is repeating and any images you have in the post are not loading correctly in the extra/double loaded content, your theme might be wrapping the blog content Builder generates in a <p> tag, which breaks the page when it loads in the browser.

For example if your theme has the line <p class="has-padding-top">{{ article.content }}</p> in article.liquid (or any sections article.liquid includes, sometimes it is called article-template.liquid) this can happen. Technically p tags are not supposed to have certain elements in them (like divs ), and since the content of the article is html that Builder has generated, it gets messed up and ends up looking all funky. The solution is to change the p tag to a div tag in your theme. You can do this by editing the code of your theme wherever the theme is calling {{ article.content }} to display the blog content. This is usually in templates/article.liquid or sections/article-template.liquid, or whatever file holds the main content for the blog tep=mplate you are using.

In this case we would change <p class="has-padding-top">{{ article.content }}</p> to <div class="has-padding-top">{{ article.content }}</div>

Save the change in the Shopify theme code editor and all your blog pages should be looking great!