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

Tourist
25 0 1

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.

0 Likes
Highlighted
Shopify Expert
727 57 162

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.

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (free performance analysis tool).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
2 Likes
Highlighted
Tourist
10 0 1

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%}

 

0 Likes