Setting Up the Recipe Widget

The Recipe Kit widget is what puts your recipe cards on your storefront. On an Online Store 2.0 theme it is a block you add in the theme editor. On an older theme it is a small Liquid snippet.

Adding the block (Online Store 2.0)

1. Go to Online Store > Themes > Customize
2. Navigate to the page you want the recipe on, for example Blog posts > Default blog post
3. Click Add block in the main content section
4. Select Recipe Kit from the app blocks list
5. Click Save

Adding the Recipe Kit app block to an article template in the theme editor.

If you see two Recipe Kit blocks

Some stores see both Recipe Kit and Recipe Kit (Classic) in the app blocks list. They are the same widget. "Classic" is the original block, kept so that themes which already reference it keep working, and it now renders exactly the same recipe card with exactly the same settings.

If you already have Recipe Kit (Classic) on your theme, leave it. There is nothing to migrate and nothing to gain by swapping. For a fresh install, either one works.

Which page, which recipe

On blog posts: leave the Recipe ID blank. Recipe Kit finds the recipe linked to that article automatically, so one block on the template covers every post.

On any other page, product pages, landing pages, the home page, custom pages: enter the Recipe ID in the block settings to say which recipe to display. Find the Recipe ID on the recipe's edit page in Recipe Kit.

Where to find the Recipe ID on the recipe edit page.

The Recipe ID field in the block settings.

Block settings

That is the full list. Everything else about how the card looks and behaves lives in the Recipe Kit app under Settings, so it stays consistent across every placement.

Widget settings in the app

Open Recipe Kit and go to Settings:

• Design picks the card design and accent colour
• Features switches Cook Mode, click to check, the card border and Add to Cart on or off
• Advanced > Widget Features holds the extras: the shoppable quantity selector, ingredient product thumbnails, servings above ingredients, and the unit toggle
• Translations & Labels renames any text on the card

Manual installation (vintage themes)

If your theme does not support app blocks, add the widget with a snippet instead. The widget itself still loads from our CDN, so this is a small file that will not go stale.

Note that a manual install detects the recipe from the blog article, so it works on blog post pages only.

Step 1: Add the snippet

1. Go to Online Store > Themes > Actions > Edit code
2. Under Snippets, click Add a new snippet
3. Name it recipekit-svelte.liquid
4. Copy the contents from the recipekit-svelte.liquid gist and paste them in
5. Save

Step 2: Render it

Find your blog post template, usually sections/main-article.liquid or templates/article.liquid, and add this where you want the recipe card to appear:

{% render 'recipekit-svelte' %}

If your theme supports Custom Liquid blocks, you can paste the same tag into one of those from the theme editor instead of editing code.

Adding the render tag to a custom Liquid block in the theme editor.

Save, then reload a blog post that has a recipe linked to it.

Updating a manual install

An app block updates itself. A pasted snippet is a copy, frozen at the day you pasted it. If a fix ships that touches the snippet, re-copy it from the gist above. This is rare, because almost all the widget lives in the CDN bundle, but it is worth knowing.

Checking it worked

1. Open a page that has the block or snippet and a linked or specified recipe
2. The recipe card should render
3. Try Print, Share and the rating stars

Nothing showing? See Widget Not Showing.

Mobile

The card is responsive and reflows on its own. Nothing to configure.

What's next

• Recipe Card Templates - Choosing a design
• Customizing the Recipe Card - Colour, border and features
• Linking Blog Posts to Recipes - Connecting recipes to posts
• Linking Products to Recipes - Shoppable ingredients