Create a "Featured Blog Posts" section on Homepage?

Tourist
11 0 5

Good morning (or afternoon, or evening - depending on where you live and when you're reading this).

I should preface by saying I have limited knowledge of html/css etc, but have been able to figure most things out with simple instruction.

I'm using the "Boundless" free shopify theme. It's going well so far. I am looking to add a "Featured Blog Posts" section to my homepage, much like the "Featured Products" Section.

I'd like it to appear after my featured products on the homepage: www.thepresetfactory.com

Does anyone have a solution for this? (Apologies if it's already been covered in another posts, just link me there if so.)

 

Thanks kindly Shopifiers!

0 Likes
Shopify Staff
Shopify Staff
202 0 17

Hi David,

My name is Ardiane, a Guru here at Shopify!

That sounds like a good idea and one that can possibly be done. :-) I've sent an email to the address that you use to login into your account so that we can exchange information and make sure that we know what you'd like to do on your site!

Hoping to hear from you soon! Have a great day!

- Ardiane

0 Likes
New Member
28 0 0

I would also love to know how this can be done, please share!

0 Likes
New Member
5 0 0

I am trying to do this as well. Please post any tips!

 

Thanks!

0 Likes
Tourist
11 0 5

Okay, So I'm using the boundless theme, and this worked for me:

You'll need to do a bit of html, which I don't know about, someone has done it for me:

 

1. Go to edit your HTML, and under Snippets, create a new Snippet.

2. Name the Snippet "home-articles", and save it with the following code:

{% assign blog_handle = 'news' %}

{% unless blogs[blog_handle].empty? or blogs[blog_handle].articles.size == 0 %}

{% if blogs[blog_handle].articles.size >= 3 %}
  {% assign container_width = 'one-whole' %}
  {% assign article_width = 'large-up--one-third medium--one-third small--one-whole' %}
{% elsif blogs[blog_handle].articles.size == 2 %}
  {% assign container_width = 'large-up--two-thirds large-up--push-one-sixth' %}
  {% assign article_width = 'large-up--one-half medium--one-half small--one-whole' %}
{% elsif blogs[blog_handle].articles.size == 1 %}
  {% assign container_width = 'large-up--two-thirds large-up--push-one-sixth' %}
  {% assign article_width = 'one-whole' %}
{% endif %}

<hr class="hr--clear hr--small">

<div class="grid">
  <div class="grid__item grid-item {{ container_width }}">
    <div class="section-header text-center">
      <h2 class="section-header--title">LATEST ARTICLES</h2>
    </div>
    <div class="grid" style="padding-left: 20px; padding-right: 20px">
      {% for article in blogs[blog_handle].articles limit: 3 %}
        <div class="grid__item grid-item {{ article_width }}">

          <p class="h4">{{ article.title | link_to: article.url }}</p>
          <p><small>{{ article.published_at | date: '%B %d, %Y' }}</small></p>

          {% comment %}
            Let's extract an image from article.excerpt_or_content.
            We will replace the image suffix with _1024x1024.
            The image will point to the article page.
          {% endcomment %}

          {% assign article_has_image = false %}
          {% assign content = article.excerpt_or_content %}

          {% if article.image %}
          <p>
            <a href="{{ article.url }}">
              <img src="{{ article.image | img_url: '1024x1024' }}" alt="{{ article.title | escape }}" />
            </a>
          </p>
          {% endif %}

          {% if article_has_image %}
            <p>{{ content | strip_html | truncatewords: 50 }}</p>
          {% else %}
            <p>{{ content | strip_html | truncatewords: 100 }}</p>
          {% endif %}
          
          <p><a href="{{ article.url }}">Read more →</a></p>

        </div>
      {% endfor %}
    </div>
  </div>
</div>
{% endunless %}

 

3. Go to your index.liquid. I inserted the latest articles just above my footer, so scrolled all the way to the bottom of the index.liquid file, and inserted the following:

{% include 'home-articles' %}

 

4. Save index.liquid. You should now have the latest three articles above your footer on your homepage. As I said, this is what seems to be working for me, but someone else did it, and I have limited knowledge to help you further.

 

Let me know how you guys get on with this. And if anyone figures out a way to change the articles from "latest articles" to specific ones.

1 Like
New Member
5 0 0

I'm having no luck. I changed the blog handle name to my blog but nothing is showing up.

I'm not educated in html/css so the blog handle name was my only idea, no luck.

0 Likes
Tourist
11 0 5

Sorry man, that's as much as I know :-(.

 

What theme are you using?

0 Likes
New Member
5 0 0

Boundless, same as you. Your site looks great by the way!

And thanks for the help! It's the most info I've found so far, maybe I can still get it to work. 

0 Likes
Tourist
11 0 5

Hmm that's strange, i guess there's more too it.

Mine was done by a shopify person. Using the boundless theme (or any of the free themes) you get 60mins design time for free by one of the shopify designers. If you haven't used up your time already, perhaps you could ask them to implement this for you?

0 Likes
New Member
5 0 0

I have not, I'll look into it. Thanks!

0 Likes