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. 

Namespace and key Content type
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.

For more information on metafields, see  Shopify help documentation on metafields.

Still need help? Contact Us Contact Us