Visual Meal Builder
Meals that sell themselves
Your customers build their perfect meal visually — layers of proteins, toppings, and sides rendered in real time. When ordering becomes an experience, average order value increases.
Text menus lose customers
Food businesses on Shopify rely on text-only product options. Customers can’t see what they’re building, leading to decision fatigue, abandoned carts, and support tickets asking “what does this look like?” Visual customization is the standard for modern food ordering — but until now, Shopify merchants had no purpose-built solution.
How the Visual Meal Builder works
Upload your base image
Start with a transparent PNG of your plate, bowl, or container. This becomes the bottom layer of the visual composition — the foundation every topping builds on.
Add option layers with visual controls
For each option (proteins, toppings, sides), upload a transparent PNG and configure its position (0–100% x/y), scale (0.1x–3.0x), and opacity (0–100%) using the admin Visuals tab with precision RangeSlider controls.
Set layer ordering
Control which layers appear on top via z-index ordering. Proteins below toppings, toppings below sauces. The rendering engine draws layers in z-index order with the correct visual stacking.
Preview on your storefront
The storefront widget renders layers with CSS transforms and 0.3-second ease transitions. As customers select options, layers animate in with optional effects: pulse (brightness glow), darken, or highlight (primary color drop shadow). Portion badges show quantities above 1.
Why merchants choose the Visual Builder
Higher conversion rates
Visual customization reduces decision fatigue. Customers who can see what they’re building are more confident and convert at higher rates.
Works on every Shopify theme
Built as a Shopify Online Store 2.0 theme app extension with CSS custom properties that reference theme variables. Dark mode and responsive support included automatically.
No developer required
The admin Visuals tab provides slider controls for position, scale, and opacity. Upload images, adjust sliders, preview in real time. Most merchants configure their first visual meal in under 10 minutes.
Performance optimized
Images load asynchronously with in-memory caching via the useImageLoader hook. Loaded images reuse from cache on subsequent renders, preventing network requests and visual flicker.
Under the hood
Canvas 2D rendering engine
The admin visual builder uses an HTML5 Canvas 2D rendering engine. The base image draws first as the bottom layer, then option layers render in z-index order with configurable visualPosition (percentage-based 0–100% x/y), visualScale (0.1x to 3.0x multiplier), and visualOpacity (0 to 1 transparency). Each layer uses ctx.save/restore with globalAlpha for isolated rendering.
Storefront CSS transforms
The storefront widget uses CSS transforms and transitions (0.3s ease) rather than Canvas rendering for maximum browser compatibility. Three optional visual effects are available: pulse (brightness animation with glow), darken (brightness filter), and highlight (drop shadow with primary color). Portion quantity badges overlay when quantity exceeds 1.
Async image loading with caching
The useImageLoader hook handles asynchronous image loading with an in-memory cache keyed by image ID. Images load once and reuse from cache on subsequent renders, minimizing network requests. Loading and error states are tracked for graceful UI fallbacks.
Theme-aware integration
The widget uses CSS custom properties referencing Shopify Online Store 2.0 theme variables (--color-foreground, --color-background, --color-border) with hardcoded fallbacks. Dark mode support via prefers-color-scheme media query. Responsive breakpoint at 480px for mobile layouts.
Cloudinary CDN integration
Images are stored by Cloudinary public_id in the folder convention ff/<shopId>/<category>/. The transformMealImages() utility resolves public IDs into CDN URLs with preset-based transforms for hero, thumbnail, card, option image, and visual layer formats. HTTP URLs pass through unchanged. Automatic WebP/AVIF format conversion and responsive sizing. Available on Professional and Enterprise plans.
Ready to transform your food business?
Join food businesses using FoodFlex to increase order value by 23%, reduce errors by 87%, and delight their customers.
Free plan available · No credit card required · 5-minute setup · 30-day money-back guarantee