Platform 2 Guide — This article applies to the new platform. Looking for classic platform docs? Browse the Platform 1 collection.
Why: Cooking Mode provides your members with a distraction-free, step-by-step cooking experience, helping them focus on the recipe while ensuring they have all the necessary ingredients at their fingertips.
Navigate: App Station > Pages & Menu > Recipe Steps block > Show Cooking Mode Button toggle
Quick Start
Go to the Page Builder in App Station.
Open the Recipe Steps block configuration.
Toggle the Show Cooking Mode Button option to on.
Save your changes.
Preview your recipe to see the Cooking Mode button in action.
What is Cooking Mode?
Cooking Mode is a member-facing feature that enhances the cooking experience by guiding users through recipe steps one at a time. It offers a full-screen display that helps members focus on their cooking without distractions. Key features include:
Step-by-step navigation: Members can swipe or use keyboard arrows to move through steps.
Wake lock: Keeps the screen awake during cooking sessions.
Ingredient scaling: Automatically adjusts ingredient amounts based on the selected servings or yield.
Key Features
Step-by-Step Navigation
Cooking Mode allows members to navigate through recipe steps easily. They can swipe left or right or use keyboard arrow keys to move between steps, ensuring a smooth cooking experience.
Full-Screen Display
Each step is displayed in full-screen mode, making it easy for members to read instructions and view media (images and videos) without distractions.
Inline Ingredients and Scaling
Ingredients are displayed inline with the instructions, and they automatically scale based on the number of servings or yield selected. This ensures that members have the right amounts of each ingredient for their cooking needs.
Wake Lock
Cooking Mode prevents the device screen from sleeping while cooking. This means members can focus on their recipe without interruptions from their device going dark.
Ingredient Drawer
Members can access a slide-in drawer that shows the full list of ingredients, complete with checkboxes. They can check off ingredients as they use them, making it easy to keep track of what’s been prepared.
Enabling Cooking Mode
To enable Cooking Mode for your recipes, follow these steps in the Page Builder:
Navigate to the Recipe Steps block.
Open the block configuration.
Find the Show Cooking Mode Button option.
Toggle it on to enable Cooking Mode.
By default, this option is enabled, so you may not need to change it unless you want to disable the feature.
User Flow in Cooking Mode
When a member uses Cooking Mode, they will:
Navigate to the recipe detail page.
Click the "Cooking Mode" button from the header, steps section, or action sheet.
Enter full-screen cooking mode.
Swipe or click through steps one at a time.
Access the ingredient list and check off items as they go.
Exit Cooking Mode when finished.
Yield-Based Recipes
Cooking Mode works seamlessly with both servings-based and yield-based recipes. For yield-based recipes, the yield amount and unit are displayed, and ingredients scale according to the yield. This is particularly useful for batch cooking or recipes that produce a specific quantity.
Accessibility Features
Cooking Mode is designed with accessibility in mind. It includes:
Proper ARIA attributes for screen readers.
Keyboard navigation support.
Focus management when opening and closing the mode.