Upgrading to New Recipe Kit 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 Manual Installation Code)
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.

Manual Installation Code:

{%- assign rk_settings = shop.metafields.recipekit.settings -%}
{%- assign rk_lang = shop.metafields.recipekit.rk_lang -%}
{%- assign rk_recipe_id = blank -%}
{%- assign rk_mf = blank -%}
{%- if article -%}
  {%- assign rk_resource_id = article.id | downcase -%}
  {%- assign rk_type = article.metafields.recipekit[rk_resource_id].type -%}
  {%- if rk_type == 'json' -%}
    {%- assign rk_mf = article.metafields.recipekit[rk_resource_id].value -%}
  {%- else -%}
    {%- assign rk_mf = article.metafields.recipekit[rk_resource_id] -%}
  {%- endif -%}
  {%- if rk_mf != blank -%}
    {%- assign rk_recipe_id = rk_mf.recipe_id -%}
  {%- endif -%}
{%- endif -%}
{%- if rk_recipe_id != blank -%}
  {%- if rk_mf != blank -%}
    <script type="application/json" id="recipe-data-{{ rk_recipe_id }}">{{ rk_mf | json }}</script>
  {%- endif -%}
  <recipe-kit
    recipeid="{{ rk_recipe_id }}"
    shop="{{ shop.permanent_domain }}"
    design="{{ rk_settings.recipe_design | default: 'rk_uptown' }}"
    color="{{ rk_settings.design_colour | default: '#000000' }}"
    enableatc="{{ rk_settings.enable_atc | default: false }}"
    enableclicktocheck="{{ rk_settings.click_to_check | default: false }}"
    enablecookmode="{{ rk_settings.settings.cook_mode_enabled | default: false }}"
    clicktoconfirmrating="{{ rk_settings.settings.click_to_confirm_rating | default: false }}"
    apiurl="{{ rk_lang.app_url | default: 'https://app.getrecipekit.com' }}"
  ></recipe-kit>
  <script>
    if (!window.recipeKitSvelteLoaded) {
      var s = document.createElement('script');
      s.src = 'https://widget.recipekit.com/widget/v2/recipekit-widget.js';
      s.async = true;
      document.head.appendChild(s);
      window.recipeKitSvelteLoaded = true;
    }
  </script>
{%- endif -%}