Cloudflare for Ecommerce: Setup Guide for Shopify, WooCommerce, and Custom Stores

Cloudflare is the most-deployed CDN on the web for one reason: the free tier covers what most stores need. Image caching, DDoS protection, SSL, basic firewall, IPv6, HTTP/3 — all free. The paid tiers add image optimization, advanced bot management, and rate limiting.

But ecommerce introduces a problem most static sites don't have: cart and account pages must never be cached. A misconfigured rule can show one customer another customer's cart contents — a class of bug that triggers an immediate "what just happened" Slack message.

This guide covers a proper Cloudflare setup for each major platform.

Pre-flight: Decide What Cloudflare Will Do for You

The minimum useful setup gives you:

• SSL termination at the edge
• Caching of static assets (CSS, JS, images, fonts)
• HTTP/3 support
• DDoS protection
• Hiding your origin server IP

An advanced setup adds:

• Edge caching of HTML for cacheable pages (collection, blog, marketing)
• Image resizing/format conversion (Polish, Mirage, Image Resizing)
• Bot management to block scrapers
• Rate limiting on login and checkout endpoints
• Web Application Firewall (WAF) rules

Step 1: Add Your Domain

Sign up for Cloudflare, add your domain, and update your registrar's nameservers. Allow up to 24 hours for propagation. Cloudflare will scan your existing DNS records — verify all of them are imported correctly, especially:

• MX records (don't break email)
• TXT records (SPF, DKIM, DMARC, domain verification)
• CNAME records for third-party services (Klaviyo, Postmark, etc.)

Step 2: SSL/TLS Configuration

Set encryption mode to Full (Strict) — never Flexible. Flexible decrypts at Cloudflare and connects to your origin over HTTP, which:

• Defeats the point of SSL (a passive observer between Cloudflare and origin can read everything)
• Causes infinite redirect loops if your origin redirects HTTP to HTTPS

Full (Strict) requires a valid certificate on your origin. Most platforms (Shopify, WooCommerce hosts, Vercel) provide one automatically. For self-hosted, use Let's Encrypt or Cloudflare's free Origin CA certificate.

Step 3: Caching Rules — The Make-or-Break Step

Default Cloudflare caches static asset extensions (.css, .js, .jpg, .woff, etc.) but never HTML. For most ecommerce stores, this default is correct — HTML personalization (cart count, account name, recently viewed) makes HTML caching dangerous.

If you do want to cache HTML (advanced)

Use Cache Rules to cache specific URL patterns:

• Cache: /collections/*, /products/*, /blog/*, /pages/*
• Never cache: /cart, /checkout, /account, /login, anything matching customer_* cookies

And configure a cache key bypass for any request with cart cookies, so logged-in users always hit your origin.

For Shopify stores on Cloudflare

Shopify's CDN is already in front of your store. Adding Cloudflare on top requires putting Cloudflare in DNS-only mode (gray cloud) for your storefront subdomain, OR using Cloudflare for just specific subdomains (cdn.example.com for assets, blog.example.com for a separate blog). Most Shopify stores get more value from Cloudflare's email and DNS features than its CDN, since Shopify already handles caching.

For WooCommerce stores

WooCommerce sets woocommerce_cart_hash and woocommerce_items_in_cart cookies. Configure cache rules to bypass cache for any request containing these. The popular Super Page Cache for Cloudflare plugin handles this automatically.

For custom stores (Next.js, Remix, etc.)

Use Cloudflare Cache Rules with Cache-Control header respect enabled. Set explicit Cache-Control on your responses (your framework should handle this) and Cloudflare will obey them. s-maxage applies to Cloudflare; max-age applies to browsers.

Step 4: Page Rules vs Cache Rules

Cloudflare migrated from "Page Rules" to "Cache Rules" + "Configuration Rules" + "Origin Rules." If you're starting fresh, use the new rule types — they're more powerful and the free tier includes more of them. Common patterns:

• Always Use HTTPS: redirect all HTTP requests to HTTPS at the edge (saves origin a roundtrip)
• Cache Bypass on Cookie: bypass cache for requests with cart/session cookies
• Edge Cache TTL: override your origin's Cache-Control for specific paths

Step 5: Speed Optimizations

• Brotli compression: Enable. ~20% smaller than gzip for most assets.
• Auto Minify: Skip if your build process already minifies. Cloudflare's minifier can break inline JavaScript.
• Rocket Loader: Defers JS loading. Test thoroughly — it's known to break scripts that depend on DOM ready timing.
• Polish (Pro+): Lossless or lossy image compression at the edge. Easy win for image-heavy stores.
• Mirage (Pro+): Lazy-loads images and serves lower-resolution versions to slow connections.
• Early Hints: Sends preload hints before the full HTML response. Improves Core Web Vitals.
• HTTP/3 with QUIC: Enable. Faster connection setup, especially on mobile networks.

Step 6: Security Settings

• Security Level: Medium for most stores. High triggers more CAPTCHAs and may annoy legitimate users.
• Bot Fight Mode: Enable on free; upgrade to Bot Management on Pro+ for granular control.
• Browser Integrity Check: On. Blocks requests with no/malformed user agents.
• WAF Managed Rules: Free tier includes the OWASP rules. Enable, monitor false positives for a week, then move from "Log" to "Block."
• Rate Limiting: Set rules on /login, /checkout, /api/* — anything that's a credential-stuffing or brute-force target.

Step 7: Verify Everything Works

After Cloudflare is live:

1. Add a product to cart, navigate around, verify cart persists across pages
2. Log in, check that account info displays correctly
3. Complete a test checkout
4. Verify your sitemap.xml and robots.txt are accessible
5. Check Google Search Console for any new crawl errors over the next week
6. Run a StoreVitals scan to verify security headers are still being delivered correctly through Cloudflare

Common Cloudflare-Caused Issues

• Logged-in users seeing other users' carts — caching rules ignored cart cookies
• Webhook deliveries blocked — Cloudflare's WAF flagged Stripe/Klaviyo as suspicious. Allowlist their IP ranges.
• Search Console showing 403s — security level too aggressive, blocking Googlebot. Allowlist Googlebot in the WAF.
• Email stopped working — orange-cloud proxy enabled on the MX or A record used by email. Set DNS-only mode for email-related records.

Done correctly, Cloudflare reduces origin load by 60-80% and improves Core Web Vitals scores meaningfully. Done incorrectly, it's a 2am incident waiting to happen. Test in staging first, monitor for the first week, and you'll be fine.