Cómo ofrecer versiones tanto digitales como físicas del mismo producto en Squarespace

¿Estás intentando vender tanto libros físicos como sus versiones digitales en tu página web de Squarespace, pero te sientes atascado?

Sé perfectamente cómo te sientes: yo me enfrenté al mismo problema al intentar vender mi libro electrónico y mi edición en rústica en la misma ficha de producto.

Al igual que muchos usuarios de Squarespace, enseguida me di cuenta de que la plataforma no permite, de forma nativa, vender variantes digitales junto con productos físicos sin que se genere un lío. Para ofrecer ambas opciones, me vi obligado a saturar mi tienda con anuncios duplicados o a enviar manualmente los archivos digitales tras cada venta. Ninguna de las dos opciones me parecía profesional, escalable ni sostenible.

La «solución alternativa» sugerida, que consistía en crear fichas de producto independientes para cada formato, hacía que mi tienda pareciera desorganizada y abrumaba a mis clientes con demasiadas opciones. Para alguien que gestiona múltiples productos, esto se convirtió rápidamente en una pesadilla administrativa.

Quería encontrar una forma de ofrecer a mis clientes la posibilidad de elegir entre un libro físico y un libro electrónico en una ficha de producto clara y sencilla, sin tener que salir del ecosistema de Squarespace ni pasar horas arreglándolo cada vez que realizaba una venta.

En esta entrada, voy a compartir la solución que he descubierto: una solución alternativa personalizada en JavaScript que personaliza dinámicamente la página de confirmación del pedido. Con este método, tus clientes podrán descargar su libro electrónico inmediatamente después de la compra, mientras que tu tienda seguirá estando organizada, será fácil de usar y mantendrá un aspecto profesional.

Página de pedido de la versión en formato electrónico

Página de pedido de la variante física

Configuración de variantes para productos digitales y físicos en Squarespace

La clave para mantener tu tienda organizada y, al mismo tiempo, ofrecer versiones tanto digitales como físicas del mismo producto es utilizar variantes. Las variantes te permiten ofrecer diferentes opciones —como «libro electrónico» y «libro en rústica»— dentro de la misma ficha de producto, lo que crea una experiencia de compra clara y sencilla.

A continuación te explicamos cómo configurar y gestionar las variantes de forma eficaz:

1. Añade variantes a tu producto

• Editar tu producto: Ve al panel de control de Squarespace, ve a «Comercio» > «Inventario» y selecciona el producto que quieras modificar.

• Activar variantes: En la pestaña «Precios y variantes », haz clic en «Añadir variante».

  • Crea una opción llamada Formato (o algo similar) para indicar el tipo de producto.

  • Añade opciones como Libro en rústica y libro electrónico.

• Fijar precios: Asigna precios diferentes a cada variante si es necesario. Por ejemplo, el Libro en rústica podría costar 15 dólares, mientras que el libro electrónico cuesta 7 dólares.

2. Utilizar JavaScript personalizado para gestionar las variantes digitales

Squarespace no ofrece de forma nativa archivos para las variantes de productos digitales, por lo que utilizaremos JavaScript para detectar cuándo el libro electrónico se adquiera una variante y se muestre un enlace de descarga en la página de confirmación del pedido.

A continuación te explicamos cómo implementarlo:

Código a insertar:

1. Ve a «Configuración» > «Avanzado» > «Inyección de código».

2. Desplázate hasta la sección «Página de estado del pedido ».

3. Añade este código JavaScript:

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Search for all spans to find if any contain 'Format: eBook'
    var allSpans = document.querySelectorAll('span');
    var ebookFound = Array.from(allSpans).some(span => span.textContent.includes('Format: eBook'));

    if (ebookFound) {
        // Target the tracking updates section and change the heading
        var trackingSections = document.querySelectorAll('h2');
        var trackingSection = Array.from(trackingSections).find(section => section.textContent.includes('Tracking updates'));

        if (trackingSection) {
            // Update the heading text
            trackingSection.textContent = 'Download Your eBook';

            // Find the parent container that holds the content to be replaced
            var contentContainer = trackingSection.nextElementSibling;
            if (contentContainer) {
                // Replace with a button that matches the Squarespace style
                contentContainer.innerHTML = `<center><button aria-label="Download eBook" width="100%" class="css-12it2aq"><a href="https://www.omariharebin.com/s/The-Corporate-Dropout-A-Memoir.zip" style="color: inherit; text-decoration: none;">Download the eBook here</a></button></center>`;
            }
        }

        // Optionally, hide shipping information
        var shippingInfo = document.querySelector('.shipping-info'); // Adjust this selector based on your actual shipping info container
        if (shippingInfo) {
            shippingInfo.style.display = 'none';
        }
    }
});
</script>

Qué hace el Código:

• Detecta la variante del libro electrónico:

  • El script busca elementos `span` en la página de confirmación del pedido que incluyan el texto «Formato: libro electrónico».

• Personaliza la página de confirmación del pedido:

  • Si se encuentra la versión en formato eBook, el script cambia el título «Seguimiento de actualizaciones» por «Descarga tu eBook».

  • Sustituye el contenido de la sección por un botón de descarga con el mismo estilo que los botones predeterminados de Squarespace.

• Oculta la información de envío:

  • En el caso de las compras digitales, se oculta la información de envío que no es necesaria para ofrecer una experiencia de usuario más sencilla.

3. Comprobación de la configuración

• Realiza compras de prueba tanto de las versiones digitales como de las físicas:

  • Para los libros electrónicos: comprueba que el botón de descarga sustituya a la sección de seguimiento y que funcione correctamente.

  • Para productos físicos: Comprueba que la página de confirmación del pedido no haya sufrido cambios.

• Realiza pruebas en varios dispositivos y navegadores para garantizar la compatibilidad.

4. Mejoras opcionales

• Añade un sistema de seguimiento analítico para medir con qué frecuencia se hace clic en el enlace del libro electrónico.

• Personaliza aún más el botón de descarga mediante CSS para que se adapte mejor a la estética de tu marca.

Conclusión

Al seguir este tutorial, no solo has simplificado tu tienda de Squarespace, sino que también has resuelto un problema que desde hace tiempo afectaba a los propietarios de tiendas que venden productos digitales y físicos. Con solo unos pocos ajustes, tus clientes pueden elegir fácilmente el formato que prefieran y tú puedes automatizar la entrega de archivos digitales, todo ello sin dejar de mantener tu tienda ordenada y con un aspecto profesional.

Personalización avanzada: gestión de múltiples variantes digitales o productos que no son libros electrónicos

Aunque esta guía se centra en la venta de libros electrónicos como variante digital, la misma solución puede adaptarse fácilmente a otros tipos de productos digitales o incluso a múltiples variantes digitales, como licencias o formatos.

Adaptación para productos digitales que no sean libros electrónicos

Si vendes otros productos digitales —como archivos de audio, vídeos o software—, puedes adaptar el script para que detecte tipos de productos específicos y proporcione los enlaces de descarga adecuados. Por ejemplo:

• Archivos de música: Ofrecer ambas cosas MP3 y WAV formatos con enlaces de descarga únicos.

• Licencias: Proporcionar Uso personal y Uso comercial opciones de licencia para el mismo producto.

• Materiales de formación: Permitir a los clientes elegir entre Básico y Avanzado contenido del curso.

Cómo funciona

1. Detectar la variante: Ajusta el código JavaScript para que busque texto específico en la variante del producto (por ejemplo, «Formato: MP3» o «Licencia: Uso personal»).

2. Asigna el enlace de descarga: utiliza lógica condicional o una asignación de variantes a URL para proporcionar el archivo correcto para cada producto digital.

Ejemplo de script

Aquí tienes una versión dinámica del guion que admite múltiples variantes digitales:

<script>document.addEventListener('DOMContentLoaded', function() {
    // Variant-to-URL mapping
    var variantLinks = {
        'Format: MP3': '/s/Your-MP3-File.zip',
        'Format: WAV': '/s/Your-WAV-File.zip',
        'License: Personal Use': '/s/Personal-License.zip',
        'License: Commercial Use': '/s/Commercial-License.zip'
    };

    // Detect the variant
    var allSpans = document.querySelectorAll('span');
    var matchedVariant = Array.from(allSpans).find(span => variantLinks[span.textContent.trim()]);

    if (matchedVariant) {
        var downloadUrl = variantLinks[matchedVariant.textContent.trim()];

        // Update the confirmation page
        var trackingSections = document.querySelectorAll('h2');
        var trackingSection = Array.from(trackingSections).find(section => section.textContent.includes('Tracking updates'));

        if (trackingSection) {
            trackingSection.textContent = 'Download Your File';
            var contentContainer = trackingSection.nextElementSibling;
            if (contentContainer) {
                contentContainer.innerHTML = `<center><button aria-label="Download File" class="css-12it2aq">
                    <a href="${downloadUrl}" style="color: inherit; text-decoration: none;">Download the File Here</a>
                </button></center>`;
            }
        }

        // Optionally hide shipping info
        var shippingInfo = document.querySelector('.shipping-info');
        if (shippingInfo) {
            shippingInfo.style.display = 'none';
        }
    }
});
</script>

Por qué es importante

Este enfoque es escalable y adaptable:

• Funciona con cualquier tipo de producto digital o con múltiples variantes digitales.

• Reduce el trabajo manual al automatizar el envío del archivo correcto para cada compra.

• Hace que la página de confirmación del pedido sea clara y fácil de usar.

Casos de uso

• Productos de audio: Variantes como MP3 y WAV enlace a archivos independientes.

• Licencias digitales: Ofrecer diferentes opciones de licencia (Personal, Comercial) para el mismo activo digital.

• Arte digital o fotos de archivo: Variantes como Resolución web y Alta resolución proporcionar archivos de un tamaño adecuado.

Próximos pasos

Así que, aunque esto resuelve el problema de la página de pago, todavía tenemos que recibir el enlace de descarga del libro electrónico por correo electrónico.

Ahí es donde entran en juego SuperJack y Zapier.