> ## Documentation Index > Fetch the complete documentation index at: https://docs.salesive.com/llms.txt > Use this file to discover all available pages before exploring further. # Examples > Real-world examples of Salesive form configurations # Form Builder Examples Explore complete, production-ready examples of form schemas for different use cases. ## Basic Store Configuration A minimal form for collecting essential store information. ```json theme={null} { "pages": [ { "page": "general", "title": "General Settings", "description": "Configure your store's basic information", "sections": [ { "id": "store-info", "title": "Store Information", "description": "Your store's basic details", "fields": [ { "id": "storeName", "type": "text", "inputType": "text", "label": "Store Name", "placeholder": "My Awesome Store", "default": "", "required": true }, { "id": "storeDescription", "type": "text", "inputType": "textarea", "label": "Store Description", "placeholder": "Tell customers about your store", "default": "", "required": true }, { "id": "storeLogo", "type": "media", "mediaType": "image", "label": "Store Logo", "description": "Upload your store logo (recommended: 200x200px)", "required": true } ] }, { "id": "contact", "title": "Contact Information", "description": "How customers can reach you", "fields": [ { "id": "email", "type": "text", "inputType": "email", "label": "Contact Email", "placeholder": "contact@example.com", "required": true }, { "id": "phone", "type": "text", "inputType": "tel", "label": "Phone Number", "placeholder": "+1 (555) 123-4567", "required": true }, { "id": "address", "type": "text", "inputType": "textarea", "label": "Business Address", "placeholder": "123 Main St, City, State, ZIP", "required": false } ] } ] } ] } ``` ```json theme={null} { "variables": { "storeName": "Paradise Boutique", "storeDescription": "Premium fashion and accessories for the modern shopper", "storeLogo": "https://files.salesive.com/api/files/logo.png", "email": "hello@paradiseboutique.com", "phone": "+1 (555) 789-0123", "address": "456 Fashion Ave, New York, NY 10001" } } ``` ## E-commerce Homepage Complete homepage configuration with hero, features, and branding. ```json theme={null} { "pages": [ { "page": "home", "title": "Home Page Configuration", "description": "Customize your homepage appearance", "sections": [ { "id": "hero", "title": "Hero Section", "description": "Main banner and call-to-action", "fields": [ { "id": "heroTitle", "type": "text", "inputType": "text", "label": "Hero Title", "placeholder": "Welcome to our store", "default": "Discover Amazing Products", "required": true }, { "id": "heroSubtitle", "type": "text", "inputType": "textarea", "label": "Hero Subtitle", "placeholder": "A compelling subtitle", "default": "Shop the latest trends at unbeatable prices", "required": false }, { "id": "heroBanners", "type": "media", "mediaType": "image", "label": "Hero Banner Images", "description": "Upload 3-5 banner images for the carousel", "default": [], "required": true, "multiple": true, "minItems": 3, "maxItems": 5 }, { "id": "ctaButton", "type": "text", "inputType": "text", "label": "Call-to-Action Button Text", "placeholder": "Shop Now", "default": "Shop Now", "required": true } ] }, { "id": "features", "title": "Feature Highlights", "description": "Showcase your store's key features", "fields": [ { "id": "feature1Title", "type": "text", "inputType": "text", "label": "Feature 1 Title", "default": "Free Shipping", "required": true }, { "id": "feature1Description", "type": "text", "inputType": "textarea", "label": "Feature 1 Description", "default": "On orders over $50", "required": true }, { "id": "feature2Title", "type": "text", "inputType": "text", "label": "Feature 2 Title", "default": "Easy Returns", "required": true }, { "id": "feature2Description", "type": "text", "inputType": "textarea", "label": "Feature 2 Description", "default": "30-day return policy", "required": true }, { "id": "feature3Title", "type": "text", "inputType": "text", "label": "Feature 3 Title", "default": "Secure Checkout", "required": true }, { "id": "feature3Description", "type": "text", "inputType": "textarea", "label": "Feature 3 Description", "default": "SSL encrypted payments", "required": true } ] }, { "id": "branding", "title": "Brand Colors", "description": "Your store's color scheme", "fields": [ { "id": "primaryColor", "type": "color", "label": "Primary Color", "default": "#0d65d9", "required": true }, { "id": "secondaryColor", "type": "color", "label": "Secondary Color", "default": "#64748b", "required": true }, { "id": "accentColor", "type": "color", "label": "Accent Color", "default": "#f59e0b", "required": true } ] } ] } ] } ``` ## Blog Configuration Form for configuring a blog section. ```json theme={null} { "pages": [ { "page": "blog", "title": "Blog Configuration", "description": "Set up your blog appearance and settings", "sections": [ { "id": "blog-header", "title": "Blog Header", "description": "Blog page header content", "fields": [ { "id": "blogTitle", "type": "text", "inputType": "text", "label": "Blog Page Title", "placeholder": "Our Blog", "default": "Blog", "required": true }, { "id": "blogDescription", "type": "text", "inputType": "textarea", "label": "Blog Description", "placeholder": "Share your thoughts and insights", "default": "Latest news, tips, and insights from our team", "required": false }, { "id": "blogHeaderImage", "type": "media", "mediaType": "image", "label": "Blog Header Image", "description": "Banner image for blog page", "required": false } ] }, { "id": "blog-settings", "title": "Display Settings", "description": "Control how blog posts are displayed", "fields": [ { "id": "postsPerPage", "type": "select", "selectType": "number", "label": "Posts Per Page", "description": "Number of posts to show per page", "default": 12, "required": true, "multiple": false, "options": [ { "label": "6 posts", "value": 6 }, { "label": "12 posts", "value": 12 }, { "label": "24 posts", "value": 24 }, { "label": "48 posts", "value": 48 } ] }, { "id": "layoutStyle", "type": "select", "selectType": "text", "label": "Layout Style", "description": "Choose blog post layout", "default": "grid", "required": true, "multiple": false, "options": [ { "label": "Grid Layout", "value": "grid" }, { "label": "List Layout", "value": "list" }, { "label": "Masonry Layout", "value": "masonry" } ] }, { "id": "showAuthor", "type": "select", "selectType": "boolean", "label": "Show Author", "description": "Display author name on posts", "default": true, "required": true, "multiple": false, "options": [ { "label": "Show", "value": true }, { "label": "Hide", "value": false } ] }, { "id": "showDate", "type": "select", "selectType": "boolean", "label": "Show Date", "description": "Display publish date on posts", "default": true, "required": true, "multiple": false, "options": [ { "label": "Show", "value": true }, { "label": "Hide", "value": false } ] } ] } ] } ] } ``` ## Multi-Page Theme Complete configuration for a theme with multiple pages. ```json theme={null} { "pages": [ { "page": "home", "title": "Home Page", "description": "Configure homepage content", "sections": [ { "id": "hero", "title": "Hero Section", "fields": [ { "id": "homeHeroTitle", "type": "text", "inputType": "text", "label": "Hero Title", "default": "Welcome", "required": true }, { "id": "homeHeroImage", "type": "media", "mediaType": "image", "label": "Hero Background", "required": true } ] } ] }, { "page": "about", "title": "About Page", "description": "Configure about page content", "sections": [ { "id": "about-hero", "title": "About Hero", "fields": [ { "id": "aboutHeading", "type": "text", "inputType": "text", "label": "Page Heading", "default": "About Us", "required": true }, { "id": "aboutBackgroundImages", "type": "media", "mediaType": "image", "label": "Background Images", "description": "Upload 1-3 background images", "default": [], "required": false, "multiple": true, "minItems": 0, "maxItems": 3 } ] }, { "id": "about-content", "title": "About Content", "fields": [ { "id": "aboutContent", "type": "text", "inputType": "textarea", "label": "About Us Text", "placeholder": "Tell your story...", "default": "", "required": true }, { "id": "aboutLayout", "type": "select", "selectType": "text", "label": "Layout Style", "default": "standard", "required": true, "multiple": false, "options": [ { "label": "Standard", "value": "standard" }, { "label": "Split", "value": "split" }, { "label": "Centered", "value": "centered" } ] } ] } ] }, { "page": "contact", "title": "Contact Page", "description": "Configure contact page", "sections": [ { "id": "contact-info", "title": "Contact Information", "fields": [ { "id": "contactTitle", "type": "text", "inputType": "text", "label": "Page Title", "default": "Get in Touch", "required": true }, { "id": "contactEmail", "type": "text", "inputType": "email", "label": "Email", "required": true }, { "id": "contactPhone", "type": "text", "inputType": "tel", "label": "Phone", "required": true }, { "id": "contactAddress", "type": "text", "inputType": "textarea", "label": "Address", "required": false } ] }, { "id": "social-media", "title": "Social Media", "description": "Your social media links", "fields": [ { "id": "facebookUrl", "type": "text", "inputType": "url", "label": "Facebook URL", "placeholder": "https://facebook.com/yourpage", "required": false }, { "id": "instagramUrl", "type": "text", "inputType": "url", "label": "Instagram URL", "placeholder": "https://instagram.com/yourprofile", "required": false }, { "id": "twitterUrl", "type": "text", "inputType": "url", "label": "Twitter/X URL", "placeholder": "https://twitter.com/yourhandle", "required": false } ] } ] } ] } ``` ## Advanced Features Configuration Form with feature toggles and advanced options. ```json theme={null} { "pages": [ { "page": "features", "title": "Features & Settings", "description": "Enable and configure theme features", "sections": [ { "id": "enabled-features", "title": "Enabled Features", "description": "Select which features to enable", "fields": [ { "id": "enabledFeatures", "type": "select", "selectType": "text", "label": "Active Features", "description": "Choose features to enable on your site", "default": ["wishlist", "cart", "reviews"], "required": true, "multiple": true, "options": [ { "label": "Wishlist", "value": "wishlist" }, { "label": "Shopping Cart", "value": "cart" }, { "label": "Product Reviews", "value": "reviews" }, { "label": "Live Chat", "value": "chat" }, { "label": "Newsletter Signup", "value": "newsletter" }, { "label": "Product Compare", "value": "compare" }, { "label": "Quick View", "value": "quickview" } ] } ] }, { "id": "newsletter", "title": "Newsletter Settings", "description": "Newsletter signup configuration", "fields": [ { "id": "newsletterTitle", "type": "text", "inputType": "text", "label": "Newsletter Title", "default": "Subscribe to Our Newsletter", "required": true }, { "id": "newsletterDescription", "type": "text", "inputType": "textarea", "label": "Newsletter Description", "default": "Get updates on new products and exclusive offers", "required": false }, { "id": "newsletterPlacement", "type": "select", "selectType": "text", "label": "Newsletter Placement", "default": "footer", "required": true, "multiple": false, "options": [ { "label": "Footer", "value": "footer" }, { "label": "Popup", "value": "popup" }, { "label": "Sidebar", "value": "sidebar" } ] } ] } ] } ] } ``` ## Usage Examples ### Using Basic Store Configuration ```jsx theme={null} import { useSalesiveConfig } from "salesive-dev-tools"; function Header() { const storeLogo = useSalesiveConfig("storeLogo"); const storeName = useSalesiveConfig("storeName"); return (
{storeName}

{storeName}

); } function Footer() { const email = useSalesiveConfig("email"); const phone = useSalesiveConfig("phone"); const address = useSalesiveConfig("address"); return ( ); } ``` ### Using Homepage Configuration ```jsx theme={null} import { useSalesiveConfig } from "salesive-dev-tools"; function Hero() { const heroTitle = useSalesiveConfig("heroTitle"); const heroSubtitle = useSalesiveConfig("heroSubtitle"); const heroBanners = useSalesiveConfig("heroBanners"); const ctaButton = useSalesiveConfig("ctaButton"); const primaryColor = useSalesiveConfig("primaryColor"); return (

{heroTitle}

{heroSubtitle &&

{heroSubtitle}

}
); } function Features() { const feature1Title = useSalesiveConfig("feature1Title"); const feature1Description = useSalesiveConfig("feature1Description"); const feature2Title = useSalesiveConfig("feature2Title"); const feature2Description = useSalesiveConfig("feature2Description"); const feature3Title = useSalesiveConfig("feature3Title"); const feature3Description = useSalesiveConfig("feature3Description"); const features = [ { title: feature1Title, description: feature1Description }, { title: feature2Title, description: feature2Description }, { title: feature3Title, description: feature3Description }, ]; return (
{features.map((feature, index) => (

{feature.title}

{feature.description}

))}
); } ``` ## Best Practices from Examples **Logical Organization** - Group related fields into sections - Use descriptive page names for multi-page forms - Keep sections focused on a single aspect **User-Friendly Defaults** All examples include sensible default values to improve the user experience and provide guidance on what's expected. **Field ID Naming** Notice how field IDs are prefixed when multiple pages might have similar fields (e.g., `homeHeroTitle` vs `aboutHeading`) to avoid conflicts. ## Next Steps Learn about all available field types See how to use variables in your themes