En configento.app, cada configurador se llama componente. Un componente contiene todas las características, valores, precios y reglas de un producto o de un grupo de productos. Este artículo le guía una vez por todo el proceso: desde el componente vacío, pasando por las características y los recargos, hasta la versión publicada que muestra su tienda. Los detalles de cada paso están en los artículos especializados enlazados.
El principio en tres frases
- Construye el componente en el editor y lo guarda. Lo guardado es un borrador – solo lo ve la vista previa.
- Con Publicar, el estado actual se comprueba y se libera para las tiendas.
- Su tienda o su sitio web integra el componente mediante un plugin o un fragmento HTML y siempre muestra la versión publicada por última vez.
Paso 1: Abrir el admin
Inicie sesión en el portal de servicio y, en su servicio, haga clic en Gestionar. Se abre la vista general de componentes.
La navegación principal tiene cuatro entradas:
| Entrada | Contenido |
|---|---|
| Componentes | Todos sus configuradores |
| Módulos | Listas de precios y tablas gestionadas de forma central que usan varios componentes |
| Ajustes | Ajustes de toda la cuenta, p. ej. idiomas e integraciones – véase Configuración global |
| Introducción | Vuelve a iniciar el recorrido por la interfaz |
Cuenta vacía: componentes de ejemplo
Si su cuenta todavía está vacía, en la primera visita el admin le pregunta si debe crear cuatro componentes de ejemplo. Muestran una imagen de producto combinada, características de combinación y de fórmula, un conjunto de reglas e iconos gráficos. Puede editarlos, publicarlos o eliminarlos como cualquier otro componente – sirven bien como modelo. Si cerró la pregunta, la encontrará de nuevo en Introducción mientras la cuenta esté vacía.
Paso 2: Crear un componente
En la vista general de componentes tiene dos caminos:
- Nuevo componente: introduzca un Título, p. ej. «Estor a medida», y haga clic en Crear. El editor se abre con un componente vacío.
- Importar ZIP: adopta un componente que haya guardado antes como ZIP con Exportar componente – por ejemplo, desde otra cuenta.
Para partir de un componente existente, use Duplicar componente en su tarjeta.
¿Prefiere el chat? El asistente IA crea el componente con sus características por usted – véase Con el asistente IA.
Paso 3: El editor de un vistazo
El editor tiene tres columnas:
| Zona | Contenido |
|---|---|
| Izquierda | Cuatro pestañas: Características (el árbol de estructura con grupos y características), Reglas, Ajustes (del componente entero) y Versiones |
| Centro | Conmutador Editar / Vista previa. Editar muestra todas las características de forma esquemática – un clic selecciona una característica. Vista previa muestra el configurador real. |
| Derecha | Los Ajustes de la característica o del grupo seleccionado |
Arriba a la derecha encontrará Deshacer, Restablecer (descarta todos los cambios y vuelve a cargar la última versión publicada) y Publicar. Cuando hay cambios sin guardar, aparece sobre la zona derecha el botón Guardar.
Paso 4: Crear grupos y características
Las características siempre están dentro de un grupo. Un componente nuevo aún no tiene ninguno, así que empiece por ahí:
- En la pestaña Características, haga clic en Añadir grupo. Se crea un grupo «Nuevo grupo». Con la rueda dentada (Ajustes de grupo) le da un nombre, p. ej. «Medidas».
- En el grupo, haga clic en + (Añadir característica). Se crea una característica «Nueva característica» del tipo Selección.
- A la derecha, en Ajustes básicos, configure:
| Campo | Significado |
|---|---|
| Etiqueta | Lo que ven sus clientes, p. ej. «Color» |
| Nombre interno (ID) | Nombre único para fórmulas y reglas, p. ej. color. Elíjalo con sentido desde el principio – el nombre asignado automáticamente new_option_… no querrá verlo después en ninguna fórmula. |
| Categoría de datos | Tipo general de la característica (véase más abajo) |
| Tipo de dato | Presentación concreta dentro de la categoría |
Cuántos grupos necesita y cómo se muestran (sin grupos, como pestañas, como acordeón o paso a paso como asistente) lo explica Grupos de características y modos de visualización.
Las cuatro categorías de datos
| Categoría de datos | Tipos de dato (selección) | Para qué |
|---|---|---|
| Característica discreta | Selección, Botones de radio, Casilla de verificación, Lista con imágenes, Selección múltiple | El cliente elige entre valores fijos, p. ej. color o accionamiento |
| Entrada libre | Campo de entrada pequeño, Campo de entrada grande, Fecha | El cliente introduce algo, p. ej. el ancho en cm |
| Cálculo | Fórmula, Lista de precios, Combinación simple | El configurador calcula por sí mismo, p. ej. superficie o precio de matriz |
| Frontend | Campo estático, Botón de acción, Subida de archivos | Contenidos y acciones sin selección propia, p. ej. un texto informativo o «Solicitar presupuesto» |
Todos los tipos en detalle: Añadir características y valores.
Paso 5: Valores y recargos
En una característica discreta, cree las opciones de elección en la sección Valores con + Valor. Un clic en un valor abre sus ajustes:
| Campo | Significado |
|---|---|
| Etiqueta | Lo que ve el cliente, p. ej. «Antracita» |
| Valor | Valor interno, p. ej. antracita – se usa en reglas y fórmulas |
| Precio | Recargo si el cliente elige este valor |
| Número de artículo | Opcional, p. ej. para listas de materiales en la tienda |
Cómo se muestran los recargos lo define para todo el componente en la pestaña Ajustes, en Recargo: Mostrar precio activado o desactivado, Tipo de precio Absoluto (el recargo del valor) o Relativo (la diferencia respecto a la selección actual) y el Patrón de precio.
Los precios que dependen de entradas – niveles, fórmulas, matrices de precios – se explican en Configurar precios, Fórmulas de precios y Matrices de precios desde Excel/CSV.
Paso 6: Ajustes básicos del componente
En la pestaña izquierda Ajustes encontrará los ajustes de todo el componente, divididos en General, Diseño, Informes y Campos personalizados. Para empezar bastan estos de General:
| Ajuste | Efecto |
|---|---|
| Título | Nombre del componente en la vista general |
| Encabezado | Encabezado opcional sobre el configurador |
| Idioma predeterminado para este componente | Idioma en el que mantiene los contenidos |
| Diseño de grupo | Sin grupos, Pestañas o Acordeón |
| Motor de frontend | Legacy (predeterminado) o V3 – véase más abajo |
Todos los demás ajustes: Configuración del componente.
Motor de frontend: Legacy o V3
El motor determina qué configurador funciona en la tienda. Legacy es el estándar probado. V3 es el nuevo motor; algunas funciones solo existen allí y otras solo en Legacy. Para su primer componente, deje Legacy (predeterminado). Qué funciones existen solo en un motor, dónde funciona cada motor y qué significa la etiqueta V3 en la vista general se explica en Motor de frontend: Legacy o V3.
Paso 7: Guardar y probar en la vista previa
Haga clic en Guardar. Cada guardado crea una entrada en la pestaña Versiones – con ella podrá volver más tarde a un estado anterior (Restaurar) o comparar dos estados.
Después, en la columna central, cambie a Vista previa. Verá el configurador tal como lo verán sus clientes, con el motor de frontend configurado. Compruebe:
- ¿Aparecen todas las características en el orden correcto?
- ¿Son correctos los recargos y el precio total?
- ¿Funcionan sus reglas, si ya tiene alguna?
Conviene saber:
- La vista previa muestra el estado guardado por última vez. Si ha cambiado algo después, un aviso amarillo se lo indica – guarde y recargue la vista previa con ↺.
- La vista previa necesita la integración HTML5. Si está desactivada, el admin le pide que la active: en Ajustes → Integraciones, active el interruptor de la tarjeta HTML5. Solo hace falta una vez.
- Con Mover a una ventana aparte abre la vista previa por separado – así el editor gana espacio.
Paso 8: Publicar
Hasta aquí, su tienda no ve nada de esto. Mientras el estado guardado difiera de la versión publicada, arriba aparece Aún no publicado.
- Haga clic arriba a la derecha en Publicar.
- El admin comprueba el componente. Los errores – por ejemplo, una lista de precios sin configuración de tabla – bloquean la publicación y se enumeran. Las advertencias – por ejemplo, una fórmula vacía o un nombre interno repetido – también se muestran, pero la publicación sigue siendo posible.
- Confirme con Sí, publicar. Los cambios sin guardar también se guardan.
A partir de ahora, todas las tiendas muestran esta versión. Los cambios que guarde después vuelven a quedar solo en el borrador – hasta la próxima publicación.
Paso 9: Integrar en la tienda
Cómo llega el componente a su página de producto depende de su sistema:
- Magento 2 / Adobe Commerce: Instalar plugin Magento
- Shopware 6: Instalar plugin Shopware
- Shopify: Instalar el plugin de Shopify
- WordPress, TYPO3 o cualquier otro sitio web: Integración fragmento HTML
En todos los casos, allí elige el componente que debe aparecer en el producto. Publíquelo antes – la tienda solo muestra versiones publicadas.
Con el asistente IA
En el borde inferior del admin, a todo lo ancho, está el Asistente IA. Haga clic en Nuevo chat y describa su producto, por ejemplo:
Vendo estores a medida. Crea un componente «Estor» con ancho y alto en cm (de 40 a 240 cada uno), tipo de tejido (estándar, opaco +15 €) y accionamiento (cadena, motor +89 €).
El asistente crea grupos, características, valores y recargos. Después, revise el resultado en el editor y en la vista previa, y publique usted mismo. El asistente IA consume tokens de IA y solo aparece si está activado para su cuenta. Más información: Agente de IA: Crear configurador mediante chat.
Problemas frecuentes
- La tienda no muestra mi cambio – guardado no es publicado. Si arriba aparece Aún no publicado, haga clic en Publicar.
- La vista previa muestra un estado antiguo – siempre muestra el último estado guardado. Guarde y recargue con ↺.
- La vista previa queda vacía con un aviso sobre HTML5 – active la integración HTML5 en Ajustes → Integraciones.
- No encuentro ningún botón para una característica nueva – las características necesitan un grupo. Primero Añadir grupo, después + en el grupo.
- Una fórmula no encuentra una característica – las fórmulas usan el Nombre interno (ID), no la etiqueta. Compruebe la escritura.