Personaliza tu plantilla de cotización v3 – Soporte Ropofy

Esta documentación ha sido diseñada para ayudarte a personalizar las Plantillas de Cotización de tu negocio. Aprenderás a conectar tus diseños con la tecnología de Ropofy para que se auto-completen con la información de tus productos y clientes de forma automática.

1. Cómo acceder al Editor de Plantillas

Sigue esta ruta para comenzar a editar tus diseños:

Ingreso: En el panel lateral izquierdo, haz clic en el icono de 🌐 Sites (Sitios).
Categoría: Busca y selecciona la carpeta llamadq: 📂 "Cotizador V3 - Funnels".
Selección: Elige la plantilla que desees y haz clic en el botón azul Edit -> Edit Page.

2. Cómo conectar datos (Clases CSS)

Para que el sistema identifique dónde inyectar el precio o el nombre del cliente, utilizamos Clases CSS. No necesitas programar, solo copiar y pegar la "etiqueta" correspondiente.

Paso a paso para mapear un dato:

Selecciona el elemento: Haz clic sobre el texto, título o imagen (ej: el precio de la moto).
Pestaña Avanzado: En el menú derecho, haz clic en la pestaña superior Advanced.
Asigna la Clase: Busca el campo Custom Class (o CSS Class) y pega la clase de nuestra lista.
Guarda: ¡Haz clic en el botón Save en la esquina superior derecha!

3. Componentes Inteligentes

Ropofy incluye componentes complejos que se construyen solos. Para usarlos, crea un elemento de tipo "Column" o "Division" y asígnale una de estas clases:

A. Tabla de Amortización

Genera el desglose financiero del crédito (pagos mensuales).

Clase: ropofy-cot-pagos_complementarios
Nota: Ideal para mostrar el plan de pagos detallado.

B. Resumen de Compra

Muestra el detalle de productos, extras (SOAT, Matrícula) y los totales.

Clase: ropofy-cot-resumen

C. Navegación por Pestañas (Tabs)

Permite al cliente alternar entre varios productos cotizados.

Clase: ropofy-prod-tabs

D. Galería de Fotos

Crea un carrusel dinámico con las fotos adicionales del catálogo.

Clase: ropofy-prod-gallery

4. Diccionario de Clases Principales

Copia estos códigos según la información que desees mostrar:

Categoría	Clase CSS	Descripción
Finanzas	`ropofy-cot-total`	Valor total de la cotización
Finanzas	`ropofy-cot-cuota_mensual`	Valor de la mensualidad
Finanzas	`ropofy-cot-cuotas`	Plazo total en meses
Producto	`ropofy-prod-name`	Nombre del producto/vehículo
Producto	`ropofy-prod-image`	Imagen principal (usar en elemento Imagen)
Producto	`ropofy-prod-description`	Ficha técnica o descripción corta
Contacto	`ropofy-cot-owner-name`	Nombre del asesor
Contacto	`ropofy-cot-owner-photo`	Foto del asesor (usar en elemento Imagen)
Contacto	`ropofy-cot-contact-fullname`	Nombre completo del cliente

5. El "Truco del Guion" para Textos Fijos

Si quieres que un texto conserve un prefijo fijo, por ejemplo: Asesor: Juan Perez, sigue estos pasos:

Escribe en el elemento: Asesor: -
Ponle la clase: ropofy-cot-owner-name
Resultado: El sistema buscará el guion (-) y reemplazará solo ese carácter por el nombre real, manteniendo la palabra "Asesor:" intacta.

💡 Tip de diseño: Esto evita que el sistema borre tus etiquetas y ayuda a mantener un diseño más limpio y profesional.

Ropofy - Presentaciones de alto impacto para negocios imparables.