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

By default the recipe card renders wherever the Recipe Kit block sits on your blog post template, which for most themes is below the post content. Here is how to move it.

If you use the app block, just drag it

On an Online Store 2.0 theme this is not a code job:

1. Go to Online Store > Themes > Customize
2. Select Blog posts > Default blog post
3. Drag the Recipe Kit block up or down in the section list
4. Save

That covers above the content, below it, or between other blocks. Only read on if you need the card inside the post text, part way down.

Putting the card mid-article

To drop the recipe card at a specific point inside your written content, you need a placeholder in the post and a small theme edit that swaps the placeholder for the card.

This is a code change. If you would rather we did it, email [email protected] with your store URL.

Step 1: Edit your article template

Go to Online Store > Themes > Actions > Edit code and open your blog post template, usually sections/main-article.liquid or templates/article.liquid.

Find the line that outputs the post body:

{{ article.content }}

Replace it with:

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

This looks for :recipekit: in the post body. If it finds it, the recipe card is rendered in its place. If not, the card falls back to the bottom of the post as before, so existing posts carry on working untouched.

Step 2: Add the placeholder to a post

Edit any blog post in Shopify and type :recipekit: on its own line, wherever you want the recipe card:

Here's the story behind this recipe, and why I make it every autumn.

:recipekit:

A few notes on substitutions...

Save the post and reload it on your storefront. The card renders where the placeholder was.

Still on the original Liquid widget?

If your theme has recipekit.liquid rather than recipekit-svelte.liquid in its snippets, use {% render 'recipekit' %} in the snippet above instead. Better still, move to the current widget first: see Upgrading to New Recipe Kit Widget.

What's next

• Setting Up the Recipe Widget - Installation and block settings
• Embed Recipe Video in Another Location on Page - Moving just the video
• How to change the order of your recipe card - Reordering sections inside the card