Recipe info (ratings, prep time, etc.) on the blog index page

Recipe cards render on the blog post itself. If you also want recipe details on the blog index page, on an article card, or anywhere else your theme has access to an article object, you can pull them out of Recipe Kit's data with Liquid.

This needs a theme code edit. If you would rather we did it for you, email [email protected] with your store URL and a screenshot of where you want the details to appear.

Step 1: Load the recipe

Paste this wherever you have an article in scope, usually inside the article card loop in snippets/article-card.liquid or sections/main-blog.liquid.

{%- 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_mf = shop.metaobjects.recipe[rk_resource_id] -%}
{%- endif -%}

rk_mf is now the recipe attached to that post, or blank if the post has no recipe. Wrap everything that follows in {%- if rk_mf != blank -%} so posts without a recipe render normally.

Available fields

The most useful ones for an index page:

prep_time and cook_time are already formatted with their unit, so {{ rk_mf.prep_time }} prints "20 minutes" with nothing else needed. The iso_ versions are the machine-readable durations, useful if you want to do your own maths or your own formatting.

Step 2: Show prep and cook time

{%- if rk_mf != blank -%}
  <div class="rk-card-meta">
    {%- if rk_mf.prep_time != blank -%}
      <span>Prep: {{ rk_mf.prep_time }}</span>
    {%- endif -%}
    {%- if rk_mf.cook_time != blank -%}
      <span>Cook: {{ rk_mf.cook_time }}</span>
    {%- endif -%}
    {%- if rk_mf.serving_size != blank -%}
      <span>Serves: {{ rk_mf.serving_size }}</span>
    {%- endif -%}
  </div>
{%- endif -%}

Step 3: Show the star rating

{%- if rk_mf != blank and rk_mf.recipe_rating != blank -%}
  {%- assign rk_stars = rk_mf.recipe_rating | round -%}
  {%- assign rk_count = rk_mf.rating_count | default: 1 | at_least: 1 -%}
  <div class="rk-card-rating">
    {%- for i in (1..5) -%}
      {%- if i <= rk_stars -%}
        <span class="rk-star rk-star--on">&#9733;</span>
      {%- else -%}
        <span class="rk-star">&#9734;</span>
      {%- endif -%}
    {%- endfor -%}
    <span class="rk-card-rating__count">({{ rk_count }})</span>
  </div>
{%- endif -%}

Add the styling to your theme's stylesheet, not inline:

.rk-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rk-star {
  font-size: 18px;
  line-height: 1;
  color: #d3d3d3;
}

.rk-star--on {
  color: #ffd700;
}

.rk-card-rating__count {
  font-size: 14px;
}

.rk-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
}

A note on ratings with no votes

A recipe nobody has rated yet has a blank rating. The example above hides the stars entirely in that case, which is usually what you want on an index page. If you would rather show a default, add | default: 5 when you assign rk_stars.

If nothing appears

• Check the post is linked to a recipe. The snippet reads the recipe off the article, so an unlinked post has nothing to find. See Linking Blog Posts to Recipes.
• Check article is actually in scope. Inside a blog index loop it is usually article, but some themes name the loop variable something else. Check the surrounding {% for %} tag.
• Check you edited the template your blog actually uses. Themes vary between sections/main-blog.liquid, snippets/article-card.liquid and templates/blog.liquid.
• If you use Shopify Translate & Adapt, translated versions of a post can hand Liquid the recipe data as plain text rather than as fields, and the snippet will find nothing on those locales. The recipe card itself still works. Get in touch if this affects you.

What's next

• Adding a filter to your blog index page (Free Addon) - Filtering and search, with no code
• How to change Shopify theme's blog layout from list to grid view - Theme layout options
• Linking Blog Posts to Recipes - Connecting recipes to posts