Design Customization

Your Brand, Not Ours

Your booking storefront at {storename}.opencals.com is fully yours. Set your colors, upload your logo, choose your fonts, and pick a light or dark theme. Customers booking with you see a professional, branded experience — not a generic booking tool.

Colors

Every color in the storefront is configurable. You're not limited to a primary brand color — you control the full palette:

• Primary — buttons, links, active states
• Secondary — backgrounds, accents
• Background / Foreground — page base and text
• Card — service and appointment cards
• Border — dividers and input outlines
• Accent — notifications and highlights
• Destructive — errors and delete actions (keep this red or clearly distinct)

Set each value as a hex code. Light and dark themes have separate palettes — your dark mode can use gold on near-black while your light mode uses blue on white.

Typography

• Font families — choose sans-serif, serif, or monospace fonts. Any web-safe or Google Font works.
• Letter spacing — tighten or loosen character spacing across the storefront
• Border radius — 0 for sharp corners, 0.5rem for a balanced look, 1rem+ for a friendly rounded style

Small changes in border radius and letter spacing make a significant difference in overall feel. A spa might use 1rem radius and spaced lettering; a law firm might use 0 radius and tight spacing.

Images

Upload three types of branded images:

• Logo — appears in the storefront header. Use a PNG with a transparent background.
• Icon — used as the browser favicon and mobile bookmark icon. Must be square, 512×512px recommended.
• Banner — optional hero image at the top of your storefront. Use a wide image (1920×600px) without text — the layout adds text on top.

Shadows and Depth

Control the depth effect on cards and elevated elements: shadow color, opacity, blur radius, spread, and offset. Set opacity to 0 for a completely flat design, or increase it for a more layered look.

Shopify Widget

The Opencals storefront settings apply to {storename}.opencals.com. For the booking widget embedded in your Shopify store, styling inherits from your Shopify theme. Configure widget appearance in the Shopify theme editor.