Setting Up the Recipe Widget
Setting Up the Recipe Widget
The Recipe Kit widget displays your recipe cards on your Shopify store. This guide covers how to add recipe widgets to blog posts.
Theme App Extension
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:
- Go to Online Store > Themes > Customize
- Try adding an app block to a section
- If you see Recipe Kit listed, you're ready
Adding Recipe Widget to Blog Posts
Blog Post Setup
Display recipes on blog articles:
- Go to Online Store > Themes > Customize
- Select Blog posts > Default blog post
- Click Add block in a section
- Select Recipe Kit
- Save your changes
Recipes linked to the blog post will display automatically.
How It Works
When a customer views a blog post:
- Recipe Kit checks for linked recipes
- Linked recipes display as recipe cards
- Customers can interact with the recipe (print, share, add to cart)
Widget Settings
In Recipe Kit App
Configure default widget behavior:
- Open Recipe Kit
- Go to Settings
- Under Widget Settings:
- Enable Widget - Turn display on/off globally
- Default Recipe Status - Only show recipes with Published status
In Theme Editor
When you add the Recipe Kit block, you can configure:
- Which recipe to display (for manual placement)
- Display mode (card, full recipe, etc.)
- Layout options
Snippet-Based Installation
For themes without app block support, you can manually add the widget:
- Go to Online Store > Themes > Actions > Edit code
- Find your blog post template
- Add:
{% render 'recipekit' %} - Save
Verifying Widget Display
After setup:
- Visit a blog post with a linked recipe
- The recipe card should appear
- If not, see Widget Not Showing
Mobile Display
Recipe cards are fully responsive and automatically adjust for mobile devices. No additional configuration needed.
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