Is Adding Products to Blog Posts on Shopify Possible with Liquid Code?

Emer_Kelly
Shopify Partner
5 0 5

Hello,

I'm trying to think of the smartest way to add products to my blog posts. I've tried using the 'Buy Button' but it's pretty useless when used on a Shopify site, as it doesn't allow the user to add the product to the site cart. The only options are to have an additional cart, make it open a product modal, or make it open a straight-to-checkout modal. I want to be able to add a product similar to how products appear in the collections. Just a little grid with image, price, and add to cart button. Users can add the product to the cart, and then continue browsing.

One idea I had was to add some liquid code to the article template, right atfer {{ article.content }}  that says something to the effect of "If the article content contains a product title (or a link to a product), then show that product." Does anybody know if this is possible? I have some Liquid skills but not enough to achieve this on my own.

This is an example of what I want it to function like. In this case I just copied the div and pasted it at the end of the article, so pricing etc. is static, which is not ideal: https://colouredraine.com/blogs/tutorials/lovelies-eyeshadow-palette-tutorial

I'd really appreciate any help 🙂

Replies 22 (22)

Louisa_Latham
Tourist
3 0 1

+1, exactly the same boat and thoughts on functionality.

Emer_Kelly
Shopify Partner
5 0 5

Louisa, I ended up getting a plugin to achieve it. It works quite well and is affordable: https://apps.shopify.com/pro-blogger

Louisa_Latham
Tourist
3 0 1

Thank you so much for your response, really appreciate your help and advice, looks like it should do exactly what we are after! 🙂

Yoan
Visitor
1 0 0

Hi, I came across the same issue.

Anyone can suggest plugin or anything really?

 

Thank you

 

https://talesoftree.com/

KLIMCHI
Visitor
3 0 0

Yes, anybody? Please?

PonyTask
Shopify Partner
24 1 5

Hi @KLIMCHI,

Do you want to add single or multiple products to a blog post? I can help you with this issue. It needs some custom code to enable this feature. You would DM me for further details.

Thanks

moderntribe
Excursionist
11 0 5

Hi! I was able to figure this out using the District theme to put a featured collection preview. 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%}
Fabologist
Excursionist
17 0 3

Are you talking something like this that we accomplished for reviews?

 

Screenshot_2021-01-15 5 Rompers to Get You Ready for Spring.png

deliziaN
Tourist
10 0 2

I can only see article-card.liquid ?

 

I'm a little annoyed that Shopify has made this so difficult that one has to adjust the code.

maccurt
Visitor
1 0 20

The fact that this is just not built in is pathetic. I am starting to dislike shopify more and more. This is a simple feature that should just be part of the basic theme. I am staring to feel like this whole platform is more about upselling me apps and crap to do the most basic of thing, For what I pay every month is is surely lacking, I will be looking for something more user friendly.

charlieknoles
Visitor
1 0 10

Couldn't agree more. Embedding products in any page or blog is built in to Wordpress + woocommerce. I'm working in Shopify for the first time for a client and I am stunned that this isn't a basic feature. 

 

I thought shopping was the entire purpose of this ecosystem!

Andrewjn220
Excursionist
16 0 5

Yes the platform is a bait and switch program. They want to keep shoving apps in your face to achieve basic functionality. It's a joke. I have been down this road.

Willosharp
Tourist
3 0 4

You don't have to do any coding for this. Just use the buy button app by shopify to add any product to a blog post and it's free. 

Andrewjn220
Excursionist
16 0 5

Nothing free about it. Just another bait and switch keep buying more app BS story. 

Andrewjn220
Excursionist
16 0 5

I was wrong on this. The Buy Back App is a Free Shopify App and it's super easy to create Buy Buttons on any page.

beschloo
Shopify Partner
5 0 1

say you're sorry !

Andrewjn220
Excursionist
16 0 5

It was implied and the portion about baiting solutions with apps is nto sustainable for many. Most of it can be easily coded but shopify chooses to leave out the essentials as part of the strategy

Aurnik
Shopify Partner
51 1 4

I don't know if this is true. Most of the money from apps goes to independent developers outside of Shopify.
And you don't need apps to have a successful store. For some stores, the expense makes sense because the apps are helping them ultimately increase sales.

Product Embed - embed products into blog posts - shopify.com/product-embed
Blog Sync - copy new & updated blog posts across stores - shopify.com/blog-sync
vkeycaps
Visitor
2 0 0

This one is good. Not perfect but good enough

GrahamRB
Visitor
1 0 0

Thank you - just what I was looking for! Now I can add a collection of products beneath a blog post, which means that sending a newsletter that links to a post now make more commercial sense.

Astrologer, website analyst and cat butler 🙂
EverythingGirl
Visitor
2 0 0

Does this need to be done at the time the blog is written or can I add to the "blog" template? I'm looking for something that can basically add the listing to every blog post automatically and maybe if I was lucky retroactively adding to already published posts?!

EverythingGirl
Visitor
2 0 0

I just added a shopable collection to the bottom of my blog posts landing page as well as individual posts, I'm not sure if this is just part of my particular theme or if all themes allow for it. It was fairly straight forward and did not require a plugin or code. I just added through template customization. Hopefully this is helpful.