Display a blog loop on the homepage of a shopify store

<!-- here we're going to add a blog loop to the homepage of a shopfy store -->
<!-- quite simple - this is raw output -->
<!-- here i'm setting limit to 2 posts and it's from the default "news" blog -->
<!-- if there's a featured image we'll use that - else we'll use the first image of the post -->
<!-- you'll need to add additional markup for display based on your theme. -->


{% for article in blogs.news.articles limit:2 %}


<!-- first image in blog post content -->
        <a href="{{ article.url }}" class="text-colored">
        
                    <!-- if featured image display that -->
                    {% if article.image %}
                    <div class="hero-image-new"><img src="{{ article | img_url: 'large' }}"></div>
                    
                    {% else %}
                    <!-- if no featured image then display first image from post -->
                    
                    {% assign hero_image = '' %}
                    {% assign html_tags = article.excerpt_or_content | split: '<' %}
                    {% for html_tag in html_tags %}
                    {% assign img_check = html_tag | slice: 0,3 %}
                    {% if img_check == 'img' %}
                    {% assign img_tag = html_tag | split: '>' %}
                    {% assign hero_image = '<' | append: img_tag.first | append: '>' %}
                    {% break %}
                    {% endif %}
                    {% endfor %}
                    
                    {% if hero_image.size > 0 %}
                    <div class="hero-image-new">{{ hero_image }}</div>
                    {% endif %}          
                    {% endif %}
        </a>
<!-- /first image in blog post content -->

<!-- title -->
<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>

<p>{{ article.content | strip_html | truncate: 300}}</p>




{% endfor %}

<!-- now take a break -->
<!-- need help with custom shopify theme development? -->
<!-- email us: hello@liquify.design -->
<!-- visit us www.liquify.design -->