Recipe Roundup Feature

The Recipe Roundup feature lets you display a curated list of recipes on any page of your store. Use it to create "best of" lists, seasonal collections, or featured recipe sections on your home page, blog posts, or custom pages.

How It Works

When enabled:

1. You add the Recipe Roundup app block to a page in the theme editor
2. A rich text element on the same page contains your list of recipe handles
3. The block finds the list, fetches each recipe, and renders them as styled cards with images, descriptions, and links

Adding Recipe Roundup to a Page

Step 1: Add the App Block

1. Open your Shopify theme editor (Online Store > Customize)
2. Navigate to the page where you want the roundup (home page, blog post, custom page, etc.)
3. Click Add block or Add section
4. Select Recipe Roundup from the app blocks

Step 2: Add a Rich Text Element

The roundup block reads recipe handles from a rich text element on the same page.

1. Add a Rich Text section or block to the same page
2. In the rich text content, type your recipe list using this syntax:

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

Important: Use Shift+Enter (soft line break) between each line, not regular Enter. Regular Enter creates separate paragraphs and the block won't detect the list.

For a numbered list, add numbered before the colon:

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

Step 3: Hide the Rich Text (Optional)

Since the recipe list syntax isn't meant to be visible to customers, you can hide the rich text element:

• Set the text color to match the background
• Use custom CSS to hide the section (e.g., display: none)
• Place it below the fold where customers won't see it

The roundup block will still detect and process the list even if the rich text is visually hidden.

Finding Recipe Handles

A recipe handle is the URL-friendly version of the recipe title. To find a recipe's handle:

1. Open the recipe's blog post in your Shopify admin
2. Look at the URL. The handle is the last part (e.g., blogs/recipes/chocolate-chip-cookies has the handle chocolate-chip-cookies)

Handles are lowercase with hyphens replacing spaces.

Block Settings

Button Colour

Customize the color of the "View Recipe" button on each recipe card. The text color automatically adjusts for contrast (white text on dark buttons, black text on light buttons).

Customization

Custom Styling

Use custom CSS to adjust the roundup appearance:

/* Card layout */
.rk-recipe-card {
  gap: 1.5rem;
}

/* Recipe title */
.rk-recipe-title {
  font-size: 1.25rem;
}

/* Recipe description */
.rk-recipe-description {
  color: #666;
}

/* View Recipe button */
.rk-recipe-link {
  border-radius: 4px;
  padding: 0.5rem 1rem;
}

Supported Pages

The Recipe Roundup block can be added to:

• Home page: feature your best recipes front and center
• Blog posts: create "top 10" or "best of" recipe collections
• Blog pages: showcase recipes by category or theme
• Custom pages: build dedicated recipe collection pages

Troubleshooting

Recipes Not Appearing

• Verify the rich text uses Shift+Enter between lines (not regular Enter)
• Check that recipe handles are correct and match published blog posts
• Ensure the syntax starts with recipe-list: on the first line
• Each handle must be on its own line prefixed with a dash (-)

Button Color Not Changing

• Make sure you're setting the color in the Recipe Roundup block settings, not the rich text settings
• Save and refresh the theme editor after changing the color

Only Some Recipes Showing

• The block uses Shopify's search API to find recipes, so ensure the blog posts are published and searchable
• Check for typos in the recipe handles
• Very new posts may take a moment to appear in Shopify's search index

Recipes Showing Wrong Order

• Recipes display in the order they are returned by Shopify's search API, which may not match the order you listed them
• Use the numbered option to at least label them in your intended order

What's Next?

• Analytics Dashboard - Track recipe views and engagement
• Custom CSS Styling - Advanced visual customization