How to Offer Both Digital and Physical Variants of the Same Product on Squarespace

Are you trying to sell both physical books and their digital versions on your Squarespace site but feeling stuck?

I know exactly how you feel - I faced the same problem trying to sell my ebook and paperback in the same product listing.

Like many Squarespace users, I quickly realized the platform doesn't natively support selling digital variants alongside physical products without creating a mess. To offer both options, I was forced to either clutter my shop with duplicate listings or manually send digital files after every sale. Neither felt professional, scalable, or sustainable.

The suggested "workaround" of creating separate product entries for each format left my shop feeling disorganized and overwhelmed my customers with too many choices. For someone managing multiple products, this quickly became an administrative nightmare.

I wanted a way to offer my customers the choice between a physical book and an eBook in one clean, seamless product listing—without leaving the Squarespace ecosystem or spending hours fixing it every time I made a sale.

In this post, I’ll share the solution I discovered: a custom JavaScript workaround that dynamically customizes the order confirmation page. With this approach, your customers can download their eBook immediately after purchase, while your shop stays organized, user-friendly, and professional.

ebook variant order page

physical variant order page

Setting Up Variants for Digital and Physical Products in Squarespace

The key to keeping your shop organized while offering both digital and physical versions of the same product is using variants. Variants let you provide different options—like “eBook” and “Paperback”—under the same product listing, creating a clean and streamlined shopping experience.

Here’s how to configure and handle variants effectively:

1. Add Variants to Your Product

• Edit Your Product: Go to the Squarespace dashboard, navigate to Commerce > Inventory, and select the product you want to modify.

• Enable Variants: Under the Pricing & Variants tab, click Add Variant.

  • Create an option called Format (or something similar) to represent the type of product.

  • Add options like Paperback and eBook.

• Set Pricing: Assign different prices to each variant if needed. For example, the Paperback might cost $15, while the eBook is $7.

2. Use Custom JavaScript to Handle Digital Variants

Squarespace doesn’t natively deliver files for digital product variants, so we’ll use JavaScript to detect when the eBook variant is purchased and display a download link on the order confirmation page.

Here’s how to implement it:

Code to Inject:

1. Navigate to Settings > Advanced > Code Injection.

2. Scroll to the Order Status Page section.

3. Add this 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>

What the Code Does:

• Detects the eBook Variant:

  • The script searches for spans on the order confirmation page that include the text "Format: eBook."

• Customizes the Order Confirmation Page:

  • If the eBook variant is found, the script updates the heading “Tracking updates” to “Download Your eBook.”

  • It replaces the section content with a download button styled like Squarespace’s default buttons.

• Hides Shipping Information:

  • For digital purchases, unnecessary shipping information is hidden for a cleaner user experience.

3. Testing Your Setup

• Perform test purchases for both digital and physical variants:

  • For eBooks: Verify that the download button replaces the tracking section and functions correctly.

  • For Physical Products: Confirm that the order confirmation page remains unchanged.

• Test across multiple devices and browsers to ensure compatibility.

4. Optional Enhancements

• Add analytics tracking to measure how often the eBook link is clicked.

• Style the download button further using CSS to better match your brand’s aesthetic.

Conclusion

By following this tutorial, you’ve not only simplified your Squarespace shop but also solved a long-standing issue for store owners selling digital and physical products. With just a few tweaks, your customers can easily choose their preferred format, and you can automate digital file delivery—all while keeping your shop neat and professional.

Advanced Customization: Handling Multiple Digital Variants or Non-eBook Products

While this guide focuses on selling eBooks as a digital variant, the same solution can be easily adapted for other types of digital products or even multiple digital variants like licenses or formats.

Adapting for Non-eBook Digital Products

If you’re selling other digital products—like audio files, videos, or software—you can tweak the script to detect specific product types and provide the appropriate download links. For example:

• Music Files: Offer both MP3 and WAV formats with unique download links.

• Licenses: Provide Personal Use and Commercial Use license options for the same product.

• Training Materials: Allow customers to choose between Basic and Advanced course content.

How It Works

1. Detect the Variant: Adjust the JavaScript to look for specific text in the product variant (e.g., "Format: MP3" or "License: Personal Use").

2. Match the Download Link: Use conditional logic or a variant-to-URL mapping to provide the correct file for each digital product.

Example Script

Here’s a dynamic version of the script that supports multiple digital variants:

<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>

Why This Matters

This approach is scalable and adaptable:

• Works for any type of digital product or multiple digital variants.

• Reduces manual effort by automating the delivery of the correct file for each purchase.

• Keeps the order confirmation page clean and user-friendly.

Use Cases

• Audio Products: Variants like MP3 and WAV link to separate files.

• Digital Licenses: Provide different license options (Personal, Commercial) for the same digital asset.

• Digital Art or Stock Photos: Variants like Web Resolution and High Resolution deliver appropriate file sizes.

Next Steps

So while this solves the checkout page problem, we still need to get the ebook download link via email.

That’s where SuperJack + Zapier come in.