En Squarespace, añades el aviso de garantía legal a tus páginas de producto con un bloque de código, por ejemplo en la información adicional debajo del producto.
El código para Squarespace
<div data-garantielabel data-darstellung="voll"></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 Squarespace
- Abre el producto
Edita el producto en “Commerce” o en la página de la tienda. - Añade un bloque de código
Añade un bloque de código en la sección de información adicional. - Pega el código
Pega el código del widget, deja desactivado “Display Source” (mostrar fuente) y guarda. - Carga el script de forma central
También puedes cargar una sola vez la línea conwidget.jsmediante la “Code Injection” (inserción de código) de la página de la tienda. El marcador tiene que seguir estando en cada producto.
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 Squarespace
- El JavaScript en bloques de código funciona en los planes Core, Plus y Advanced y en los antiguos Business, Commerce Basic y Commerce Advanced, no en Basic ni Personal.
- Los bloques de código no siempre se ejecutan en la vista previa del editor; revisa la página publicada.
Dónde va el aviso en Squarespace
Squarespace separa las páginas de tienda (store pages), que muestran todos los productos en una cuadrícula, de las páginas de detalles de cada producto (product details pages). El aviso va en la página de detalles del producto. Dónde aparece ahí tu bloque de código depende de la versión de tu sitio:
- Versión 7.1: añades la información adicional como sección de página en la página de detalles del producto. Según Squarespace, se muestra en la parte inferior de la página y ocupa el mismo ancho que el resto del contenido.
- Versión 7.0: en el editor de productos, en “Additional Info”, puedes añadir cualquier bloque, también bloques de código. En la mayoría de las plantillas se muestran justo debajo de las imágenes principales del producto. Galapagos muestra en su lugar un enlace “More Info”, y Supply abre la información adicional en una superposición.
Para un aviso en todas las páginas, usa el pie de página. Según Squarespace, su contenido aparece en todas las páginas de tu sitio. En la versión 7.1, haz clic en “Edit” en cualquier página, pasa el cursor sobre el pie de página y haz clic en “Edit footer”. Añade ahí un bloque de código.
La línea del script puede estar centralizada en el panel Code Injection, en el campo “Footer”. Se inserta entonces antes de la etiqueta de cierre </body> de cada página. El marcador de posición sigue teniendo que estar en un bloque de código de la página.
Variantes e identificador del modelo en Squarespace
Las variantes se añaden en el editor de productos, en la sección “Inventory”. Un producto puede tener hasta seis opciones y 250 combinaciones de variantes. Cada variante tiene su propio SKU, además de su propio precio, stock, peso e imágenes. Las imágenes de la variante se muestran en cuanto el cliente elige la variante en la página de detalles del producto.
La información adicional, en cambio, pertenece al producto. Un bloque de código ahí muestra lo mismo para todas las variantes. Para la etiqueta GARAN esto significa: si tus variantes tienen identificadores del modelo distintos, crea un producto aparte para cada modelo. Cada bloque de código lleva entonces las direcciones de la etiqueta que corresponde.
Errores habituales en Squarespace
- Las páginas de pago (checkout) no admiten código personalizado. Por eso el widget no muestra nada durante el pago.
- El código para una sola página (ajustes de la página → “Advanced”) va en el
<head>de la página. Squarespace desaconseja añadir HTML ahí: desaparece si desactivas la transparencia del encabezado. Pon ahí como mucho la línea del script, nunca el marcador de posición. - El código en una página dentro de un índice puede no mostrarse, y la inyección de código no aparece en las páginas de inicio de un índice.
- Como medida de seguridad, Squarespace a veces no muestra el código insertado mientras tienes la sesión iniciada. Comprueba la página en una ventana privada o haz clic en “Preview in Safe Mode”.
- La carga Ajax puede entrar en conflicto con el código personalizado. Squarespace sugiere desactivar Ajax para comprobarlo.
- Si el código personalizado bloquea el editor, haz clic en “Disable Scripts in Preview” en la parte inferior de tu sitio. Los visitantes siguen viendo el sitio con el código.
Más fuentes
- Ayuda de Squarespace: personalizar partes de tu sitio con inyección de código (en inglés)
- Ayuda de Squarespace: bloques de código (en inglés)
- Ayuda de Squarespace: añadir variantes de producto (en inglés)
- Ayuda de Squarespace: añadir información adicional a los productos de la tienda (en inglés)
- Ayuda de Squarespace: editar el pie de página de tu sitio (en inglés)
- Ayuda de Squarespace: personalizar el diseño de las páginas de tienda y de detalles del producto (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. En Squarespace, la confirmación de pedido se personaliza en los ajustes de Commerce, en los correos a clientes. 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 Squarespace como se muestra arriba.
¿Prefieres tus propios archivos? Sube la versión completa y la anidada a la biblioteca de medios de Squarespace e introduce las direcciones en el código del widget:
<div data-garantielabel data-darstellung="voll"
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
¿Tengo que añadirlo a cada producto?
El marcador, sí, en cada producto. El script en sí se puede cargar de forma central mediante “Code Injection”.
¿Por qué la forma completa?
Es la opción más robusta en Squarespace. Aun así, la insignia y el enlace también funcionan.
¿Qué plan necesito?
Un plan en el que los bloques de código ejecuten JavaScript: Core, Plus o Advanced, o Business o Commerce en los planes antiguos.
¿La información adicional aparece justo debajo del botón de añadir al carrito?
Depende de la versión. En la versión 7.1 se muestra en la parte inferior de la página de detalles del producto, y en la versión 7.0, en la mayoría de las plantillas, justo debajo de las imágenes principales del producto.
¿Por qué no veo mi bloque de código si los visitantes sí lo ven?
Como medida de seguridad, Squarespace a veces no muestra el código insertado mientras tienes la sesión iniciada. Abre la página en una ventana privada o usa “Preview in Safe Mode”.
¿Puedo mostrar el aviso también en el pago?
Con el widget, no. En Squarespace, las páginas de pago no admiten código personalizado.