Campos personalizados: documentación de CheckoutOS

Los campos personalizados permiten recoger información adicional durante el checkout. Estos datos pueden servir para personalizar la experiencia, preparar pedidos, cumplir normativas o hacer marketing.

Úsalos con moderación

Cada campo adicional dificulta un poco el checkout. Recoge solo información necesaria. Cada campo obligatorio puede reducir la conversión entre un 1 y un 3 %.

Tipos de campos disponibles

Campos de texto

Tipos de entrada de texto

Texto de una línea: respuestas breves
Área de texto de varias líneas: respuestas largas, como instrucciones
Email: con validación
Número de teléfono: con formato
Número: solo entrada numérica

Campos de selección

Tipos de selección

Lista desplegable: una opción de una lista
Botones de opción: una elección, con todas las opciones visibles
Casillas: permiten varias selecciones
Interruptor: elección binaria de sí o no

Campos especiales

Tipos de entrada especiales

Selector de fecha: selección en calendario
Selector de hora: selección de franja horaria
Carga de archivos: documentos o imágenes
Firma: captura de firma digital

Casos de uso habituales

Instrucciones de entrega

Campo de instrucciones de entrega

{
  "field": {
    "id": "delivery_instructions",
    "type": "textarea",
    "label": "Delivery Instructions",
    "placeholder": "Gate code, leave at door, etc.",
    "required": false,
    "max_length": 200,
    "placement": "shipping_address"
  }
}

Verificación de edad

Campo de verificación de edad

{
  "field": {
    "id": "age_verification",
    "type": "date",
    "label": "Date of Birth",
    "required": true,
    "validation": {
      "min_age": 21,
      "error_message": "You must be 21 or older to purchase this product"
    },
    "conditional": {
      "show_when": "cart_contains_tag",
      "tag": "age-restricted"
    }
  }
}

Información empresarial y fiscal

Campos empresariales

{
  "fields": [
    {
      "id": "company_name",
      "type": "text",
      "label": "Company Name",
      "required": false
    },
    {
      "id": "vat_number",
      "type": "text",
      "label": "VAT Number",
      "required": false,
      "validation": "vat",
      "conditional": {
        "show_when": "country_in",
        "countries": ["DE", "FR", "IT", "ES", "NL"]
      }
    }
  ]
}

Personalización del producto

Campos de personalización

{
  "field": {
    "id": "engraving_text",
    "type": "text",
    "label": "Engraving Text",
    "placeholder": "Enter text to engrave (max 20 characters)",
    "required": true,
    "max_length": 20,
    "conditional": {
      "show_when": "cart_contains_product",
      "product_ids": ["ring-001", "bracelet-002"]
    }
  }
}

Configura campos personalizados

Crea un campo nuevo

Ve a CheckoutOS → Checkout Extensions → Custom Fields → Add Field.

Selecciona el tipo de campo

Elige el tipo de entrada adecuado para los datos.

Configura las propiedades

Define la etiqueta, el texto de ejemplo, las reglas de validación y los requisitos.

Define condiciones opcionales

Indica cuándo debe aparecer el campo según el carrito o el cliente.

Elige la ubicación

Selecciona en qué parte del checkout aparece el campo.

Asigna el destino de los datos

Configura dónde se guardan y envían los datos recogidos.

Opciones de validación

Asegura la calidad de los datos con la validación integrada:

Configuración de validación

{
  "validation": {
    "required": true,
    "min_length": 2,
    "max_length": 100,
    "pattern": "^[A-Za-z ]+$",
    "pattern_message": "Only letters and spaces allowed",
    "custom_validator": "validate_phone_number",
    "validate_on": "blur"
  }
}

Visualización condicional

Muestra campos solo cuando se cumplan las condiciones relevantes:

Lógica condicional

{
  "conditions": {
    "logic": "AND",
    "rules": [
      {
        "type": "cart_total",
        "operator": "greater_than",
        "value": 100
      },
      {
        "type": "shipping_country",
        "operator": "in",
        "value": ["US", "CA"]
      }
    ]
  }
}

Gestión de datos

Los datos de campos personalizados se pueden enviar a varios destinos:

Destinos de datos

Atributos del pedido de Shopify: visibles en la administración del pedido
Notas del pedido de Shopify: concatenados en el campo de notas
Metacampos de Shopify: almacenamiento de datos estructurados
Webhooks: envío a sistemas externos
Email: inclusión en la confirmación del pedido
Aplicaciones de preparación de pedidos: ShipStation, etc.

Tratamiento de información personal identificable

Si recoges datos personales sensibles, como números de Seguro Social o datos de salud, asegúrate de tratarlos según las normativas aplicables, como GDPR, CCPA e HIPAA. Considera el cifrado y los controles de acceso.

Estilo de campos personalizados

Estilos de campos

{
  "styling": {
    "label_position": "above",
    "label_size": "small",
    "input_style": "outlined",
    "error_style": "inline",
    "help_text_position": "below",
    "required_indicator": "*",
    "group_fields": true,
    "group_title": "Additional Information"
  }
}

Buenas prácticas

Consejos de optimización

Reduce los campos obligatorios: cada campo añade dificultad.
Usa visualización condicional: muestra solo campos relevantes.
Usa etiquetas claras: el usuario debe saber por qué preguntas.
Elige tipos de campo adecuados: selectores de fecha para fechas y listas desplegables para opciones fijas.
Define valores predeterminados razonables: rellena los campos de antemano cuando sea posible.
Prueba en móviles: comprueba que los campos funcionen bien en dispositivos táctiles.

Temas relacionados

Resumen de las extensiones del checkout

Ver todas las extensiones disponibles

Más información

Funciones de descuento

Aplica descuentos según los valores de los campos

Más información