Setting Up the Recipe Widget

The Recipe Kit widget displays your recipe cards on your Shopify store. Recipe Kit offers two widgets: the new Svelte-powered widget (recommended) and the legacy Liquid widget.

We recommend the new widget for all new installations. Existing merchants can upgrade at any time.

Theme App Extension (Online Store 2.0)

Recipe Kit uses Shopify's Theme App Extension system, which works with Online Store 2.0 themes.

Check Theme Compatibility

Your theme must support app blocks. Most themes published after 2021 do. To check:

1. Go to Online Store > Themes > Customize
2. Try adding an app block to a section
3. If you see Recipe Kit listed, you're ready

Adding the New Widget

1. Go to Online Store > Themes > Customize
2. Navigate to the page where you want to display a recipe (e.g., 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

Displaying Recipes on Different Pages

• Blog posts: Recipes linked to the article are detected and displayed automatically.
• Any other page (product pages, landing pages, custom pages): Enter the Recipe ID in the block settings. You can find the Recipe ID in the Recipe Kit app.

Adding the Legacy Widget

1. Go to Online Store > Themes > Customize
2. Select Blog posts > Default blog post from the page dropdown
3. Click Add block in the main content section
4. Select Recipe Kit (Legacy) from the app blocks list
5. Click Save

The legacy widget only works on blog post templates and does not support Recipe ID input.

Manual Installation (Vintage / Legacy Themes)

For themes that don't support app blocks, you can manually add either widget to your theme code.

New Widget (Manual)

The new widget loads from CDN, so manual installation only requires a small Liquid snippet. With manual installation, recipes are auto-detected from article metafields, limiting display to blog post pages.

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. Paste the following code:
5. Copy the contents from: recipekit-svelte.liquid
6. Save the file

Step 2: Add the render tag

1. Find your blog post template (usually article.liquid     or templates/article.liquid    )
2. Add the following where you want recipes to appear:

{% render 'recipekit-svelte' %}

OR add the tag in a Custom Liquid block if your theme supports it:

3. Save

Legacy Widget (Manual)

1. Go to Online Store > Themes > Actions > Edit code
2. Under Assets, click Add a new asset — create recipekit.css     and paste contents from: recipekit.css
3. Under Snippets, click Add a new snippet — create recipekit.liquid     and paste contents from: recipekit.liquid
4. In your blog post template, add: {% render 'recipekit' %}    
5. Save all files

Widget Settings

Block Settings (New Widget)

When you add the new Recipe Kit app block in the theme editor, you can configure:

Block Settings (Legacy Widget)

In the Recipe Kit App

Configure default widget behavior across your store:

1. Open Recipe Kit
2. Go to Settings
3. Under Widget Settings:
   • Enable Widget — Turn display on/off globally
   • Default Recipe Status — Only show recipes with Published status

How It Works

When a customer views a page with the Recipe Kit widget:

1. The widget checks for a recipe (via Recipe ID in block settings, or linked article metafields)
2. The recipe card renders with your chosen template and settings
3. Customers can interact with the recipe — print, share, rate, and add ingredients to cart

Upgrading from the Legacy Widget

App Block Users

1. Go to Online Store > Themes > Customize
2. Remove the Recipe Kit (Legacy) block
3. Add the new Recipe Kit block
4. Click Save

Manual Install Users

1. Add the recipekit-svelte.liquid     snippet (see New Widget Manual above)
2. Replace {% render 'recipekit' %}     with {% render 'recipekit-svelte' %}     in your blog post template
3. The old recipekit.liquid     and recipekit.css     files can be removed after confirming the new widget works

Your recipes, settings, and linked blog posts carry over automatically — no re-configuration needed.

Mobile Display

Recipe cards are fully responsive and automatically adjust for mobile devices. No additional configuration needed.

Verifying Widget Display

After setup:

1. Visit a page with a Recipe Kit block or snippet and a linked/specified recipe
2. The recipe card should appear
3. Try clicking Print, Share, or other recipe actions
4. If the card doesn't appear, see Widget Not Showing

What's Next?

• Recipe Card Templates - Choose your card design
• Customizing the Recipe Card - Match your brand
• Linking Blog Posts to Recipes - Display on blog posts
• Linking Products to Recipes - Enable Add to Cart for ingredients

Setting Up the Recipe Widget