Installation Guide

Get Recipe Kit installed and running on your Shopify store.

Step 1: Install from Shopify App Store

1. Visit the Recipe Kit app page in the Shopify App Store
2. Click Add app
3. Review the permissions and click Install app
4. Select a plan (Essentials, Advanced, or Enterprise)
5. Your 14-day free trial begins immediately with no charge
6. You'll be redirected to Recipe Kit in your Shopify admin

Cancel anytime during the trial period. See Subscription Plans for plan details and pricing.

Step 2: Add Recipe Kit to Your Theme

There are several ways to add Recipe Kit to your theme depending on your theme type and preferences. Choose the option that best fits your setup.

Which method should I use?

Option 1: New Widget (App Block)

Best for: Online Store 2.0 themes. This is the recommended installation method.

The new Svelte-powered widget is faster, receives all future updates, and can display recipes on any page — not just blog posts.

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 Any Page

• On blog posts: Recipes are detected automatically from the linked article — no extra configuration needed.
• On any other page (product pages, landing pages, custom pages): Enter the Recipe ID in the block settings to specify which recipe to display. You can find the Recipe ID in the Recipe Kit app.

Block Settings

Option 2: Legacy Widget (App Block)

Best for: Online Store 2.0 themes where you prefer the original Liquid-rendered widget. Blog posts only.

Note: The legacy widget is no longer receiving new features. We recommend switching to the new widget when possible.

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

Option 3: New Widget (Manual Install)

Best for: Vintage/legacy themes that don't support app blocks, where you want the new widget experience.

The new widget loads from CDN, so the manual install only requires a small Liquid snippet and a script tag. With manual installation, the widget auto-detects recipes from article metafields, so it is limited to blog post pages.

Step 1: Add the snippet file

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:No.

{% render 'recipekit-svelte' %}

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

3. Save

Option 4: Legacy Widget (Manual Install)

Best for: Vintage/legacy themes that don't support app blocks, where you want the original Liquid-rendered widget. Blog posts only.

Note: The legacy widget is no longer receiving new features. We recommend using Option 3 instead.

Step 1: Add the CSS file

1. Go to Online Store > Themes > Actions > Edit code
2. Under Assets, click Add a new asset
3. Create a new file named recipekit.css     
4. Copy the contents from: recipekit.css
5. Save the file

Step 2: Add the snippet file

1. Under Snippets, click Add a new snippet
2. Name it recipekit.liquid     
3. Copy the contents from: recipekit.liquid
4. Save the file

Step 3: 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' %}

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

3. Save

Upgrading from the Legacy Widget

If you're currently using the legacy widget (app block or manual) and want to switch to the new 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:

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

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

Step 3: Create Your First Recipe

1. Open Recipe Kit from your Shopify admin apps
2. Click Create Recipe
3. Fill in the basic details:
   • Recipe title
   • Description
   • Prep time and cook time
   • Servings
4. Add ingredients and directions
5. Upload a recipe image
6. Click Save

Step 4: Link Recipe to a Blog Post

Recipes auto-display on blog posts when linked:

1. In Recipe Kit, open your recipe
2. Go to the Resources tab
3. Search for and select a blog post
4. Save the recipe

When customers view that blog post, your recipe card appears automatically.

Tip: With the new widget app block, you can also display recipes on non-blog pages by entering the Recipe ID directly in the block settings — no linking required.

Verify Installation

To confirm everything is working:

1. Visit a page that has Recipe Kit installed with a linked or specified recipe
2. You should see the recipe card displayed
3. Try clicking Print, Share, or other recipe actions

Troubleshooting

If the recipe card doesn't appear:

• Ensure the recipe status is Published (not Draft)
• For blog posts: check that the blog post is linked in the recipe's Resources tab
• For non-blog pages (new widget app block only): verify the correct Recipe ID is entered in the block settings
• Verify the Recipe Kit block or snippet is added to the correct template
• Clear your browser cache and refresh

For more help, see Widget Not Showing or Contact Support.

What's Next?

• Creating Recipes - Learn all recipe editing features
• Recipe Card Templates - Choose your card design
• Customizing the Recipe Card - Match your brand
• Linking Products to Recipes - Enable shoppable ingredients