adding products at the bottom of blog post (on Shopify store, not external blogs)

[RachelC]

Hi,

I was wondering if there is a way to add suggested products +/- call to action button below blog posts? I am using the parallax theme. I am sharing blog posts to social media and getting traffic to the blog posts but not necessarily through to the product page.

Thanks.

[JoesIdeas]

You can add the products at the bottom of your blog post template, probably called article.liquid.

Couple ways to add them:

1) You can use Liquid to grab products, maybe from a certain collection. Then you can style with HTML and CSS.

You might do something like this:

{% for product in collections["THE_COLLECTION_HANDLE"].products limit: 6 %}
<!-- This will pull in the product object of the first 6 products in that collection. From there you can display image, title, price, link, etc -->
{% endfor %}

See the product object in the Liquid docs for reference: https://help.shopify.com/en/themes/liquid/objects/product

2) You can use a related products app and include a snippet to show on that page. Hard coding it (option 1) is the fastest way, but using an app might save you some dev time if you're not familiar with liquid.

3) You could create image graphics showing the product, put them at the end of the post, then link to the product page. A simple way would be to screenshot the product from your collection page... or maybe you create a PSD template to of your product cards then whenever you need an image you can swap in the photo and edit the text/price/reviews.

Blogging is great, glad to see you're using it effectively.

[moderntribe]

Hi! I was able to figure this out using the District theme to put a featured collection preview on my blog posts. My full write up on this is here: https://moderntribe.com/blogs/news/how-to-add-a-featured-collection-to-blog-post-in-shopify

Paste this below this section in article-template.liquid below the following 2 lines:

   {{ article.content }}
   </div>

{%- assign tag = article.image.alt -%}
{%- assign collection = collections[tag] -%}
{%- assign product_limit = 8 -%}


{% if collection.products.size > 0 %}
<div class="featured-collection layout-8 lazyload" data-section-id="{{ section.id }}" data-section-type="featured-collection-section">
<div class="wrapper">
    <div class="grid">
      <div class="box header">
        <div class="image-table">
          <div class="details">
              <h4>Shop {{ collection.title | escape }}</h4>
          </div>
        </div>
      </div>
      {% for product in collection.products limit: product_limit  %}
       {% include 'product-grid-item' %}
      {% else %}
        {% for i in (1..product_limit) %}
          {% include 'placeholder-product-grid-item' %}
        {% endfor %}
      {% endfor %}
    </div>
       <div class="box header">
        <div class="image-table">
          <div class="details">
              <a href="{{ collection.url }}" class="button large outline">View more</a>             </div>
        </div>
      </div>
  </div>
</div>
{%endif%}

[jorgenovo04]

@moderntribe do you have an option for debut theme? I'm getting error codes after following your steps.

[moderntribe]

Unfortunately I don’t! Only have this example which I can confirm is
working on ModernTribe.com

[Fabologist]

Thanks for this, I was able to use it in my article posts, slightly different but the main thing is I was trying to pull the article.handle, and if statements, now I don't have to worry about all that.