Add a recipe list to any page

The Recipe List shows a row or grid of your recipes anywhere in your theme: your home page, a blog post, a product page, a collection or any other page. Each recipe shows its photo, title, category, total time and rating, and links to the full recipe.

It picks up your theme's fonts and colors, so it looks like the rest of your store.

The Recipe List is free on every plan.

The Recipe List used to be called the Recipe Roundup. If you already use one, it keeps working. See Lists made with recipe-list text below.

Add a Recipe List to a page

1. In Shopify admin, go to Online Store > Themes and click Customize.
2. Use the page menu at the top of the editor to open the page you want, for example Home page, Blog posts or Default product.
3. Select Add section, open the Apps tab and choose Recipe List. If the page already has an Apps section, you can also select Add block inside it.
4. Drag the Recipe List to where you want it on the page.
5. Choose which recipes to show and how they look, then select Save.

You can add the Recipe List to the home page, blog posts, blog pages, product pages, collection pages and other pages. To show recipes on a collection page, open a collection template in step 2.

Adding the Recipe List to the Blog posts template puts it at the bottom of every recipe post. With the Source set to Auto (smart), each post then lists recipes related to that post.

Choose which recipes to show

Pick a Source in the block settings:

If a source finds no recipes, the Recipe List shows your newest recipes instead, so the section is never empty on your store. In the theme editor, a note tells you which setting found nothing. Pick recipes is the exception. If none of the recipes you picked can be shown, the section stays empty rather than showing other recipes.

Maximum recipes sets the most the section will ever show.

Pick your own recipes

1. Set Source to Pick recipes.
2. Under Recipes, select Select (or Change if you've picked some before) and choose your recipe posts.
3. Drag them into the order you want. Your store shows them in that order.

Only recipes that are published in Recipe Kit and connected to a blog post can appear in a Recipe List.

Control the order

How the recipes are ordered depends on the Source:

To put recipes in an exact order, use Pick recipes.

Your theme's own blog page is different. Shopify lists blog posts by their publish date, newest first, and Recipe Kit does not change that. To move a recipe post up or down the blog page:

1. In Shopify admin, go to Content > Blog posts and open the post.
2. Under Visibility, set the publish date. A later date moves the post up the list.
3. Click Save.

Search engines read the publish date as a sign of how fresh a post is. Moving a few posts is harmless, but avoid rewriting every date on your blog.

Choose a layout

Under Layout, choose Grid or Carousel.

Grid lays your recipes out in rows. Columns sets how many recipes sit side by side on a wide screen. On narrower screens the grid uses fewer. Rows per page sets how many rows show at first. If there are more recipes, shoppers see a Load more button.

Carousel shows one row that shoppers scroll sideways, with arrow buttons beside the heading. Turn on Show carousel dots to add a dot for each screen of recipes under the row.

On phones, the grid turns into a list with a small photo beside each recipe, so shoppers can see several recipes without scrolling far.

Heading, link text and details

• Heading is an optional title above the recipes, like "Weeknight favorites". Leave it blank for no heading.
• Heading tag should stay on h2 unless the Recipe List sits inside a section that already has its own h2 heading. Then choose h3.
• Link text is an optional text link under each recipe, like "View recipe". Leave it blank for none. The photo and title already open the recipe.
• Accent colour sets the color of the rating stars.
• Show time, Show category and Show rating turn each detail on or off.

Translate your Recipe List

If your store uses Recipe Kit's multi-language translations, the Recipe List shows recipe titles and categories in the shopper's language.

To translate the heading and link text, open Shopify's Translate & Adapt app, go to Metaobjects and choose Recipe Kit Recipe List. Each Recipe List block on your store has its own entry there, named after its heading.

The carousel arrow and Load more button labels are shared by every Recipe List. To translate them, choose Recipe Kit Labels under Metaobjects in Translate & Adapt. They are the fields whose names start with Recipe List.

See Translating your recipes into other languages to set up translations.

Change the look with custom CSS

The block has a Custom CSS setting at the bottom. These variables change several things at once:

.rk-roundup {
  --rk-roundup-aspect: 4 / 5;      /* photo shape, e.g. 1 / 1 for square */
  --rk-roundup-radius: 12px;       /* photo corners */
  --rk-roundup-gap: 2rem;          /* space between recipes side by side */
  --rk-roundup-card-width: 300px;  /* carousel recipe width */
}

You can also style the parts directly:

.rk-roundup__heading { text-align: center; }
.rk-roundup-card__title { text-transform: uppercase; }
.rk-roundup-card__meta { font-size: 0.75em; }
.rk-roundup-card__cta { font-weight: 600; }

See Custom CSS styling for more on adding CSS to your store.

Lists made with recipe-list text

Before the recipe picker, you built a list by typing recipe-list: and your recipe handles into a rich text section, like this:

recipe-list:
- my-first-recipe-handle
- my-second-recipe-handle

These lists keep working, on every plan, with nothing to change. The block's Mode setting decides how a page is shown:

• Auto (recommended) shows the recipes from the recipe-list: text the way it always has, when the page has that text. Otherwise it shows the new Recipe List.
• Recipe picker always shows the new Recipe List and ignores any recipe-list: text.
• Legacy text macro always uses recipe-list: text, and shows nothing on pages without it.

If you added the block to your Blog posts template for a few roundup posts, your other recipe posts now show related recipes from the same block. To keep those posts as they were, set Mode to Legacy text macro.

To move a list to the new picker, set Source to Pick recipes, choose the same recipes, then delete the recipe-list: text from the page.

Search engines

On pages that list recipes, such as your home page or a roundup post, the Recipe List adds structured data that helps Google show your recipes as a carousel in search results. This happens automatically. It isn't added to recipe posts or product pages, where the recipe or product itself is what Google should show.

Troubleshooting

The theme editor says "No recipes matched"

The source you chose found no recipes, so the section is showing your newest recipes instead. Shoppers see the same recipes. Check the tag spelling for By tag or Featured, or pick a different source.

Pick recipes shows nothing

None of the recipes you picked can be shown, so the section is empty on your store. In the theme editor it says "No recipes matched this block's settings". Check that you picked at least one recipe under Recipes, and that each one is published in Recipe Kit and connected to a blog post.

A recipe is missing

The recipe has to be published in Recipe Kit and connected to a published blog post.

Recipes using this product shows other recipes

No recipe uses that product yet. Link the product to an ingredient or piece of equipment in the recipe editor. See Linking products to recipes.

A product you link today appears on its product page within a day. Until then, the Recipe List shows your newest recipes there.

Most viewed shows my newest recipes

Most viewed counts recipe views from the last 30 days. If none of your recipes have views in that time, for example on a new store, it shows your newest recipes instead.

The theme editor says "Recipe Kit could not load recipes right now"

Reload the theme editor. If the message stays, contact support so we can take a look.

What's next

• Recipe categories and filtering compares the ways readers can browse your recipes.
• Linking products to recipes covers the product links that power Recipes using this product.
• Linking blog posts to recipes covers connecting recipes to posts, which every listed recipe needs.