Branding Guide

The Branding page in your OrderFlow admin lets you customize the quick order page's appearance without writing a single line of code. Whether your store has a bold, high-energy aesthetic or a clean, minimal design, you can tailor the order page so it feels like a native part of your storefront rather than a third-party add-on.

Start by selecting one of six built-in presets that set a coordinated baseline for colors, fonts, and shape. From there, fine-tune individual design tokens to dial in the exact look you want. Every change previews in real time right inside the admin, so you can see the result before saving.

All branding settings are applied exclusively to the storefront proxy page — the public-facing quick order page your customers see at yourstore.com/apps/orderflow. They do not affect your Shopify admin interface, your theme, or any other part of your store. This means you can experiment freely without worrying about unintended side effects.

Branding is available on all plans, including the Free plan. Changes are saved instantly and take effect the next time a customer loads the order page.

OrderFlow ships with six carefully designed presets, each setting all eight color tokens, the font family, and the border radius to a coordinated combination. Presets are the fastest way to get a polished look — pick one that's close to your brand, then adjust individual tokens as needed.

The six presets are:

• Default — A clean light theme with teal accents. This is the starting point for most stores and works well out of the box with a professional, neutral feel.
• Dark — A dark background with light text and a modern feel. Ideal for stores with a premium, tech-forward, or night-mode aesthetic.
• Minimal — Reduced visual weight with subtle borders and no shadows. Best for stores that prioritize simplicity and whitespace.
• Bold — High contrast with strong colors and prominent buttons. Great for stores that want the order page to feel energetic and action-oriented.
• Warm — Warm beige and brown tones designed for artisan, organic, or natural product brands. Feels inviting and earthy.
• Match My Store — Attempts to inherit colors from your active Shopify theme automatically. This uses the theme's primary and secondary colors as a starting point, giving you a head start on brand alignment.

After selecting a preset, every token is unlocked for individual customization. The preset simply sets the starting values — it does not lock you in. If you change a single token and later select a different preset, all tokens will reset to that preset's values, so save your custom work before switching.

OrderFlow uses eight color tokens to control the appearance of the quick order page. Each token maps to a specific role in the UI, so changing one value updates every element that uses it. This token-based approach ensures visual consistency across buttons, cards, headers, text, and borders.

The eight tokens are:

• Primary — The main accent color used for buttons, links, and active states. This is the most visible brand color on the page.
• Background — The page background color. Sets the overall canvas for the entire order page.
• Card Background — The background color for cards and panels, including the product list, cart summary, and search area.
• Text — The primary text color used for headings, product names, prices, and body content.
• Secondary Text — A muted text color for less prominent information such as SKUs, helper text, and secondary labels.
• Border — The color for borders, dividers, and input outlines. Subtle but important for visual structure.
• Header Background — The background of the top header bar on the order page.
• Header Text — The text and icon color in the header bar.

Each token has a color picker and a hex input field, so you can either click to choose visually or paste an exact hex value from your brand guidelines. The preview updates instantly as you adjust values.

Tip: Start with a preset that's close to your brand, then adjust just the Primary and Background tokens to match your store's palette. In most cases, tweaking two or three tokens is enough to achieve a strong brand match.

The Typography setting lets you select a font family from a curated list of popular Google Fonts. The dropdown includes Inter, Roboto, Open Sans, Lato, Poppins, Nunito, Source Sans Pro, and several other widely used typefaces that render well at all sizes and on all devices.

When you select a font, OrderFlow loads it from Google Fonts on the proxy page using an optimized <link> tag with font-display: swap to prevent invisible text while the font loads. System fonts (such as the device's default sans-serif) are always included as a fallback, so the page remains readable even if the Google Fonts CDN is temporarily unavailable.

The selected font applies to all text on the quick order page — headings, product names, prices, buttons, inputs, and helper text. This gives the page a cohesive typographic identity. If your Shopify theme uses a specific Google Font, choosing the same font in OrderFlow creates seamless visual continuity between your store and the order page.

If you are unsure which font to choose, Inter (the default) is an excellent all-purpose typeface designed specifically for user interfaces. It has clear letterforms, consistent spacing, and strong readability at small sizes — all qualities that matter for a data-dense order page.

The Shape control is a single slider that sets the border radius for all rounded elements on the order page — cards, buttons, input fields, badges, and dropdown menus. It ranges from 0px to 16px and updates the preview in real time as you drag.

At 0px, every element has sharp, square corners. This creates a modern, architectural feel that works well with minimal or editorial design styles. At 8px (the default), elements have softly rounded corners that feel friendly and approachable without being playful. At 16px, corners are fully rounded, giving the page a softer, more casual appearance.

Because the slider controls a single design token that cascades to all UI elements, you get visual consistency with one adjustment. There is no need to round buttons and cards separately — the single value applies everywhere. This is intentional: a consistent border radius is one of the simplest ways to make a page feel polished and designed.

If your Shopify theme uses sharp corners, set this to 0px. If your theme has large, pill-shaped buttons, push it closer to 16px. Matching the border radius to your theme's existing shape language helps the order page feel integrated rather than bolted on.

For advanced customization beyond what presets and tokens offer, the Custom CSS section gives you a raw CSS textarea. This section is collapsed by default under an "Advanced" disclosure to keep the interface clean for merchants who don't need it.

Any CSS you write here is injected as a <style> tag on the proxy page after all default styles. This means your rules take precedence and can override any built-in styling. You can use this to hide specific elements, adjust spacing, add hover effects, change font sizes for specific components, or apply any other visual modification that the token system doesn't cover.

Custom CSS is applied exactly as written — there is no sanitization, minification, or transformation. This gives you full control but also means you should test thoroughly after making changes. Malformed CSS can break the layout, and overly broad selectors can have unintended effects. Use your browser's developer tools to inspect elements and write precise selectors.

A few practical use cases: hiding the "Powered by OrderFlow" badge on the Plus plan, adding a custom background pattern or gradient, increasing the font size of product names for accessibility, or adding a colored left border to cards for visual emphasis. If you find yourself writing a lot of custom CSS, consider reaching out to us — the feature you need might be worth adding as a first-class token.