How to insert Recipe Kit in another location on your Shopify blog post

By default Recipe Kit displays the recipe card below all of your Shopify blog post content. This works for most blogs, but in some cases, you may want the recipe card to be embedded in the middle of your post content, or perhaps before all of the content.

No problem at all - with some quick code modifications (that I am more than happy to help you with if needed!) Recipe Kit can embed itself in different locations on your store’s blog post content.

Note - if you are not a coder, just send me an email at help@recipekit.app and I can sort this all out for you no problem!

Add New Recipe Kit Code To Your Shopify Theme Article Template

1. Open your store’s active theme by going to your Shopify Admin > Online Store. Click the “Actions” button, and then click “Edit Code”
2. Your Shopify store’s theme code will pop up on this new page.
3. Look for a file in the ‘Sections’ folder likely called something like ‘article-template.liquid’ or similar. We are looking for the base code of the blog post article page; some themes may differ here. Open this file.
4. Find the line of code that says:
   {{ article.content }}
5. Replace this line of code with the following code:

   {% if article.content contains ':recipekit:' %} {% capture recipekit_capture %}{% render 'recipekit' %}{% endcapture %} {{ article.content | replace: ':recipekit:', recipekit_capture }} {% else %} {{ article.content }} {% render 'recipekit' %} {% endif %}
   				

6. Check around the rest of the template to ensure there isn’t another {% render ‘recipekit’ %} line lying around. Delete this line if found in a place other than the above snippet.
7. Save the file.
8. Open your blog post content as you would normally.
9. Where you want the Recipe Kit card to appear; simply type in the line:

   :recipekit:
   				

10. Add content before or after this line as needed. Save the article, then view it on your storefront and if all the code was added successfully, your recipe card will now be displaying in the spot where you wrote :recipekit: !

Try that out, and as always, please let me know if you have any troubles or questions. I’m here to help and am happy to hop on and fix up the code for you to get this working!

One thing to note here; is if you do not enter the :recipekit: line into your blog post content, Recipe Kit will instead simply render the recipe card after the blog post content, as normal.