// // Personalización

Tu marca, tu tienda, cero código

Knecta separa estructura de estilo a través de un sistema de tokens CSS. Podés modificar la identidad visual entera —colores, tipografías, espaciado y componentes— sin abrir un editor de código.

9 min de lecturaActualizado · Abril 2026

La personalización en Knecta está diseñada con un principio simple: lo que un diseñador cambia más seguido, debe ser accesible desde un input; lo que se toca rara vez, puede quedar detrás de un preset. El resto está intencionalmente bloqueado para mantener la coherencia visual del producto.

01

Filosofía de diseño

Ofrecer "customización total" suena ideal en marketing pero en la práctica genera tiendas ilegibles, cargadas y lentas. Nuestra decisión fue opuesta: restricción cuidadosa. Cada variable que exponemos fue evaluada con criterios de marca, UX y performance.

  • Tokens CSS controlados. Seis colores y dos familias tipográficas. No más. Suficiente para construir identidad, poco suficiente para romper el sistema.
  • Presets curados. Combinaciones probadas diseñadas por nuestro equipo. Un click te da un look completo sin caer en el síndrome de "plantilla".
  • Contenido por componente. El copy de tu landing es 100% editable; la estructura y las reglas de contraste, no.
  • Sin CSS libre. Aunque tengas experiencia técnica, el CSS customizado queda fuera del alcance del usuario. Esto nos permite garantizar performance, responsive y accesibilidad.
02

Tokens CSS: colores y fuentes

Los design tokens son las variables que controlan la apariencia de todo tu storefront. Se editan desde Settings → Tokens de diseño. El preview se actualiza al instante y los cambios se guardan solo al confirmar.

--p-bgFondo de la página. Idealmente un color claro y neutro. Ejemplo: #F0EBE3.
--p-surfaceSuperficies elevadas: cards, modales, header. Un paso más claro o levemente diferenciado del fondo.
--p-textTexto principal, títulos. Debe tener contraste WCAG AA contra --p-bg.
--text-dimTexto secundario: subtítulos, metadata, timestamps. Atenuado respecto al principal.
--p-mutedBordes, líneas divisorias, grillas sutiles. Un tono muy cercano al fondo.
--p-accentColor de marca: botones CTA, links activos, precios destacados, badges. Único color de alta saturación del sistema.
--p-font-headingFuente de títulos. Seleccionable desde un whitelist curado (DM Serif, Playfair, Barlow, etc.).
--p-fonts-bodyFuente de cuerpo. Debe ser legible a 14–16px. Opciones: Syne, Source Sans, Karla, Inter.
Seguridad

Los valores de tokens se validan server-side contra whitelist y expresiones regulares estrictas. Colores solo aceptan hex #RRGGBB; fuentes solo el set permitido. Cualquier intento de inyección CSS es descartado antes de persistir.

03

Presets de diseño

Si no querés decidir cada token uno por uno, empezá por un preset. Cada uno es una combinación completa de tokens + opciones de componentes, pensada para un tipo de marca.

BrutalBlanco/negro, tipografía sans, bordes sólidos, transiciones escalonadas. Para marcas con identidad fuerte e industrial.
OrganicTonos cálidos tierra, tipografía serif para títulos. Para marcas artesanales, slow-fashion, productos naturales.
Neo-TokyoPaleta saturada con acento neón, mono para labels, elementos técnicos. Streetwear, futurismo, marcas joven urbano.
MinimalWhitespace extremo, un solo color de acento, tipografía neutra. Para marcas de lujo o productos premium.
Workflow recomendado

Elegí un preset que se parezca a lo que imaginás. Después entrá a tokens y ajustá los colores a tu paleta exacta. Este flujo te ahorra horas de decisión y garantiza un resultado coherente.

04

Contenido editable por componente

Más allá de los tokens, podés editar el copy de cada bloque de tu storefront: hero, features, footer, FAQ. Cada componente expone los campos relevantes y nada más — ni HTML libre ni markdown complejo.

  • Hero. Título, subtítulo, texto del botón principal, imagen de fondo. Nada más — el layout se mantiene.
  • Features / Beneficios. Hasta 6 cards con ícono (seleccionable), título y descripción breve.
  • Testimonios. Nombre, rol, cita y avatar. Tres testimonios visibles en carrusel automático.
  • FAQ. Preguntas y respuestas ilimitadas. Acordeón accesible con navegación por teclado.
  • Footer. Links por columna, redes sociales, información legal. Todo opcional salvo copyright.
05

Banners e imágenes

El storefront soporta banners por dispositivo: uno para desktop y uno para mobile. Cada banner tiene imagen, link y texto alternativo.

  1. Subí la imagen desktopRelación recomendada 16:9 o 21:9. Lado mayor entre 1920 y 2400 px. Dejá márgenes internos — el recorte responsive puede comer bordes.
  2. Subí la variante mobileOpcional pero muy recomendado. Relación 4:5 o 1:1. Esto evita que el banner desktop se vea forzado en pantallas chicas.
  3. Configurá el link destinoPodés linkear a una categoría (?categoria=remeras), a un producto específico, a una URL externa o a una sección del storefront.
  4. Escribí el texto alternativoCrítico para accesibilidad y SEO. Describí lo que la imagen muestra, no uses "banner" o "imagen".
Performance

Antes de subir, comprimí la imagen. Un banner de 2 MB te cuesta medio segundo de Largest Contentful Paint — el visitante ya se fue cuando cargó. Squoosh o TinyPNG son gratis y bajan 60–80% el peso.

06

Conectar dominio propio

Knecta te da un subdominio gratuito tipo tunombre.knecta.app, pero si ya tenés un dominio propio podés conectarlo. El proceso toma entre 15 minutos y 24 horas según la propagación DNS.

  1. Ingresá tu dominio en SettingsSección Dominio propio. Escribí el dominio completo, sin protocolo (ej: mitienda.com).
  2. Copiá los registros DNSEl sistema te da los valores de tipo CNAME (o A, según tu proveedor). Tienen que cargarse exactamente como aparecen.
  3. Configurá el DNS en tu proveedorEntrá al panel de tu registrar (GoDaddy, Namecheap, DonWeb, etc.) y agregá los registros. Si tenés dudas, nuestro soporte te asiste paso a paso.
  4. Esperá la propagaciónSuele tardar entre 15 minutos y 2 horas. En casos extremos, hasta 24 horas. El sistema te notifica por email cuando el certificado SSL queda emitido.
  5. Activá el dominioUna vez verificado, tocá Activar. Tu tienda pasa a responder en tu dominio. El subdominio .knecta.appqueda como redirección.
SSL incluido

El certificado se emite y renueva automáticamente vía Let's Encrypt. No necesitás configurarlo, pagarlo ni mantenerlo — es parte del servicio.