Adding A Blog Feed to the Home Page

Follow

Comments

8 comments

  • Avatar
    Zetya Support

    Hi Therese,

    Do you want to list articles? If so, add something like this to index.liquid (Theme > Template Editor) around line 42:

    {% assign blog = blogs.news %}
    {% for article in blog.articles %}

    <h3 class="blog"><a href="{{article.url}}">{{ article.title | escape }}</a></h3>

    <div>

    {% if article.excerpt.size > 0 %}

    {{ article.excerpt }}

    {% else %}

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

    {% endif %}

    </div>

    <div class="postmeta">

    <p>

    {% if article.tags.size > 0 %}

    Filed under: {% for tag in article.tags %}{{ tag | link_to_tag: tag }}{% unless forloop.last %}, {% endunless %}{% endfor %}

    {% endif %} | 

    Posted by {{ article.author }} | <span class="date">{{ article.created_at | date: "%B %d, %Y" }}</span> | <a href="{{ article.url }}" class="readmore">Read more...</a>

    {% if blog.comments_enabled? and article.comments.size > 0 %}

     | <a href="{{ article.url }}#comments" class="comments">{{ article.comments.size }} {{ article.comments.size | pluralize: 'Comment', 'Comments'}}</a>

    {% endif %}

    </p>

    </div>

    {% endfor %}

    I took this code from blog.liquid. You could also look at the code in latest-news-widget.liquid

    Thanks, Gavin.

  • Avatar
    Kate Spence

    Hi Gavin,

    I'm using the React theme which divides the footer area into 3 'columns'. I have things in the left and middle columns but would like a blog feed in the right hand column. How do you reckon I go about it? Any and all help, MUCH appreciated.

    Kate

  • Avatar
    Zetya Support

    Hi Kate,

    This forum is for help with Shopify Concierge products only I'm afraid. For help with the React theme please contact the theme developer.

    Thanks, Gavin.

  • Avatar
    Luis Javier Alvarez Rodriguez

    Hello Gavin,

    What if only want to show the last two post of an article? Can I do that? Also I add this code you show but it shows vertical and I would like it to be horizontal. Is this posible? 

    LJAR

  • Avatar
    Zetya Support

    @LJAR you can limit the number of articles shown by changing this:

    {% for article in blog.articles %}

    To this:

    {% for article in blog.articles limit:2 %}

    For more info please see the Shopify documentation: Iteration Tags

    Changing the layout from vertical to horizontal requires changes to the HTML and CSS. I'd recommend getting a developer to help with this:  experts.shopify.com

    Thanks, Gavin.

  • Avatar
    Jen

    This was really helpful.  Do you know how to add the Featured Image beside each post in the feed?

  • Avatar
    Zetya Support

     

    Hi Jen,

    Take a look on the Shopify forums: https://ecommerce.shopify.com/c/ecommerce-design/t/how-to-add-images-to-blog-preview-on-home-page-224819

    Thanks, Gavin.

     

  • Avatar
    Jason

    Hi, 

    In order to structure this into a three Column grid would you need to create a div structure that's not using the Timber  one-third or one-half column approach? Or how would you make this work in columns?

Please sign in to leave a comment.