◼️ Squarespace UCP Implementation

Why Add UCP to Squarespace?

Squarespace is known for beautiful, design-forward websites. Adding UCP support extends your stunning store to AI shopping agents, allowing ChatGPT, Google AI, and other AI assistants to discover and recommend your products.

• Design Excellence: Your beautiful products deserve AI visibility
• Code Injection: Add custom functionality without compromising design
• Built-in Commerce: Squarespace Commerce integrates seamlessly
• SEO Focus: Already optimized, now AI-optimized too

Implementation Methods

Method 1: External Hosting (Recommended)

Host your UCP profile externally and redirect requests to it.

Upload your UCP JSON file to one of these free services:

Option A: GitHub Gist (Free)

1. Go to gist.github.com
2. Create a new gist with your UCP JSON
3. Click "Raw" to get the direct URL

Option B: JSONBin (Free)

1. Go to jsonbin.io
2. Create an account and paste your JSON
3. Get the public access URL

Option C: Vercel (Free)

# Create a simple project
mkdir ucp-profile && cd ucp-profile
echo '{}' > vercel.json

# Create public/.well-known/ucp file with your JSON
mkdir -p public/.well-known
# Copy your ucp.json content to public/.well-known/ucp

# Deploy
vercel --prod

If you're using Cloudflare or another DNS provider that supports Page Rules or Workers:

Cloudflare Worker Example

addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const url = new URL(request.url)
    
    // Intercept .well-known/ucp requests
    if (url.pathname === '/.well-known/ucp') {
        // Fetch from your hosted profile
        const ucpUrl = 'https://your-profile-host.com/ucp.json'
        const response = await fetch(ucpUrl)
        const json = await response.text()
        
        return new Response(json, {
            headers: {
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*',
                'Cache-Control': 'public, max-age=3600'
            }
        })
    }
    
    // Pass through to Squarespace for all other requests
    return fetch(request)
}

Method 2: Code Injection Page

Create a dedicated page that serves your UCP profile (alternative endpoint).

1. In Squarespace, go to Pages → + → Blank Page
2. Name it "UCP Profile" or similar
3. Set the URL slug to ucp-profile

1. Add a Code Block to the page
2. Set display to HTML
3. Paste your UCP JSON wrapped in a pre tag:

<pre id="ucp-profile" style="display:none;">
{
  "profile_version": "1.0",
  "merchant": {
    "name": "Your Store Name",
    "url": "https://yourstore.com"
  }
}
</pre>

<script>
// Redirect to show raw JSON
const pre = document.getElementById('ucp-profile');
const json = pre.textContent;
document.body.innerHTML = '<pre>' + json + '</pre>';
</script>

1. Go to Pages
2. Drag the UCP Profile page to Not Linked section

Schema.org Markup

Squarespace automatically adds basic Schema.org markup for products. To enhance it, use Code Injection:

1. Go to Settings → Advanced → Code Injection
2. Add structured data in the Header section:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Your Store Name",
  "url": "https://yourstore.com",
  "sameAs": [
    "https://instagram.com/yourstore",
    "https://twitter.com/yourstore"
  ]
}
</script>

Validate Your Implementation

Common Issues & Solutions

🤖 Test with AI Agents

Resources

• Official UCP Specification
• Squarespace Code Injection Guide
• Cloudflare Workers Documentation
• UCP Learning Center