Show recipes outside 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 website, you can still show Recipe Kit recipe cards there with a short piece of HTML. You keep managing recipes in Recipe Kit, and the card shows up wherever you paste it.

The standalone card works on every plan. Add to Cart on the card is part of the Growth plan.

Add a recipe card to a page

Load the Recipe Kit script once per page, anywhere in your layout or template:

<script src="https://widget.recipekit.com/widget/v2/recipekit-standalone.js" async></script>

Then put a <recipe-kit> element where the recipe should appear:

<recipe-kit recipeid="768" shop="your-store.myshopify.com"></recipe-kit>

That is all you need. The script includes its own styles.

• recipeid is the recipe's ID. Open the recipe in Recipe Kit and look at the page address in your browser. If it ends in /recipe/768, the ID is 768.
• shop is your .myshopify.com address, not your own domain.

What the card shows

The card loads the recipe and your Recipe Kit settings each time the page loads, then shows your chosen design, accent color, features and labels. Change a recipe or a setting in Recipe Kit and the next page load picks it up.

You get the same card your Shopify store shows: star ratings, print, share, cook mode, the servings adjuster, and Add to Cart where your plan includes it.

Show several recipes on one page

Load the script once and add as many elements as you need:

<script src="https://widget.recipekit.com/widget/v2/recipekit-standalone.js" async></script>

<recipe-kit recipeid="768" shop="your-store.myshopify.com"></recipe-kit>

<recipe-kit recipeid="769" shop="your-store.myshopify.com"></recipe-kit>

Change the design for one card

By default each card uses the design and accent color from your Recipe Kit settings. To use a different design or color for one card, add design or color:

<recipe-kit
  recipeid="768"
  shop="your-store.myshopify.com"
  design="rk_sunny"
  color="#C47A5B"></recipe-kit>

The design values for the six card designs:

design="rk_uptown" and color="#000000" count as not set, so the card uses your settings instead. This means one card cannot use Classic or pure black when your settings use a different design or color.

Use it with DropInBlog

1. Add the script tag to your DropInBlog layout so it loads on every post.
2. In a post, add a raw HTML block where you want the card.
3. Paste the <recipe-kit> element into that block.

There is a short walkthrough video: Enabling DropInBlog integration.

Things to know

• Every card needs a recipeid. Outside your Shopify theme there is no blog post for Recipe Kit to read the recipe from.
• Google recipe schema comes with the card. The card adds the schema to the page when it loads in the browser. Fill in the recipe's Author and Date, otherwise the schema says "Anonymous" and uses today's date.
• Analytics only count on your Shopify store. Views, prints, shares and cart adds are counted when the page is served by your Shopify store, as DropInBlog pages are. On a separate website or a headless storefront, nothing is counted.
• Add to Cart needs your Shopify cart. The buttons add to your store's cart, so they only work on pages served from your Shopify store. On a separate domain they cannot reach your store's cart.

Get recipe data as JSON

If you want the raw recipe data to build your own layout, the Enterprise plan includes a read-only API. See Headless API access.

What's next

• Installation guide covers the usual install inside your Shopify theme.
• Headless API access covers getting recipe data as JSON.
• Recipe card templates shows the six card designs.