fbpx
HIDE

How to add products to blog post in Shopify without app

Add products to your Shopify's blog post to let your customers click on them and continue the purchase process.
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on pinterest
shopify add product to blog post feature image

If you’re looking for an easy solution on Shopify: “add products to blog post” without installing an application, this post is made for you. 

There’s no need to have Add to Cart or add a Buy Now button in your Shopify store, just listings with the product images, titles, price, and links to the actual product pages.

In today’s post, we’ll show you how to add products to your blog posts in Shopify.

Adding products to blog post in Shopify

1. Use product name

shopify add product to blog post example

Shopify allows you to add the product to blog post in 2 ways:

  • Use product name
  • Use product tag

Before adding products to your post, you need to create a collection that contains all products in your store first. Then, make sure to split your article into paragraphs and make room for the products you want to include.

Step 1: Split your content

To split your content, place this tag at the place you’d like to split into two components: 

=== split content ===

It should look like this:

shopify add product to blog post split content

Now, put the product name you want to appear within the article and “=== split content ===” under it like the image below:

shopify add product to blog post split example

Click Save.

Step 2: Edit code

Next, you need to edit the code for your theme. Here’s how to do that:

  1. From your Shopify admin, go to Online store > Themes > Actions > Edit code.
  2. Click Sections > article-template.liquid
  3. Find {{ article.content }}
shopify add product to blog post edit code

Then, replace {{ article.content }} with the following code:

{% assign my_description = article.content | split: '=== split content ==='  %}  
         {% assign  my_description_size = my_description.size | minus: 2 %}
          {{ my_description | first}}
         <div class="show-product-list"> 
             {% for i in  (1..my_description_size) %}                   
               {%- assign name_product = my_description[i] | strip_html | strip -%}
               {% paginate collections.all.products by 100 %}
               {%- for product in collections.all.products -%}
                   {% if product.title == name_product %}
                      <div class="product_item">
                       {% include 'product-card-list' %} 
                     </div> 
                   {% endif %}
               {%- endfor -%}
               {% endpaginate %}
             {% endfor %}
         </div>
           {{ my_description | llast}}
 

Note:

{% paginate collections.all.products by 100 %}

=> the number 100 shows the number of products that this code filters. To make sure it runs smoothly, just put the total number of products your store has. 

{% assign my_description = article.content | split: '=== split content ===' %}

=> your tag doesn’t have to be “=== split content ===”, you can name it whatever you want. Just make sure this is the same with the tag you type in the rich text editor in your Shopify admin in step 1.

Step 3: Check your online store now and see the new change.

2. Use product tag

Please note that the product tag is the handle of the product.

Step 1: Edit code

  1. From your Shopify admin, go to Online store > Themes > Actions > Edit code.
  2. Click Sections > article-template.liquid
  3. Find {{ article.content }}

Replace {{ article.content }} with the following code:

{% assign my_description = article.content | split: '=== split content ==='  %}
       
         {% assign  my_description_size = my_description.size | minus: 2 %}
          {{ my_description | first}}
         <div class="show-product-list">           
           {% if article.tags.size > 0 %}             
               {% for tag in article.tags %}
               {% paginate collections.all.products by 100 %}
               {%- for product in collections.all.products -%}
                   {% if product.handle == tag %}
                      <div class="product_item">
                       {% include 'product-card-list' %} 
                     </div> 
                   {% endif %}
               {%- endfor -%}
               {% endpaginate %} 
               {% endfor %}          
           {% endif %}
         </div>
           {{ my_description | last}}
 

Step 2: Split content

Edit your text like the image below:

shopify add product to blog post product tag

Step 3: Add product tags

From your Shopify admin, go to Products > All products. Then, open the product you want to add to the article.

shopify add product to blog post product

Next, scroll down to Search engine listing preview section > Edit website SEO.

shopify add product to blog post edit SEO

Copy the product handle.

shopify add product to blog post handle

Paste to tag section in the blog editor.

shopify add product to blog post add product tags

Now, go to your online store and see the new change.

Further solutions for your Shopify store

Now you should be able to add products to a blog post without using Shopify blog apps. Showing related products could help you make more sales, but there are many other things you could do to improve your entire website.

HappyPoints team can make custom apps to fit any of your needs to create a high-converting Shopify store. Just drop us a line, we’ll get back to you for more discussion.

Give us a line for a custom app!
Hannah Pham

Hannah Pham

Hannah is Content Lead at HappyPoints. She finds writing, designing, and developing all sorts of great content is her true passion. Hannah is the Marketer by day and the reader by night. Meet her on Linkedin.

Amazing!

I will get back to you within a day.

Have a nice time!