Skip to content

Instantly share code, notes, and snippets.

@patrickbolle
Last active April 1, 2026 20:38
Show Gist options
  • Select an option

  • Save patrickbolle/32ee120eb48568f19a10c80f9c2984a6 to your computer and use it in GitHub Desktop.

Select an option

Save patrickbolle/32ee120eb48568f19a10c80f9c2984a6 to your computer and use it in GitHub Desktop.
RecipeKit Svelte widget manual install snippet (auto-synced)
{% comment %}RecipeKit Svelte Widget v1.0.0{% endcomment %}
{%- 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>
{%- assign rk_rc = rk_mf.rating_count | default: '1' | at_least: '1' -%}
{%- assign rk_rv = rk_mf.recipe_rating | ceil | default: 5 | at_most: 5 -%}
{%- if rk_rv == 0 -%}{%- assign rk_rv = 5 -%}{%- endif -%}
{%- capture rk_ld_i -%}{%- for i in rk_mf.recipe_ingredients -%}{%- unless i.type == 'heading'
-%},"{{- i.ingredient | strip_html | escape -}}"{%- endunless -%}{%- endfor -%}{%- endcapture -%}
{%- capture rk_ld_d -%}{%- for d in rk_mf.recipe_directions -%}{%- unless d.type == 'heading'
-%},{"@type":"HowToStep","text":"{{- d.direction | strip_html | escape -}}","name":"{{- d.step_name |
default: d.direction | strip_html | escape -}}","url":"{{ shop.url }}{{ article.url }}#step-{{-
forloop.index -}}"{%- if d.image != blank -%},"image":"{{- d.image | replace:
'https://f000.backblazeb2.com/file/recipekit-bucket/', 'https://images.getrecipekit.com/' | append:
'?width=700' -}}"{%- endif -%}}{%- endunless -%}{%- endfor -%}{%- endcapture -%}
{% assign rk_ld_attr = 'type="application/ld+json"' %}<script {{ rk_ld_attr
}}>{"@context":"https://schema.org/","@type":"Recipe","name":"{{- rk_mf.recipe_title | escape
-}}","image":["{{- rk_mf.recipe_image -}}"],"description":"{{- rk_mf.recipe_description | strip_html |
escape -}}","keywords":[{%- for keyword in rk_mf.recipe_tags -%}"{{- keyword.name | escape -}}"{%-
unless forloop.last -%},{%- endunless -%}{%- endfor -%}],"author":{"@type":"Person","name":"{{-
rk_mf.recipe_author | strip_html | escape | default: article.author -}}"},"datePublished":"{{-
rk_mf.recipe_date | default: article.published_at | date: '%Y-%m-%d' -}}","prepTime":"{{-
rk_mf.iso_prep_time -}}","cookTime":"{{- rk_mf.iso_cook_time -}}","totalTime":"{{- rk_mf.iso_total_time
-}}","recipeYield":"{{- rk_mf.serving_size | escape -}}","recipeCategory":"{{- rk_mf.recipe_category |
escape -}}","recipeCuisine":"{{- rk_mf.recipe_cuisine | strip_html | escape
-}}","recipeIngredient":[{{- rk_ld_i | remove_first: ',' -}}],"recipeInstructions":[{{- rk_ld_d |
remove_first: ',' -}}],"nutrition":{"@type":"NutritionInformation","servingSize":"{{-
rk_mf.serving_size | escape -}}"{%- if rk_mf.recipe_calories != blank -%},"calories":"{{-
rk_mf.recipe_calories -}}"{%- endif -%}}{%- if rk_rc > 0 and rk_mf.enable_rating == true or
rk_mf.enable_rating == 'true' -%},"aggregateRating":{"@type":"AggregateRating","ratingValue":"{{- rk_rv
| default: '5' -}}","bestRating":"5","worstRating":"1","ratingCount":"{{- rk_rc | default: '1'
-}}"}{%- endif -%}{%- if rk_mf.recipe_video != blank and rk_mf.recipe_video contains 'youtube' or
rk_mf.recipe_video contains 'shorts' or rk_mf.recipe_video contains 'youtu.be' or rk_mf.recipe_video
contains 'vimeo' -%},"video":{"@type":"VideoObject","name":"{{- rk_mf.recipe_title | escape
-}}","description":"{{- rk_mf.recipe_description | strip_html | escape -}}","thumbnailUrl":"{{-
rk_mf.recipe_image -}}","contentUrl":"{{- rk_mf.recipe_video -}}","uploadDate":"{{- rk_mf.recipe_date
-}}"}{%- endif -%}}</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/templates/recipekit-widget.js';
s.async = true;
document.head.appendChild(s);
window.recipeKitSvelteLoaded = true;
}
</script>
{%- endif -%}
{%- 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>
{%- assign rk_rc = rk_mf.rating_count | default: '1' | at_least: '1' -%}
{%- assign rk_rv = rk_mf.recipe_rating | ceil | default: 5 | at_most: 5 -%}
{%- if rk_rv == 0 -%}{%- assign rk_rv = 5 -%}{%- endif -%}
{%- capture rk_ld_i -%}{%- for i in rk_mf.recipe_ingredients -%}{%- unless i.type == 'heading'
-%},"{{- i.ingredient | strip_html | escape -}}"{%- endunless -%}{%- endfor -%}{%- endcapture -%}
{%- capture rk_ld_d -%}{%- for d in rk_mf.recipe_directions -%}{%- unless d.type == 'heading'
-%},{"@type":"HowToStep","text":"{{- d.direction | strip_html | escape -}}","name":"{{- d.step_name |
default: d.direction | strip_html | escape -}}","url":"{{ shop.url }}{{ article.url }}#step-{{-
forloop.index -}}"{%- if d.image != blank -%},"image":"{{- d.image | replace:
'https://f000.backblazeb2.com/file/recipekit-bucket/', 'https://images.getrecipekit.com/' | append:
'?width=700' -}}"{%- endif -%}}{%- endunless -%}{%- endfor -%}{%- endcapture -%}
{% assign rk_ld_attr = 'type="application/ld+json"' %}<script {{ rk_ld_attr
}}>{"@context":"https://schema.org/","@type":"Recipe","name":"{{- rk_mf.recipe_title | escape
-}}","image":["{{- rk_mf.recipe_image -}}"],"description":"{{- rk_mf.recipe_description | strip_html |
escape -}}","keywords":[{%- for keyword in rk_mf.recipe_tags -%}"{{- keyword.name | escape -}}"{%-
unless forloop.last -%},{%- endunless -%}{%- endfor -%}],"author":{"@type":"Person","name":"{{-
rk_mf.recipe_author | strip_html | escape | default: article.author -}}"},"datePublished":"{{-
rk_mf.recipe_date | default: article.published_at | date: '%Y-%m-%d' -}}","prepTime":"{{-
rk_mf.iso_prep_time -}}","cookTime":"{{- rk_mf.iso_cook_time -}}","totalTime":"{{- rk_mf.iso_total_time
-}}","recipeYield":"{{- rk_mf.serving_size | escape -}}","recipeCategory":"{{- rk_mf.recipe_category |
escape -}}","recipeCuisine":"{{- rk_mf.recipe_cuisine | strip_html | escape
-}}","recipeIngredient":[{{- rk_ld_i | remove_first: ',' -}}],"recipeInstructions":[{{- rk_ld_d |
remove_first: ',' -}}],"nutrition":{"@type":"NutritionInformation","servingSize":"{{-
rk_mf.serving_size | escape -}}"{%- if rk_mf.recipe_calories != blank -%},"calories":"{{-
rk_mf.recipe_calories -}}"{%- endif -%}}{%- if rk_rc > 0 and rk_mf.enable_rating == true or
rk_mf.enable_rating == 'true' -%},"aggregateRating":{"@type":"AggregateRating","ratingValue":"{{- rk_rv
| default: '5' -}}","bestRating":"5","worstRating":"1","ratingCount":"{{- rk_rc | default: '1'
-}}"}{%- endif -%}{%- if rk_mf.recipe_video != blank and rk_mf.recipe_video contains 'youtube' or
rk_mf.recipe_video contains 'shorts' or rk_mf.recipe_video contains 'youtu.be' or rk_mf.recipe_video
contains 'vimeo' -%},"video":{"@type":"VideoObject","name":"{{- rk_mf.recipe_title | escape
-}}","description":"{{- rk_mf.recipe_description | strip_html | escape -}}","thumbnailUrl":"{{-
rk_mf.recipe_image -}}","contentUrl":"{{- rk_mf.recipe_video -}}","uploadDate":"{{- rk_mf.recipe_date
-}}"}{%- endif -%}}</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/templates/recipekit-widget.js';
s.async = true;
document.head.appendChild(s);
window.recipeKitSvelteLoaded = true;
}
</script>
{%- endif -%}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment