Saltar al contenido principal

Personaliza el widget de FAQs

El acordeón de FAQs visible tiene un único punto de montaje y, en BigCommerce, ese mismo elemento lleva también todas las opciones:

<div data-clione-faq></div>

Pon ese elemento donde quieras que aparezca el acordeón — en una plantilla del tema, en un bloque HTML de Page Builder, en la vista HTML de una página de contenido. En BigCommerce, todas las opciones de abajo son atributos de ese mismo elemento. En Shopify el elemento solo fija la posición. Con embed.js, las opciones van en la etiqueta <script>.

Lo que esta página no afecta

En los temas de BigCommerce y de Shopify, los structured data FAQPage que leen los motores de búsqueda y los crawlers de IA los escribe el servidor en el HTML de tu storefront, antes de que la página llegue al navegador. No los produce este widget, así que mover el acordeón, cambiarle el estilo o quitar el anclaje no puede cambiar lo que ve un crawler. Con embed.js, los structured data se añaden en el navegador.

Dónde aterriza el acordeón​

En BigCommerce, el script del Schema Injector (Clione FAQ Renderer) resuelve el punto de montaje en este orden y para en la primera coincidencia:

  1. [data-clione-faq] — el elemento que describe esta página. Si está en la página, el acordeón se renderiza dentro, al margen de lo demás que esté configurado.
  2. Un selector por tipo de entidad, configurado en Preguntas frecuentes → Avanzado → Estilo → Ubicación del widget de FAQ (un selector CSS distinto para productos, categorías o páginas, con el acordeón antes o después del elemento). Para merchants que no pueden editar la plantilla de su tema, o que quieren una posición distinta por tipo de entidad.
  3. El selector de toda la tienda (Por defecto), configurado en el mismo sitio.
  4. El final de <main> (o de [role="main"] si tu tema usa eso).
  5. El final de #main-content — los temas de la familia Cornerstone de BigCommerce renderizan las páginas de producto sin ningún elemento <main>; su contenedor universal de contenido es <div class="body" id="main-content">, que queda justo encima del footer.
  6. Nada. Si tu tema no tiene ninguno de los anteriores, el widget registra un error en la consola del navegador y no renderiza nada. A propósito no cae al final de <body>, porque eso suele dejar el acordeón por debajo del footer, y parece roto.

Si te vale el acordeón al final de tu zona de contenido principal, no tienes que hacer nada. Añade el anclaje cuando lo quieras en un sitio concreto, o cuando quieras las opciones de abajo.

Las otras dos superficies siguen un orden más corto:

De dónde sale el acordeónDónde aterriza
Shopify (el app embed Clione FAQ)El acordeón lo renderiza tu tema antes de </body> y luego se mueve: a [data-clione-faq], si no a [data-clione-faq-target], si no justo encima del footer, y si no se queda al final de <body>.
Headless / WordPress (embed.js)El elemento del data-target de la etiqueta, si no [data-clione-faq], si no justo encima del footer, y si no al final de <body>.

Los selectores de ubicación solo valen para BigCommerce.

Opciones de contenido​

Se leen en BigCommerce, del anclaje. En Shopify no tienen efecto. Para embed.js, mira la sección headless.

AtributoQué hace
data-clione-faqMarca el elemento como punto de montaje de las FAQs. Obligatorio — todos los demás atributos se leen de ese mismo elemento.
data-headingSustituye el texto del encabezado "Frequently Asked Questions".
data-localeEtiqueta BCP-47 (en, es, es-ES, fr, de, it, pt) que elige la traducción del encabezado que viene de serie. Se ignora cuando data-heading está puesto.
data-styledefault (tarjeta con caja) o minimal (solo maquetación, sin caja ni color). Sustituye el ajuste de tienda para esta página.
data-style-themePaleta con nombre aplicada por encima de los valores por defecto. dark viene de serie; cualquier otro valor solo añade una clase clione-faq-theme-<nombre> a la que apuntar con tu propio CSS.
<div data-clione-faq
     data-heading="Tallas y ajuste"
     data-style="minimal"></div>

Opciones de estilo​

Cada atributo pone una custom property de CSS en el acordeón renderizado. Deja uno fuera y el acordeón mantiene su valor por defecto. Los valores por defecto de abajo son los del widget de BigCommerce; en Shopify estos atributos no tienen efecto.

AtributoCustom propertyPor defectoQué hace
data-style-accent--clione-faq-accentcurrentColorColor de acento: el chevron de abrir/cerrar y la línea bajo el encabezado.
data-style-bg--clione-faq-bgtransparentFondo de todo el bloque de FAQs.
data-style-fg--clione-faq-fginheritColor del texto del encabezado, las preguntas y las respuestas.
data-style-border--clione-faq-borderrgba(0,0,0,0.1)Color del contorno de la lista y de las líneas separadoras entre preguntas.
data-style-border-width--clione-faq-border-width1pxGrosor de la línea separadora entre preguntas.
data-style-radius--clione-faq-radius8pxRadio de las esquinas del contenedor de la lista.
data-style-font--clione-faq-fontinheritFamilia tipográfica. Por defecto, la que use el tema alrededor del widget.
data-style-font-size--clione-faq-font-sizeinheritTamaño base de letra de preguntas y respuestas. Por defecto, el del texto del tema alrededor.
data-style-spacing--clione-faq-spacing1emUnidad de padding. Gobierna el espacio dentro de cada fila de pregunta.
data-style-line-height--clione-faq-line-height1.6Interlineado del texto de las respuestas.
data-style-heading-weight--clione-faq-heading-weight600Grosor de la letra del encabezado "Frequently Asked Questions".
data-style-heading-border-width--clione-faq-heading-border-width0Grosor de la línea bajo el encabezado. 0 la oculta.
data-style-question-weight--clione-faq-question-weight600Grosor de la letra de las preguntas.
data-style-answer-weight--clione-faq-answer-weight400Grosor de la letra de las respuestas.
data-style-max-width--clione-faq-max-widthnoneAnchura máxima del bloque, con su unidad (720px). Pon un valor y el bloque se centra solo.
<div data-clione-faq
     data-style-accent="#c2185b"
     data-style-max-width="720px"
     data-style-radius="12px"
     data-style-question-weight="700"></div>

Los mismos atributos en un storefront headless​

Si instalas Clione con el loader universal embed.js (storefronts headless, WordPress, cualquier cosa que no sea un tema de BigCommerce o de Shopify), los nombres data-style-* son los mismos — los escribes en la etiqueta <script> en vez de en un elemento de anclaje, y apuntas el loader a tu anclaje con data-target:

<script src="https://api.clione.ai/embed.js"
        data-api-key="TU_KEY"
        data-target="#faq"
        data-style-accent="#c2185b"
        data-style-max-width="720px"></script>

Diferencias con el widget de BigCommerce:

  • No existe el atributo data-style.
  • data-locale muestra solo las FAQs de ese idioma; no traduce el encabezado.
  • No hay tema dark de serie: data-style-theme solo añade la clase clione-faq-theme-<nombre>.
  • Los valores por defecto son otros — mira la columna del script de embed en Personaliza el aspecto.

Estilo para toda la tienda​

Todo lo anterior es por página. Para un cambio que aplique a todas, abre Preguntas frecuentes → Avanzado → Estilo, escríbelo en CSS personalizado (ámbito: .clione-faq) y pulsa Guardar CSS personalizado. Puede poner las mismas custom properties --clione-faq-*:

.clione-faq {
  --clione-faq-accent: #c2185b;
  --clione-faq-max-width: 720px;
}

En BigCommerce se aplica solo, y un atributo en el anclaje le gana para esa página concreta, porque el atributo se aplica como estilo en línea. Con embed.js, pégalo en el snippet. En Shopify no se aplica.

Resolución de problemas​

El acordeón no aparece (BigCommerce). Abre la consola del navegador en la página. El widget registra exactamente qué rama usó — el selector de ubicación, el anclaje, el final de <main> o el final de #main-content — y registra un error si no encontró ninguno. Si no encontró ninguno, añade un <div data-clione-faq></div> a la plantilla.

El acordeón aparece por debajo del footer. Es casi seguro que el <main> de tu tema envuelve más de lo que esperas, o que pusiste un selector de toda la tienda que resuelve cerca del final de la página. Añade un anclaje donde lo quieras: el anclaje siempre gana — al selector de ubicación y al fallback de <main>.

Un atributo de estilo no hace nada. Comprueba que no haya una regla de CSS personalizado a nivel de tienda poniendo la misma propiedad con !important, y que el valor sea válido para esa propiedad (en BigCommerce data-style-max-width="720" no hace nada, 720px sí). En Shopify, los atributos de estilo no se leen.