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

RachelC
Excursionist
25 0 7

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
JoesIdeas
Shopify Expert
1260 115 317

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 experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfillment + more automations).
More apps: Theme Scientist (A/B testing), Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).
moderntribe
Excursionist
11 0 5

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
Tourist
3 0 0

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

 

Screen Shot 2020-10-30 at 10.57.29 AM.png

0 Likes
moderntribe
Excursionist
11 0 5
Unfortunately I don’t! Only have this example which I can confirm is
working on ModernTribe.com
0 Likes
Fabologist
Excursionist
17 0 3

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.

0 Likes