Añade un generador de pulseras a tu Shopify

Por Camille G. · Actualizado octubre de 2026 · Tiempo de lectura ≈ 7 min

¿Vendes pulseras de piedras preciosas y quieres que tus clientes diseñen las suyas propias, directamente en tu tienda Shopify? Puedes hacerlo sin instalar una aplicación y sin tocar el código de tu tema. Esta guía te muestra cuatro formas de añadir el constructor de pulseras Loch Ness, desde un simple enlace de menú hasta un botón flotante en cada página, paso a paso.

Antes de comenzar

El constructor se mantiene alojado en nuestros servidores y aparece en tu tienda. Siempre obtienes la versión más reciente, sin necesidad de actualizar nada de tu parte. Necesitas dos cosas:

• tu identificador, enviado por Loch Ness cuando tu constructor está configurado (por ejemplo my-shop);
• un Tema Online Store 2.0, que cubre todos los temas recientes de Shopify, incluido Dawn.

Tu nombre, logotipo, colores, menú, precios, moneda y selección de piedras están vinculados a tu identificador. Los cambios desde tu área de cliente se actualizan en todas partes a la vez, sin necesidad de tocar Shopify nuevamente.

¿Cuál opción deberías elegir?

Puedes combinarlas. Muchas tiendas utilizan una página dedicada y añaden un enlace en el menú principal.

Opción 1: un enlace en tu menú o un botón predefinido

Sin ningún marco, el constructor abre la página completa con tus colores. Eso le da el máximo espacio, especialmente en teléfonos.

1. Añádelo al menú. En tu administrador de Shopify, ve a Tienda Online → Navegación, abre tu menú principal y haz clic Añadir elemento de menú.
2. Nombra y pega la dirección. Ponle un nombre, por ejemplo "Diseña tu pulsera", luego pega esta dirección en el campo Enlace:

https://lochness-paris.com/pwa/en/?client=YOUR-IDENTIFIER

Para mostrar un botón en tu página de inicio o en una descripción de producto, utiliza el botón prefabricado desde tu área de cliente. Ya utiliza tus colores.

Opción 2: una página dedicada "Diseña tu pulsera"

1. Crear la página. En tu administrador, ve a Tienda online → Páginas → Añadir página. Asigna un título ("Diseña tu pulsera") y guarda.
2. Crear una plantilla de página. Go to Tienda en línea → Temas → Personalizar. En el menú desplegable en la parte superior del editor, elija Páginas, entonces Crear plantilla. Nómbralo, por ejemplo bracelet-builder.
3. Añade una sección de Liquid personalizada. En esta plantilla, haga clic Añadir sección y elige Custom Liquid.
4. Pega el código. Pega el código siguiente en el campo Liquid personalizado y guarda.
5. Asigna la plantilla. Volver a Tienda Online → Páginas, abre tu página y elige bracelet-builder en el Plantilla campo. Guardar.
6. Añádelo al menú. En Tienda Online → Navegación, añade un elemento de menú que apunte a esta página.

<iframe src="https://lochness-paris.com/pwa/en/?client=YOUR-IDENTIFIER" style="width:100%;height:860px;border:0" loading="lazy" title="Bracelet builder"></iframe>
<p style="margin:6px 0 0;font:12px/1.4 Arial,sans-serif;text-align:center;color:#6b6b6b">Bracelet builder by <a href="https://lochness-paris.com/es" style="color:inherit">Loch Ness&reg;</a></p>

En un ordenador, el constructor muestra dos columnas: la pulsera en un lado, las piedras en el otro. En un teléfono, cambia automáticamente a su diseño móvil.

Opción 3: un botón flotante en cada página

Un pequeño botón redondo aparece en una esquina de tu tienda. Un clic abre el constructor en un panel, sin salir de la página. El constructor solo se carga en el primer clic, por lo que tu tienda se mantiene rápida.

1. Abre el editor de temas. Go to Tienda en línea → Temas → Personalizar.
2. Añade una sección de Liquid personalizado al pie de página. En el Pie de página área del panel izquierdo, haga clic Añadir sección y elige Custom Liquid. Una sección en el pie de página aparece en cada página.
3. Pega el código a continuación y guarda.
4. Enciende el botón. En tu área de cliente, activa el botón flotante y elige su texto y lado (izquierda o derecha). Puedes desactivarlo en cualquier momento, sin tocar Shopify.

<script src="https://lochness-paris.com/pwa/widget.php?client=YOUR-IDENTIFIER&lang=en" async></script>
<p data-ln-credit style="margin:6px 0 0;font:12px/1.4 Arial,sans-serif;text-align:center;color:#6b6b6b">Bracelet builder by <a href="https://lochness-paris.com/es" style="color:inherit">Loch Ness&reg;</a></p>

Si tu tema no permite secciones en el pie de página, pega el mismo código en Tienda en línea → Temas → … → Editar código, en el layout/theme.liquid archivo, justo antes </body>.

Opción 4: un constructor compacto (página de columna o producto)

Esta versión siempre utiliza el diseño móvil, en un marco estrecho. Es adecuada para una barra lateral, una página de producto de pulsera o un bloque "pruébalo" en la página de inicio. Añádelo en un Custom Liquid sección o bloque, como en la opción 2.

<iframe src="https://lochness-paris.com/pwa/en/?client=YOUR-IDENTIFIER&layout=mobile" style="width:420px;max-width:100%;height:780px;border:0;border-radius:16px" loading="lazy" title="Bracelet builder"></iframe>
<p style="margin:6px 0 0;font:12px/1.4 Arial,sans-serif;text-align:center;color:#6b6b6b">Bracelet builder by <a href="https://lochness-paris.com/es" style="color:inherit">Loch Ness&reg;</a></p>

Varios idiomas en tu tienda

El constructor existe en Inglés, francés, español e húngaro (y muchos más bajo solicitud). Para cambiar el idioma, reemplaza /en/ en la dirección con /fr/, /es/ o /hu/, y lang=en con el código correspondiente para el botón flotante. Si tu tienda utiliza Shopify Markets con varios idiomas, añade una sección Custom Liquid por cada versión de idioma, o consúltanos: tu área de cliente proporciona los códigos para cada idioma.

Comprueba que todo funciona

• El constructor muestra tu nombre y colores. Si ves los colores del Loch Ness en su lugar, el identificador en el código probablemente está mal escrito.
• Prueba en tu teléfono, no solo en la vista previa del editor.
• Haz un diseño de prueba y envíalo. Comprueba que la solicitud de pedido llega a la dirección de correo electrónico configurada para tu tienda.
• Para el botón flotanteespera hasta 5 minutos después de activarlo en tu área de cliente: el cambio tarda ese tiempo en aparecer.

Preguntas frecuentes

Fuentes

Shopify — Referencia líquida · Shopify — Grupos de sección (encabezado y pie de página) · MDN Web Docs — El elemento iframe

Escrito por Camille G., fundadora de Loch Ness. Diseñé joyas simbólicas para mi propia marca de 2013 a 2023, y he estado desarrollando aplicaciones web y herramientas a tiempo completo desde entonces. Codifiqué este constructor de pulseras yo mismo. Mi historia · GitHub · ORCID