How to add products to blog post in Shopify without app

Hannah

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. 

Our previous posts have walked you through a lot of Shopify theme customization factors on your homepage, product page, etc. 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 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:

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

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

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

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:

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.

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

Copy the product handle.

Paste to tag section in the blog editor.

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

This article is a part of an ebook that provides a step-to-step guide to customize your Shopify theme, feel free to grab the full free eBook: Top 12 DIY Shopify customizations to drive sales

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.

Leave a Reply