Upgrading to the new Recipe Kit widget

Most stores are already on the current Recipe Kit widget and have nothing to do. This article is for stores that still use the original Liquid snippet, and for anyone who saw the Widget Upgrade Required window in Recipe Kit.

The current widget is free on every plan.

Check which widget you have

You added Recipe Kit as an app block in the theme editor. You are already on the current widget. That includes the block named Recipe Kit (Classic). It was the original block, and it now shows the same recipe card with the same settings as the block named Recipe Kit. Leave it where it is. Swapping it for the other block changes nothing and can lose its position on the template.

You pasted a Liquid snippet into your theme. In Shopify admin, go to Online Store > Themes, click ... next to your theme and choose Edit code. Look under Snippets:

• recipekit-svelte.liquid is the current widget. You do not need to switch, but copy the snippet again now and then to pick up new settings. See Installation guide.
• recipekit.liquid, called with {% render 'recipekit' %}, is the original Liquid widget. Follow the steps below to move over.

What the current widget adds

On the original Liquid widget, these features are hidden or locked:

• The Hero and Editorial card designs. See Recipe card templates.
• Everything under Settings > Advanced > Widget Features: Enable servings adjuster, Show servings above ingredients, Show shoppable quantity selector, Show ingredient product thumbnails, Enable unit converter, Show quantities as fractions and Embed inside article content.
• The Equipment and FAQs sections in the recipe editor.

Turning one of these on while Recipe Kit thinks you are on the original widget opens the Widget Upgrade Required window. See Turn the features on after you switch below.

Switch from the original snippet

1. Add the new snippet

1. In the code editor, under Snippets, click Add a new snippet.
2. Name it recipekit-svelte. Shopify adds the .liquid ending.
3. Copy the contents of the recipekit-svelte.liquid gist and paste them in.
4. Click Save.

2. Swap the render tag

In your blog post template, usually sections/main-article.liquid or templates/article.liquid, replace this tag:

{% render 'recipekit' %}

with this one:

{% render 'recipekit-svelte' %}

If you added the old tag through a Custom Liquid section in the theme editor, change it there instead.

3. Check, then clean up

Reload a blog post with a recipe on it. Once the card looks right, you can delete the old recipekit.liquid snippet and the recipekit.css asset.

Your recipes, settings, translations and blog post links all carry across. There is nothing to set up again.

If your theme supports app blocks, you can skip the snippet and add the Recipe Kit block instead. It updates itself and can show a recipe on any page with a Recipe ID. See Installation guide.

Turn the features on after you switch

Recipe Kit checks your theme for the new widget, but it cannot always see a pasted snippet. If a feature still opens the Widget Upgrade Required window after you switched:

1. Open Recipe Kit and go to Settings.
2. Under Advanced > Widget Features, turn on any setting, such as Enable servings adjuster.
3. In the Widget Upgrade Required window, click I already have the new widget installed.
4. Turn the setting on again, then click Save.

Hero and Editorial now appear under Layout, and the other locked features work too.

The same button sits at the bottom of Settings, under the message Recipe Kit is not active on your theme., if you see it there.

If you have not switched yet, Install new widget in the same window opens your theme editor with the Recipe Kit block already added. Click Save, then come back.

What's next

• Installation guide covers the app block, block settings and the snippet in full.
• Widget not showing helps if the card disappears after the swap.
• Recipe card templates shows the Hero and Editorial designs you gain.