En Webflow, arrastras un elemento “Code Embed” a la plantilla de la página de producto y pegas el código del widget. Las direcciones de las etiquetas GARAN pueden venir de campos del CMS.
El código para Webflow
<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>Más opciones, como la forma de mostrarlo y el idioma, las ajustas en el generador de código.
Paso a paso en Webflow
- Abre la plantilla de producto
En el Designer, abre la “Products Template” (plantilla de productos) en “Pages” (páginas). - Añade un Code Embed
Arrastra el elemento “Code Embed” desde el panel “Add” (añadir) debajo del botón “Add to Cart” (añadir al carrito). - Pega el código
Pega el código del widget y guarda. - Publica
Publica el sitio. Los scripts insertados no se ejecutan en el propio Designer.
Los nombres de menú entre comillas son los de la interfaz en inglés; entre paréntesis va nuestra traducción.
Lo que conviene saber de Webflow
- Code Embed requiere un plan de pago de Site o de Workspace.
- Si cargas contenido mediante script (como listas con “Load more”), llama después a
window.garantielabelWidget.rendern()para que se dibujen los nuevos marcadores.
Dónde va el aviso en Webflow
Los productos de Webflow Ecommerce son una Collection, igual que en el CMS. La “Products Template” es su página de Collection. Un Code Embed ahí aparece en cada página de producto, y en él puedes insertar campos del producto en el código. También puedes añadir código a un elemento de texto enriquecido: coloca el cursor, abre el menú de inserción con el icono del signo más y haz clic en el botón de código personalizado.
Para un aviso en todas las páginas, convierte tu pie de página en un componente. Webflow cita las barras de navegación y los pies de página como ejemplos típicos. Un Code Embed dentro de ese componente aparece en todos los lugares donde se usa el componente. Los cambios en el componente principal actualizan todas las instancias.
La línea del script también puede estar en un único lugar central: en “Site settings → Custom code”, en la sección “Footer code”. Webflow la añade entonces antes de la etiqueta de cierre </body> de cada página y recomienda este lugar para los scripts, porque la página carga primero su contenido. Para una sola página, “Page settings” tiene una sección “Before </body> tag”. El marcador de posición tiene que estar igualmente en el diseño.
Variantes e identificador del modelo en Webflow Ecommerce
Las variantes se crean a partir de hasta tres conjuntos de opciones por producto, con un máximo de 50 variantes por producto. Webflow trata cada variante como un producto aparte con sus propios campos, entre ellos SKU, precio e imagen. Cada variante cuenta además para el límite de elementos de tu Site plan.
Los campos personalizados, por ejemplo para las direcciones de las etiquetas GARAN, los añades en los ajustes de la Collection Products. Un campo así pertenece al producto. Importante: según Webflow, los embeds dinámicos con campos de Ecommerce no se actualizan según la variante que elige el visitante. Una etiqueta GARAN tomada de un campo del producto es, por tanto, la misma para todas las variantes. Si tus variantes tienen identificadores del modelo distintos, crea un producto aparte para cada modelo. Cada página de producto muestra entonces la etiqueta que le corresponde.
Errores habituales en Webflow
- El elemento Code Embed y el código personalizado en Site settings y Page settings requieren un Workspace Core, Growth, Agency o Freelancer, o un Site plan activo.
- Para un
<script>en un embed, el Designer solo muestra un marcador. El código se ejecuta en la vista previa, pero solo tiene efecto en el sitio en vivo después de publicar. En la vista de lienzo ampliado (expand canvas view), el código personalizado no se ejecuta en absoluto. - No pongas etiquetas
<html>,<head>ni<body>en el código personalizado. Según Webflow, eso rompe el diseño. - Los sitios de Webflow publicados recientemente ya incluyen jQuery 3.5.1. Según Webflow, importar otra versión puede causar conflictos. El widget no necesita jQuery.
- Un Code Embed admite hasta 50.000 caracteres, igual que las secciones de código del head y del footer. El código del widget queda muy por debajo, incluso con direcciones GARAN.
Más fuentes
- Webflow Help: Custom code embed (en inglés)
- Webflow Help: Custom code in head and body tags (en inglés)
- Webflow Help: Use dynamic data in custom code embeds (en inglés)
- Webflow Help: Create product options and variants (en inglés)
- Webflow Help: Ecommerce Collections overview (en inglés)
- Webflow Help: Components overview (en inglés)
Aviso de garantía legal en la confirmación de pedido
Según las directrices de la Comisión, el aviso también debería aparecer en el correo de confirmación. Los correos de pedido de Webflow Ecommerce se personalizan en los ajustes de Ecommerce, en las plantillas de correo. Ahí puedes añadir el gráfico oficial como imagen. Es poco probable que un simple enlace cuente como soporte duradero (TJUE, asunto C-49/11, Content Services); lo más seguro es poner el aviso directamente en el correo como imagen, texto o adjunto. Encontrarás los archivos oficiales en nuestra página de descargas.
¿Garantía del productor? Entonces añade la etiqueta GARAN
Si el productor da gratis una garantía comercial de durabilidad de más de dos años que cubre la totalidad del bien, la etiqueta GARAN también va en la página de producto. Con el generador de etiquetas GARAN la creas en segundos a partir de los años, la marca y el modelo; tus primeras 3 etiquetas son gratis y sin registro. Debajo de cada etiqueta terminada recibes un código para insertar con direcciones de imagen permanentes: no subes nada y lo pegas en Webflow como se muestra arriba.
¿Prefieres tus propios archivos? Sube la versión completa y la anidada a la biblioteca de medios de Webflow e introduce las direcciones en el código del widget:
<div data-garantielabel
data-garan-voll="https://…/GARAN-MX-500.svg"
data-garan-klein="https://…/GARAN-MX-500-anidada.svg"></div>El widget muestra entonces la versión anidada debajo del aviso de garantía legal, y un clic abre la etiqueta GARAN completa.
Preguntas frecuentes
¿Puedo ver el widget en el Designer?
No, Webflow no ejecuta scripts insertados en el Designer. Revisa el sitio publicado.
¿Funciona también sin Webflow Ecommerce?
Sí. El widget funciona en cualquier página con un Code Embed, como una página informativa o el pie de página.
¿Puedo usar campos del CMS?
Sí. En el Code Embed puedes insertar campos del CMS con “Add Field”, por ejemplo las direcciones de las etiquetas GARAN en data-garan-voll y data-garan-klein.
¿Cambia la etiqueta GARAN cuando un visitante elige una variante?
No. Según Webflow, los embeds dinámicos con campos de Ecommerce no se actualizan con la variante elegida. Si las variantes necesitan etiquetas GARAN distintas, crea un producto aparte para cada modelo.
¿Puedo añadir la línea del script una sola vez para todo el sitio?
Sí. En “Site settings → Custom code”, en la sección “Footer code”, se aplica a todas las páginas. El marcador de posición tiene que estar igualmente en el diseño, donde deba aparecer el aviso.
¿Cómo consigo el aviso en todas las páginas?
Convierte tu pie de página en un componente y coloca dentro un Code Embed. Los cambios en el componente principal se aplican entonces a todas las instancias de tu sitio.