Article recipes
Using custom data (also known as metafields), you can create a recipe card to add to a blog post. Here's an example of how it can look:
Step 1: Create the recipe specific metafields in the Shopify Admin
In the left hand column of Shopify Admin, click on the "Settings" tab towards the bottom. The settings window will open and in it's left sidebar, click into "Custom data". You'll see a list of Fields for different page templates. Select "Blog posts".There are 8 metafields that build the content for the recipe card and you'll need to create a metafield definition for each one. The metafields need to be named and setup exactly as described and named below in order to work correctly. Click into the "Add definition" button to start. The only mandatory field is the "Recipe ingredients" metafield. Any blog post that has nothing entered in recipe ingredients will not display a recipe card. Make sure to "Save" each metafield after you have filled each one out.
| Name |
Namespace and key | Content type | |
| Recipe author | recipe.author | Single line text (One value) | |
| Cook time | recipe.cook_time | Single line text (One value) | |
| Prep time | recipe.prep_time | Single line text (One value) | |
| Serving size | recipe.serving_size | Single line text (One value) | |
| Recipe ingredients | recipe.ingredients | Single line text (List of values) | |
| Recipe instructions | recipe.instructions | Single line text (List of values) | |
| Recipe notes | recipe.notes | Multi-line text |
Note: the recipe title is automatically generated using the Blog Post title followed by the word "Recipe".
Step 2: Add your recipe content to recipe blog posts
Create a new blog post. On the page to edit the blog post content, on the right column there is a dropdown to select a "Theme template". Every new blog posts has "Default blog post" upon creation. Change this to the template called "recipe". The title of the blog post should be the name of the recipe.
At the bottom of the page in the middle of the column, you'll see a section for "Metafields". Click into "Show all", and you'll see fields where you can enter the copy for the metafields you created.
Step 3: Add the Recipe block to the Blog Post recipe template
Navigate to the theme customizer from the main Shopify Admin left sidebar under Online Store/Themes. Click the green "Customize" button on the theme that you want to add the recipe to.
In the theme editor, navigate to the "Blog Posts" from the top center dropdown menu and select the "Recipe" template. You should see the one blog post that you assigned the "Recipe" template to as the example post for configuring. In the left sidebar, under the section "Article recipe" click on "Add block" and select the "Recipe" block. You should see the recipe content you entered display in a recipe card. You can now customize the look and placement of the card from here.
If you are not seeing the recipe card display even though the block has been added, make sure that you are viewing a blog post that has recipe metafield content, particularly the "Ingredients" content filled out.