Ck Sections Documentation

Después de la instalación, se te dirigirá al Marketplace de Secciones de CK. Explora las plantillas disponibles, como el "Contador de estadísticas" o la "Imagen moderna con texto". Cuando encuentres una sección que te guste, haz clic en el botón Añadir gratis para agregarla a tu colección.

Desde el panel "Mis secciones", localiza la sección específica que desees utilizar (p. ej., CK - Pregunta frecuente #1). Haz clic en el botón "Instalar en el tema" situado en la parte inferior de la tarjeta de la sección.

Aparecerá una ventana emergente titulada "Instalar [Section Name] en el tema". Haz clic en el menú desplegable "Seleccionar tema" para ver una lista de todos los temas disponibles actualmente en tu tienda Shopify. Elige el tema donde quieres que se añada la sección

Dirígete a la barra lateral de tu panel de administración de Shopify y haz clic en Tienda online. Esto te llevará a la sección de temas, donde podrás gestionar tus temas publicados y en borrador.

En la barra lateral del editor de temas, busca el área donde quieras añadir el nuevo contenido (como el área «Plantilla») y haz clic en el botón (+) Añadir sección.

Se abrirá un menú de búsqueda. Desplázate por la lista o busca la sección que acabas de instalar. Por lo general, tendrá el prefijo «CK» (p. ej., CK faq #1). Haz clic en ella para añadirla al diseño de tu página.

Una vez que la sección aparezca en tu página, puedes usar la barra lateral derecha para ajustar colores, fuentes y texto. Cuando estés satisfecho con el aspecto, haz clic en el botón Guardar en la esquina superior derecha para publicar los cambios.

Haz clic en el botón + Crear formulario en la parte superior derecha o en el centro del panel de control para abrir la pantalla de configuración.

Tienes dos formas de crear un formulario:

• Plantillas: Elige entre opciones prediseñadas como Formulario de contacto, Solicitud de empleo o Pedido personalizado para ahorrar tiempo.
• Empezar desde cero: Haz clic en Crear formulario en blanco para diseñar un formato único desde cero.

El constructor se divide en tres áreas principales:

• Barra lateral izquierda (Tipos de campos): Tu caja de herramientas. Haz clic o arrastra cualquier campo (Texto, Correo electrónico, Teléfono, Menú desplegable, etc.) al área central.
• Espacio de trabajo central: La vista previa en tiempo real de tu formulario. Aquí puedes editar el Título del formulario y la Descripción.
• Barra superior: Contiene las acciones de Deshacer/Rehacer, un botón de Vista previa para ver la versión en tiempo real, Configuración y el botón de Guardar.

Una vez que añadas un campo, haz clic en él para abrir la barra de edición en el lado derecho. La personalización se divide en cuatro categorías:

Cambia la etiqueta, añade texto de marcador de posición o marca el campo como obligatorio.

Establece las longitudes mínimas/máximas de caracteres o utiliza patrones de expresiones regulares para tipos de datos específicos.

Alterna entre Ancho completo o Medio ancho para colocar dos campos uno al lado del otro.

La lógica condicional te permite crear formularios «inteligentes» que cambian según la información que introduzca el usuario. Puedes mostrar u ocultar campos específicos solo cuando se cumplen determinados criterios.

Cómo configurar la lógica

1. Seleccionar un campo: Haz clic en el campo que quieras mostrar u ocultar dinámicamente.
2. Activar la lógica: En la barra lateral derecha, amplía la sección Lógica condicional y marca la casilla Activar la lógica condicional.
3. Definir la acción: * Elige si quieres Mostrar u Ocultar el campo seleccionado.
4. Establecer la coincidencia de la regla:
   Todas: Todas las condiciones deben cumplirse.
   Cualquiera: Solo una de las condiciones debe cumplirse.
5. Configurar las condiciones:
   Seleccionar campo: Elige el campo cuyo valor activará la lógica.
   Seleccionar operador: Elige cómo comparar el valor (p. ej., Es igual a, Contiene, Mayor que, Está vacío).
   Introducir valor: Escribe el valor específico que estás buscando.

Controla lo que sucede después de que un usuario interactúa con tu formulario.

• Texto del botón de envío: Personaliza la etiqueta de tu botón de acción principal (por ejemplo, "Enviar mensaje", "Reservar ahora").
• Mensaje de éxito: Escribe una nota de agradecimiento personalizada que aparezca inmediatamente después de un envío exitoso.
• URL de redirección: (Opcional) Envía automáticamente a los usuarios a una página específica (como una página de "Gracias" u "Ofertas") una vez que envíen el formulario.

Adapta el diseño a la identidad visual de tu tienda sin escribir código.

• Colores: Establece códigos hexadecimales específicos para tu Color principal (botones/elementos destacados), el Fondo y el Texto.
• Tipografía: Elige una Familia de fuentes o configúrala como Heredar del tema para mantener la apariencia uniforme de tu tienda.
• Espaciado y forma: Usa los deslizadores para ajustar el Radio del borde (para esquinas redondeadas) y el Relleno (para dar más espacio a tus campos).

Mantente al día sobre nuevos clientes potenciales y consultas.

• Activar notificaciones: Activa el interruptor para recibir un correo electrónico cada vez que se envíe un formulario.
• Correos electrónicos de notificación: Haz clic en + Añadir correo electrónico para enviar alertas a varios miembros del equipo o departamentos simultáneamente.

Protege tu tienda del spam y de los bots automatizados.

• Protección CAPTCHA: Actívala para añadir un paso de verificación para los usuarios y evitar envíos realizados por bots.
• Límite de velocidad: Establece un número máximo de envíos permitidos por minuto desde un solo usuario para evitar el uso indebido de formularios.

Antes de que un formulario pueda aparecer en tu tienda, debe estar publicado.

• Publicar: Haz clic en el botón Publicar en la parte superior derecha del editor.
• Copiar ID: Una vez publicado, haz clic en el botón Copiar ID de la barra superior. Necesitarás este ID único para indicarle a Shopify qué formulario mostrar.

Puedes colocar tu formulario en cualquier página (Inicio, Contacto, Producto, etc.) usando el Editor de temas de Shopify.

• Abrir el Editor de temas: Ve a tu panel de administración de Shopify > Tienda en línea > Temas > Personalizar.
• Añadir sección: Haz clic en Añadir sección en la barra lateral izquierda.
• Seleccionar la pestaña de aplicaciones: Cambia de "Secciones" a la pestaña Aplicaciones y selecciona Ck Forms.

Pegar el ID del formulario: Haz clic en el bloque Ck Forms recién añadido. En la barra lateral de configuración de la derecha, pega el ID que copiaste anteriormente en el campo Form ID (Captura de pantalla 11).

Guardar: Haz clic en Guardar en la parte superior derecha del editor de Shopify.

Tu formulario ahora aparecerá publicado en tu tienda. Heredará automáticamente los estilos (colores, fuentes y diseño) que configuraste en los ajustes de la aplicación.