Displaying recipes outside your Shopify theme (DropInBlog and others)
Recipe cards normally render through the Recipe Kit app block in your Shopify theme. If your blog does not live in your Shopify theme, for example because you use DropInBlog, a headless storefront, or a separate marketing site, you can render the same card with a standalone script.
You manage recipes in Recipe Kit exactly as you always would. The card just renders somewhere else.
The two lines you need
Load the script once per page, anywhere in your layout or template:
<script src="https://widget.recipekit.com/widget/v2/recipekit-standalone.js" async></script>
Then drop a <recipe-kit> element wherever the recipe should appear:
<recipe-kit recipeid="2316427" shop="your-store.myshopify.com"></recipe-kit>
That is the whole integration. The script includes its own styles, so there is no separate stylesheet to add.
Where the values come from
recipeid is on the recipe's edit page in Recipe Kit, the same ID you would put in the app block.
shop is your .myshopify.com domain, not your custom domain.
What happens on the page
The widget fetches the recipe and your Recipe Kit settings, then renders the card with your chosen design, accent colour, feature toggles and translated labels. Change a recipe or a setting in Recipe Kit and the next page load picks it up, with no redeploy on your side.
You get the same card your Shopify storefront shows: star ratings, print, share, Cook Mode, the servings adjuster, and Add to Cart where your plan allows it.
Several recipes on one page
The script only needs loading once. Add as many elements as you need:
<script src="https://widget.recipekit.com/widget/v2/recipekit-standalone.js" async></script>
<recipe-kit recipeid="2316427" shop="your-store.myshopify.com"></recipe-kit>
<recipe-kit recipeid="2316428" shop="your-store.myshopify.com"></recipe-kit>
Overriding the design per placement
By default the card uses whatever you have set in Recipe Kit, which is usually what you want. To override it for one placement:
<recipe-kit
recipeid="2316427"
shop="your-store.myshopify.com"
design="rk_sunny"
color="#C47A5B"></recipe-kit>
| Attribute | Required | What it does |
|---|---|---|
recipeid |
Yes | Which recipe to render |
shop |
Yes | Your .myshopify.com domain |
design |
No | Overrides your chosen design |
color |
No | Overrides your accent colour, as a hex value |
The design values are the internal names for the four card designs:
| Value | Design |
|---|---|
rk_uptown |
Classic |
rk_sunny |
Compact |
rk_modern |
Card |
rk_modern_vertical |
Card Vertical |
DropInBlog specifically
Put the script tag in your DropInBlog layout so it loads on every post, then add the <recipe-kit> element to a post wherever you want the card. DropInBlog lets you drop raw HTML into a post, which is all the element is.
There is a short walkthrough video here: Enabling DropInBlog integration
Things to know
Blog post linking does not apply. Outside your Shopify theme there is no article for Recipe Kit to read a link from, so every placement needs an explicit recipeid.
Your Google Recipe Schema moves with it. The widget writes the structured data on whatever page it renders on, so recipes on a DropInBlog post are still eligible for rich results.
Analytics still work. Views, prints, shares and add to cart events are tracked the same way, so these recipes appear in your dashboard alongside the rest.
Add to Cart needs a Shopify cart. The buttons add to your Shopify store's cart, so they work on a page served from your Shopify domain. On a completely separate domain the cart cannot be shared, and the buttons are best left off.
If you are building something bigger
If you want the recipe data as JSON rather than a rendered card, so you can build your own layout, the Enterprise plan includes a read-only API. See Headless API Access.
What's next
- Setting Up the Recipe Widget - The normal Shopify theme install
- Headless API Access - Recipe data as JSON
- Recipe Card Templates - The four designs