Let's talk about a special type of blog posts in Foodly theme. A page that contains a recipe looks different than other post pages on the blog. Have a look at a live demo.
Since we are going to need shortcodes to make recipe looks good. Here's a list of them for Recipe Blog Post:
[ingredients]...recipe ingredients..[/ingredients]— separates recipe ingredients from the rest of content
[directions]...recipe directions..[/directions]— separates recipe directions from the rest of the content
[license-url]URL[/license-url]— determines link with a credit to the original source of the recipe
Each shortcode consists of the opening and closing part (always contains a slash). And content should be enclosed within these two elements.
Here's an example of using shortcodes in the post:
Ingredients [ingredients] 2 Tbsp olive oil 1/2 medium onion, finely chopped 1 small carrot or 1/2 large carrot, finely chopped 1 small stalk of celery, including the green tops, finely chopped 2 Tbsp chopped fresh parsley 1 clove garlic, minced 1/2 teaspoon dried basil or 2 Tbsp chopped fresh basil 1 3/4 pound of fresh Brandywine Tomatoes, peeled, seeded, and chopped 1 teaspoon tomato paste Salt and freshly ground black pepper to taste [/ingredients] Directions [directions] Heat olive oil in a large wide skillet in medium heat. Add the chopped onion, carrot, celery and parsley. Stir to coat. Reduce the heat to low, cover the skillet and cook for 15 to 20 minutes, stirring occasionally until the vegetables are softened and cooked through. Remove cover and add the minced garlic. Increase the heat to medium high. Cook for garlic for 30 seconds. Add the tomatoes, including the juice and shredding them with your fingers if you are using canned whole tomatoes. Add the tomato paste and the basil. Season with salt and pepper to taste. Bring to a low simmer, reduce the heat to low and cook, uncovered until thickened, about 15 minutes. If you want you can push the sauce through a food mill, or blend it with an immersion blender, to give it a smooth consistency. [/directions] Thanks [license-url]simplyrecipes.com[/license-url] for recipe
Another special ingredient, you need to make your recipe work, is a tag. Tags are meant to bind specific product with a particular recipe. It is their main purpose for the recipes in Foodly theme. Recipe blog posts should have tags spelled exactly the same way as product titles. Just a heads up, if you are not familiar with tags yet please catch up on reading this article 'Product tags in Foodly Shopify theme'.
For example, Foodly theme has a product with a title "Campari Tomatoes". And we want to bind this product with a recipe "Basic Tomato Sauce". To have this work, we add the following tags to the post:
campari, tomatoes . In a result, we will get the special recipe on the product page, see a live demo.
Having this said, let's jump on the step-by-step guide how to set up a recipe 👇
How to set up a recipe blog post:
- Navigate to Online Store > Blog posts
- Click on 'Add blog post' in the upper right corner
- Type in the name of this recipe in Title field. You may call it whatever you like. There are no restrictions about that
- Let's skip description section for now and move on to 'Blog' dropdown right after the title is typed in. And in 'Blog' dropdown, choose Recipes
- Make sure to set visibility mode to Visible in the panel on the right
- Upload Featured image. Size should be at least 480px wide
- In 'Organization' panel in the bottom right panel, add tags following recommendation on this entity earlier in this post and in the 'Product tags in Foodly Shopify theme'
- When everything else is set up it's time to work on Description in 'Content' section. Please, avoid adding any images, videos, and tables within text editor in this text area
- In the text area of 'Content' section, start with the recipe intro with ideally 50 words in it.
- Next, type in the heading for ingredients. In our case, it is simply Ingredients. Also, to make it look like a heading eventually on the page. Select the heading in the text area and apply text formatting like this
- When heading is ready, add ingredients shortcode [ingredients][/ingredients] and insert your content between the opening and closing parts of the shortcode
- Next, right after the closing part of ingredients shortcode [/ingredients] type in the heading for directions. In our case, it is simply Directions. And the same formatting as was done for Ingredients heading
- When heading is ready, add directions shortcode [directions][/directions] and insert your content between the opening and closing parts of the shortcode
- It is crucial to make the content between opening and closing parts of the shortcode to have ordered list formatting. Set it in the text editor options
- In case this is not the original recipe and you'd like to add credits to the source, use shortcode [license-url][/license-url] to wrap up the link
- Save recipe clicking on 'Save' button in the top right corner
If you have any suggestions on this matter don't hesitate and leave your thoughts in the comments bellow 📬. If there are any questions regarding your own store please submit a support request 🚑