Field Types - Salesive Docs

Salesive Form Builder supports multiple field types to collect different kinds of configuration data. Each field type has specific properties and validation rules.

Text Fields

Text fields collect string data with various input types for different use cases.

Basic Text Input

Single-line text input for short strings.

{
    "id": "storeName",
    "type": "text",
    "inputType": "text",
    "label": "Store Name",
    "placeholder": "Enter your store name",
    "default": "My Store",
    "required": true
}

string

required

Must be "text" for single-line input

string

Example text shown in empty field

Textarea

Multi-line text input for longer content.

{
    "id": "aboutUs",
    "type": "text",
    "inputType": "textarea",
    "label": "About Us Description",
    "placeholder": "Tell your story...",
    "default": "",
    "required": false
}

string

required

Must be "textarea" for multi-line input

Use cases: Descriptions, long-form content, paragraphs

Email Input

Email address input with validation.

{
    "id": "contactEmail",
    "type": "text",
    "inputType": "email",
    "label": "Contact Email",
    "placeholder": "email@example.com",
    "required": true
}

string

required

Must be "email" for email validation

Validation: Ensures valid email format (user@domain.com)

Phone Number Input

Phone number input with tel keyboard on mobile.

{
    "id": "phoneNumber",
    "type": "text",
    "inputType": "tel",
    "label": "Phone Number",
    "placeholder": "+1 (555) 123-4567",
    "required": true
}

string

required

Must be "tel" for telephone input

Note: Triggers numeric keyboard on mobile devices

URL Input

URL input with validation.

{
    "id": "websiteUrl",
    "type": "text",
    "inputType": "url",
    "label": "Website URL",
    "placeholder": "https://example.com",
    "required": false
}

string

required

Must be "url" for URL validation

Validation: Ensures valid URL format (https://domain.com)

Number Input

Numeric input with increment/decrement controls.

{
    "id": "itemsPerPage",
    "type": "text",
    "inputType": "number",
    "label": "Items Per Page",
    "placeholder": "10",
    "default": "10",
    "required": true
}

string

required

Must be "number" for numeric input

Note: Value is still stored as string in config

Media Fields

Media fields allow users to upload or select images, videos, and other files.

Single Image

Upload a single image file.

{
    "id": "logo",
    "type": "media",
    "mediaType": "image",
    "label": "Store Logo",
    "description": "Upload your store logo",
    "default": "https://example.com/logo.png",
    "required": true,
    "multiple": false
}

string

required

Must be "image" for image uploads

boolean

Set to false for single file Default: false

Output: Single URL string

Multiple Images

Upload multiple image files.

{
    "id": "heroBanners",
    "type": "media",
    "mediaType": "image",
    "label": "Hero Banners",
    "description": "Upload hero banner images",
    "default": [
        "https://example.com/banner1.jpg",
        "https://example.com/banner2.jpg"
    ],
    "required": true,
    "multiple": true,
    "minItems": 1,
    "maxItems": 5
}

boolean

required

Must be true for multiple files

number

Minimum number of images required

number

Maximum number of images allowed

Output: Array of URL strings

Video Upload

Upload video files.

{
    "id": "promotionalVideo",
    "type": "media",
    "mediaType": "video",
    "label": "Promotional Video",
    "description": "Upload your promotional video",
    "required": false
}

string

required

Must be "video" for video uploads

Supported formats: MP4, WebM, OGG

General File Upload

Upload any file type.

{
    "id": "policyDocument",
    "type": "media",
    "mediaType": "file",
    "label": "Policy Document",
    "description": "Upload your policy document (PDF)",
    "required": false
}

string

required

Must be "file" for general file uploads

Note: Accept all file types; consider adding description with allowed formats

Color Fields

Color fields provide a color picker interface for selecting brand colors.

Color Picker

{
    "id": "primaryColor",
    "type": "color",
    "label": "Primary Brand Color",
    "default": "#0d65d9",
    "required": true
}

string

required

Must be "color" for color picker

string

Hex color code (e.g., "#0d65d9")

Output: Hex color code string (e.g., "#ff6b6b") Use cases: Brand colors, theme colors, text colors, background colors

Multiple Color Palette

Create a full color scheme:

{
    "sections": [
        {
            "id": "brand-colors",
            "title": "Brand Colors",
            "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
                }
            ]
        }
    ]
}

Select Fields

Select fields provide dropdown menus for choosing from predefined options.

Single Select

Choose one option from a list.

{
    "id": "layoutStyle",
    "type": "select",
    "selectType": "text",
    "label": "Layout Style",
    "description": "Choose the layout for this section",
    "default": "grid",
    "required": true,
    "multiple": false,
    "options": [
        {
            "label": "Grid Layout",
            "value": "grid"
        },
        {
            "label": "List Layout",
            "value": "list"
        },
        {
            "label": "Masonry Layout",
            "value": "masonry"
        }
    ]
}

string

required

Value data type: "text", "number", or "boolean"

boolean

Set to false for single selection Default: false

array

required

Array of option objects with label and value properties

Output: Single value (string, number, or boolean depending on selectType)

Multi Select

Choose multiple options from a list.

{
    "id": "enabledFeatures",
    "type": "select",
    "selectType": "text",
    "label": "Enabled Features",
    "description": "Select which features to enable",
    "default": ["wishlist", "cart"],
    "required": true,
    "multiple": true,
    "options": [
        {
            "label": "Wishlist",
            "value": "wishlist"
        },
        {
            "label": "Shopping Cart",
            "value": "cart"
        },
        {
            "label": "Reviews",
            "value": "reviews"
        },
        {
            "label": "Live Chat",
            "value": "chat"
        }
    ]
}

boolean

required

Must be true for multiple selections

Output: Array of selected values

Number Select

Select numeric values.

{
    "id": "itemsPerPage",
    "type": "select",
    "selectType": "number",
    "label": "Products Per Page",
    "default": 12,
    "required": true,
    "options": [
        {
            "label": "12 items",
            "value": 12
        },
        {
            "label": "24 items",
            "value": 24
        },
        {
            "label": "48 items",
            "value": 48
        }
    ]
}

string

required

Must be "number" for numeric values

Note: Values in options must be numbers, not strings

Boolean Select

Select true/false values.

{
    "id": "enableNewsletter",
    "type": "select",
    "selectType": "boolean",
    "label": "Newsletter Signup",
    "description": "Show newsletter signup form",
    "default": true,
    "required": true,
    "options": [
        {
            "label": "Enabled",
            "value": true
        },
        {
            "label": "Disabled",
            "value": false
        }
    ]
}

string

required

Must be "boolean" for true/false values

Note: Values must be boolean true or false, not strings

Product Fields

Product fields let merchants pick real items from their own catalogue. The value stored in salesive.config.json is the item ID, so the theme can fetch the live item (price, images, stock) at render time instead of the merchant retyping details into the form.

Catalogue by store type

A Salesive store’s catalogue differs by store type, and the picker follows it automatically. The same type: "product" field works in every storefront mode:

Store type	Catalogue	Endpoint	Wording in the picker
`ecommerce`	Products	`/products`	”Search products…”
`restaurant`	Menu items	`/foods`	”Search menu items…”
`business`	Services	`/services`	”Search services…”

Set catalog only when a field must always read one catalogue regardless of the store it is installed on:

{
    "id": "featuredDish",
    "type": "product",
    "catalog": "food",
    "label": "Dish of the Day"
}

string

Pin the picker to one catalogue: "product", "food", or "service" ("products", "menu", "services", and the store-type names are accepted too). Default: follow the store type

Single Product

Pick one product.

{
    "id": "featuredProduct",
    "type": "product",
    "label": "Featured Product",
    "description": "This product is highlighted in the hero section",
    "placeholder": "Search products...",
    "default": "",
    "required": true,
    "multiple": false
}

string

required

Must be "product" for the product picker

string

Text shown in the search box Default: "Search products..."

boolean

Set to false for a single product Default: false

Output: Item ID string (e.g., "65f1a2b3c4d5e6f708192a3b")

Multiple Products

Pick several products, for example a curated collection strip.

{
    "id": "featuredProducts",
    "type": "product",
    "label": "Featured Products",
    "description": "Products shown in the featured carousel",
    "default": [],
    "required": false,
    "multiple": true,
    "minItems": 1,
    "maxItems": 8
}

boolean

required

Must be true for multiple products

number

Minimum number of products required

number

Maximum number of products allowed

Output: Array of item ID strings

Using the Value in a Theme

Because the config only holds the ID, fetch the product through the Store API when the page renders:

const productId = config.featuredProduct;

const product = productId
    ? await fetch(`${STORE_API}/products/${productId}`, {
          headers: { "x-shop-id": shopId },
      })
          .then((res) => res.json())
          .then((body) => body.data)
    : null;

The storefront /products endpoint serves all three catalogues, returning catalogType: "food" for restaurants and catalogType: "service" for business stores, so one fetch covers every store type. See Get product for the full response shape.

Always handle a missing product. A merchant can delete a product after selecting it, so guard the render path and fall back to hiding the section rather than crashing.

Do not store product names or prices alongside the ID. They go stale the moment the merchant edits the product. Read them from the fetched product instead.

Field Type Summary

Text

Types: text, textarea, email, tel, url, number Best for: Names, descriptions, contact info, numbers

Media

Types: image, video, file Best for: Logos, banners, backgrounds, videos, documents

Color

Output: Hex color codes Best for: Brand colors, theme customization

Select

Types: text, number, boolean Best for: Predefined options, feature toggles, layouts

Product

Output: Item IDs Best for: Featured products, menu items or services, curated collections

Validation Rules

Required Fields

{
    "required": true
}

Users must fill required fields before submitting the form.

Media Constraints

{
    "multiple": true,
    "minItems": 2,
    "maxItems": 8
}

Control the number of media files users can upload.

Default Values

Always provide sensible defaults to improve user experience:

{
    "default": "Default value"
}

Best Practices

Choose the Right Input Type - Use tel for phone numbers (mobile keyboard optimization) - Use email for email addresses (validation + mobile keyboard) - Use textarea for long-form content - Use select when you have predefined options

Validation Considerations - Mark essential fields as required: true - Set realistic minItems and maxItems for media uploads - Provide clear descriptions for complex fields - Test all validation rules in preview mode

Improve User Experience - Always provide helpful placeholder text - Set sensible default values - Group related fields in sections - Add descriptions for fields that need clarification

Next Steps

View Examples

See real-world examples of forms using different field types

​Text Fields

​Basic Text Input

​Textarea

​Email Input

​Phone Number Input

​URL Input

​Number Input

​Media Fields

​Single Image

​Multiple Images

​Video Upload

​General File Upload

​Color Fields

​Color Picker

​Multiple Color Palette

​Select Fields

​Single Select

​Multi Select

​Number Select

​Boolean Select

​Product Fields

​Catalogue by store type

​Single Product

​Multiple Products

​Using the Value in a Theme

​Field Type Summary

Text

Media

Color

Select

Product

​Validation Rules

​Required Fields

​Media Constraints

​Default Values

​Best Practices

​Next Steps

View Examples

Text Fields

Basic Text Input

Textarea

Email Input

Phone Number Input

URL Input

Number Input

Media Fields

Single Image

Multiple Images

Video Upload

General File Upload

Color Fields

Color Picker

Multiple Color Palette

Select Fields

Single Select

Multi Select

Number Select

Boolean Select

Product Fields

Catalogue by store type

Single Product

Multiple Products

Using the Value in a Theme

Field Type Summary

Validation Rules

Required Fields

Media Constraints

Default Values

Best Practices

Next Steps