Appearance, Templates & Custom CSS — RUTHH COD Form & Upsells

Style the storefront COD trigger button and order form in Form Builder → Form Designer (/app/form-builder) so colors, typography, text direction (AUTO, LTR, RTL), button icons, animations, and custom CSS match your brand identity.

• You have opened Form Builder → Form Designer (/app/form-builder).

1. In Form Designer (/app/form-builder), open the Appearance & Templates controls (integrated directly into the Form Designer styling workspace).
2. Choose a curated visual preset or customize individual tokens:
   • Background, surface, border, and primary text colors.
   • Font scale, border radius, and input field density.
3. Preview your changes in real time in the interactive right-hand live preview pane across desktop and mobile viewports.

1. Locate the Text Direction (preferences.direction) setting.
2. Select one of the three supported values:
   • AUTO: Automatically adapts to the active storefront document direction.
   • LTR: Forces left-to-right layout (standard for English and Turkish).
   • RTL: Forces right-to-left layout (for Arabic, Hebrew, and RTL storefronts; synchronized with the rtl flag).

1. Select the Submit Button / Buy Button Appearance card (ButtonAppearance).
2. Customize the button text (including dynamic total price tokens), background color, text color, and border radius.
3. Optionally select:
   • Button Icon (buttonIcon): Choose from the curated vector icon library.
   • Icon Position (iconPosition): Place the icon before the label (default) or after (after).
   • Icon Motion (iconMotion): Keep the icon static (still) or apply subtle icon motion.
   • Button Animation (animation): Choose from the 19 shared motion tokens (such as pulse, shake, bounce, or shimmer) validated identically by button-style.ts and cod-button-style.js.

1. Open the Custom CSS panel in Form Designer.
2. Enter scoped CSS rules targeting form classes.
3. Click Save in the SaveBar. The server validates and sanitizes custom CSS before projecting it into cod_form.v2_snapshot.

• Button animation does not play on the storefront: Check if your operating system or browser has Reduce Motion (prefers-reduced-motion: reduce) enabled. The storefront stylesheet respects accessibility preferences and suppresses continuous animations when reduced motion is active.
• Removed legacy keys (hideLabels / showIcons): Global preferences.hideLabels and preferences.showIcons were replaced by per-element hideLabel and showIcon toggles on each field in Form Designer.

• Form Fields, Validation & Cascading Locations
• Thank You Page & General Settings
• Visibility & Display Rules