Skip to main content

Cooking Mode

Cooking Mode Why: Cooking Mode offers your members a focused, step-by-step cooking experience, making it easier for them to follow recipes without...

Written by Ken Truesdale

Platform 2 Guide — This article applies to the new platform. Looking for classic platform docs? Browse the Platform 1 collection.

Why: Cooking Mode offers your members a focused, step-by-step cooking experience, making it easier for them to follow recipes without distractions. This feature enhances user engagement and satisfaction, helping them enjoy the cooking process.

Navigate: App Station > Pages & Menu > Recipe Steps block > Show Cooking Mode Button toggle

Quick Start

  1. Go to the Page Builder in your App Station.

  2. Edit the Recipe Steps block.

  3. Find the Show Cooking Mode Button option.

  4. Toggle it on to enable Cooking Mode.

  5. Save your changes.


Overview of Cooking Mode

Cooking Mode provides a full-screen, distraction-free experience for members as they cook. It guides them through each recipe step one at a time, ensuring they stay focused. Key features include:

  • Step-by-step navigation with swipe gestures and keyboard support.

  • Full-screen display for each step, showcasing images and videos prominently.

  • Inline ingredients that automatically scale based on selected servings.

  • Quick ingredient reference via a slide-in drawer.

  • Wake lock to prevent the screen from sleeping during cooking.

Enabling Cooking Mode

To enable Cooking Mode, you need to configure the Recipe Steps block in the Page Builder. Here’s how:

  1. Open the Page Builder in your App Station.

  2. Edit the Recipe Steps block.

  3. Find the Show Cooking Mode Button option.

  4. Toggle it on or off based on your preference. By default, this option is enabled.

Once enabled, members can access Cooking Mode from various entry points, including the recipe header and the steps section.

How Cooking Mode Works

When members enter Cooking Mode, they experience a full-screen interface that allows them to navigate through recipe steps easily. Here’s how it functions:

  1. Members can click the Cooking Mode button from the recipe header, steps section, or action sheet.

  2. The screen displays each step one at a time, allowing members to swipe or click through them.

  3. Members can tap the Ingredients button to view a full list of ingredients, which scales automatically based on the selected yield or servings.

  4. The cooking experience is enhanced with a timer and temperature display, helping members keep track of their cooking process.

Ingredient Scaling

Cooking Mode supports 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 feature is particularly useful for batch cooking or when using appliances that produce a specific output.

Accessibility and User Preferences

Cooking Mode is designed with accessibility in mind. It includes proper ARIA attributes for screen readers and supports keyboard navigation. Members can also adjust text size using a small toggle in the Cooking Mode header, allowing them to choose a comfortable reading size.

Future Enhancements

Looking ahead, there are potential enhancements for Cooking Mode, such as:

  • Interactive timers for step countdowns.

  • Voice control for navigating steps.

  • Text-to-speech functionality for step instructions.

  • Completion tracking to mark steps as done.

  • The ability to add personal notes during cooking.

Did this answer your question?