The Ultimate Guide: Migrating Shopify URLs to Headless Storefronts

Why Migration is Critical

When you replatform from Shopify Liquid to a headless architecture (like Next.js or Hydrogen), your URL structure almost always changes.

Shopify enforces a rigid structure:

• /products/{handle}
• /collections/{handle}
• /pages/{handle}

But in a custom Next.js app, you might want cleaner, shorter URLs for better SEO and user experience:

• /shop/{handle}
• /c/{handle}
• /{handle}

The SEO Risk

Without a comprehensive 301 Redirect Strategy, launching your new headless site is SEO suicide.

1. 404 Errors: Googlebot will hit dead ends for all your old indexed pages.
2. Link Juice Loss: Backlinks from blogs, social media, and ads will break.
3. Revenue Drop: Users following old bookmarks or email links will bounce immediately.

[!WARNING] A drop in traffic of 40-60% is common for migrations that launch without a redirect map.

Step 1: Exporting Your Legacy URLs

Before you write a single line of code, you need a complete map of your existing site.

Method A: Shopify Admin (Simple)

Go to Products > Export and choose "All products". This gives you a CSV with a Handle column.

Handle,Title,Variant Price
cool-tshirt,Cool T-Shirt,29.99
blue-jeans,Blue Jeans,49.99

Method B: Sitemap Parsing (Thorough)

For a complete list including blogs and pages, parse your sitemap.xml.

# Install a sitemap parser
npm install -g sitemap-to-csv
 
# Fetch and convert
sitemap-to-csv https://your-shopify-store.com/sitemap.xml > urls.csv

Step 2: Designing the Redirect Strategy

You rarely need to map URLs 1-to-1. The power of Regex (Regular Expressions) allows you to handle thousands of SKUs with a single rule.

Scenario A: Simple Prefix Change

Old: https://store.com/products/blue-jeans
New: https://store.com/shop/blue-jeans

UrlEdge Rule:

• Source: ^/products/(.*)$
• Destination: /shop/$1
• Type: 301 (Permanent)

Scenario B: Removing Prefixes (Risky but Clean)

Old: https://store.com/products/blue-jeans
New: https://store.com/blue-jeans

UrlEdge Rule:

• Source: ^/products/(.*)$
• Destination: /$1

[!TIP] Be careful with root-level URLs. Ensure your new router doesn't conflict with /about, /contact, or /cart.

Step 3: Implementation at the Edge

Why handle redirects at the Edge instead of in your Next.js app?

The Latency Problem

If you handle redirects in next.config.js or Middleware, the request has to hit your origin server (Vercel/Node.js), spin up a compute instance, match the rule, and respond.

Configuration

With UrlEdge, you can import your CSV map or define regex rules directly.

{
  "rules": [
    {
      "source": "^/products/(.*)",
      "destination": "/shop/$1",
      "type": 301
    },
    {
      "source": "^/pages/contact-us",
      "destination": "/contact",
      "type": 301
    }
  ]
}

Step 4: Verification

Before flipping the DNS switch, you must verify your rules.

1. Staging Environment: Point a staging domain to UrlEdge and test key URLs.
2. Curl Test:

curl -I https://staging.store.com/products/old-product
 
# Expected Output:
# HTTP/2 301 
# location: /shop/old-product
# x-urledge-rule: regex-product-match

3. Crawl Test: Use Screaming Frog or similar tools to crawl the old URL list against the new environment.

Conclusion

Migrating to headless is a major upgrade for your brand, but it requires surgical precision with URL routing.

By moving your redirect logic to the Edge, you decouple your routing from your frontend code, ensuring:

• Faster redirects for users.
• Cleaner codebases (no 5,000 line redirects.js file).
• Marketing agility (change rules without deploying code).

Ready to migrate? Start your free UrlEdge trial today.