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. This feature helps them stay focused while preparing meals, making it easier to follow recipes and enjoy the cooking process.
Navigate: App Station > Page Builder > Recipe Steps block > Show Cooking Mode Button toggle
Quick Start
Go to the Page Builder in your App Station.
Select the Recipe Steps block you want to edit.
Open the block configuration.
Toggle the Show Cooking Mode Button option to enable or disable Cooking Mode.
Save your changes.
What is Cooking Mode?
Cooking Mode is a member-facing feature that enhances the cooking experience by providing a full-screen view of recipe steps. It allows members to navigate through each step one at a time, ensuring they can focus on the task at hand without distractions.
Key Features
Step-by-step navigation: Members can swipe or use keyboard arrows to move between steps.
Full-screen display: Each step is shown prominently, with images or videos for better guidance.
Inline ingredients: Ingredients are displayed alongside each step, automatically scaling based on the number of servings selected.
Wake lock: This feature prevents the screen from sleeping while members are cooking, ensuring they can easily see the instructions.
Ingredient Scaling and Yield-based Recipes
Cooking Mode supports both servings-based and yield-based recipes.
Servings-based recipes: Members can scale ingredients based on how many servings they want to prepare.
Yield-based recipes: These recipes focus on the physical output (like weight or volume). Cooking Mode will display the yield amount and unit, and ingredients will scale accordingly based on the selected yield.
Enabling Cooking Mode
To enable Cooking Mode, you need to configure the Recipe Steps block in the Page Builder.
Open the Page Builder.
Select the Recipe Steps block.
In the block configuration, find the Show Cooking Mode Button option.
Toggle it on to enable Cooking Mode for that block.
By default, this option is enabled, allowing members to access Cooking Mode seamlessly.
User Flow in Cooking Mode
When a member accesses a recipe with Cooking Mode enabled, they can:
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 the steps one at a time.
Tap the "Ingredients" button to view the full ingredient list.
Exit Cooking Mode by clicking the close button.
Accessibility and User Preferences
Cooking Mode is designed with accessibility in mind, featuring proper ARIA attributes and keyboard navigation. Additionally, it respects user preferences for measurement systems (metric or imperial) and ingredient formatting.
Text Sizing
Instruction text in Cooking Mode is displayed at a generous size for easy reading, especially from a distance. Members can also adjust the text size using a toggle in the header, cycling through three size options: comfortable, large, and huge.