Creating recipe pages with custom fields or sections

briansteeleca
New Member
3 0 0

I'm trying to figure out the best way to create a recipe overview page in which each recipe card links to a recipe details page.

I figured I could create a blog category called recipes, and then create blog posts in that category. The problem is, I don't see a way to add custom fields to the blog posts for the recipe details. 

My second idea was to create a recipes page template that includes the various static sections that I need assemble a recipe details page. It seemed like a really nice approach until I realized that the section schema saves the data globally, so updating Recipe 2 overwrites the data in Recipe 1. I found a clever hack to try to get around that limitation, but because it uses blocks to manage pages, I'm not able to break my page into sections or include repeatable blocks for the steps.

Can anyone advise me on a way to achieve this? I see there's some apps for adding custom fields, but I'm hoping there's a way to do it without an app. Or if there's an approach to do it with pages, I'd really appreciate being pointed in the right direction.

Thanks!

 

0 Likes
Alan15
Pathfinder
93 21 25

It sounds like you want a Recipe list page that lists all your recipes and each recipe in the list needs to link to a detailed recipe page?

I would create a recipe.liquid template file and a recipe-list.liquid file. Style them the way you want.

Add each recipe as a product through your dashboard and then use the product object to access there details in the two template files. Follow the pattern in the product.liquid and collection-list.liquid.

Just an idea.

briansteeleca
New Member
3 0 0

That for the suggestion Alan, that's exactly what I want. Because the recipes aren't products, I didn't think of adding them there, but I'll explore your suggestion. I've already created the recipe and recipe-list templates.

This is what I was naively hoping to accomplish with sections – that each section would have its own instance specific to the page:

recipes.gif

Sections would essentially be page components, and each page would have its own data. I think that would be very powerful.

0 Likes
Alan15
Pathfinder
93 21 25

Yeah, I like what you're doing with the sections. It makes it easy to update the site for anyone.

The reason I like the idea of creating each recipe as a product is it gives you access to the product object and the all_products object; you get access to the product handles, titles, descriptions, tags, images ... The main body of the Recipe could be laid out in the description section of the product and you just display it using {{product .description}}. Also the ability to use product variants might be useful.

Personally, I haven't used sections very much because I just work on the code directly. I would normally create snippets instead of sections. Then write some liquid logic to include them depending on the recipe that is being displayed. Also you could have more than one recipe template eg. pizza-recipe.liquid; cake-recipe.liquid; when you create a new recipe as a product, you can select which template you want it to use.

0 Likes
briansteeleca
New Member
3 0 0

Thanks Alan, I'll definitely have a look at recipes as products. I haven't really explored what can be done with the product object/templates yet.

I considered using separate recipe templates or sections, but I know the client wants to continually add new recipes and I don't think it's practical to add new templates whenever they want to add a new recipe.

0 Likes
patrickb
Shopify Expert
28 0 7

Hey @briansteeleca , happy new year!

In case you haven't figured out a solution here yet, just wanted to chime in with my app Recipe Kit (https://apps.shopify.com/recipe-kit) which will make this process super easy for you/your client. It can generate blog posts, and then attaches a nice looking recipe card to the blog post with very little effort!

Let me know if you've got any questions

Recipe Kit - Easy, beautiful & SEO friendly recipe cards on your Shopify blog posts - https://apps.shopify.com/recipe-kit
Wait.li - Product Waiting Lists for Shopify - https://apps.shopify.com/product-waiting-lists
0 Likes