โšก Guided 5-Step Onboarding ยท Works on Every Shopify Plan

Set up Whop Checkout Switch in ~5 Minutes

Keep your Shopify products, shipping zones, discounts, and paid orders in Shopify โ€” while routing checkout payments through Whop.

1

Connect Shopify Store

0:42

Connect your Shopify store so our checkout automatically pulls your real products, live shipping zones, tax rules, and discount codes โ€” and writes completed orders back to Shopify.

๐Ÿ“– How to Create Your Shopify App & Get Token โ€” Step-by-Step Click to Expand / Collapse
  1. 1.1
    Log into your Shopify Admin and click Settings (the gear icon โš™๏ธ at the bottom-left corner).
  2. 1.2
    Click Apps and sales channels → Click Develop apps (top right) → Click Allow custom app development (if prompted) → Click Create an app.
  3. 1.3
    In the App name box, type: and click Create app.
  4. 1.4
    Click Configure Admin API scopes. Use the filter bar to search and tick (enable) these exact scopes (click any badge below to copy it):
    Reads product titles, variant IDs, photos & prices
    Calculates live Shopify shipping rates, taxes, discounts & creates draft orders
    Completes draft orders into Paid Shopify Orders after Whop payment
    Loads your store's shipping zones, rates & allowed countries
    Optional: Multi-currency & international market detection
    Allows 1-click verification & auto-installation of the <head> script into theme.liquid
  5. 1.5
    Click Save (top right) → Go to the API credentials tab → Click Install app → Click Reveal token once and copy the token starting with shpat_... (or copy your Client ID + Client Secret if using the new Shopify Dev Dashboard).
Used for "Return to Cart", store logo links, and footer policy links.
2

Connect Whop Payment Gateway

2:31

Payments are processed directly in your Whop account via Whop Embedded Checkout. For every checkout, our server dynamically creates a one-time Whop plan matching the exact Shopify cart + shipping + tax total.

๐Ÿ“– How to Set Up Whop & What Permissions to Enable โ€” Step-by-Step Click to Expand / Collapse
  1. 2.1
    Go to your Whop Dashboard and select or create your business account.
  2. 2.2
    Look at the URL in your browser address bar: https://whop.com/dashboard/biz_XXXXXXXXXXXX — copy that biz_... ID and paste it into Whop Company ID below.
  3. 2.3
    In the left sidebar, click Developer → API Keys → Click Create API Key (choose Company API Key).
  4. 2.4
    Name the key and enable these permissions/scopes if prompted:
    Dynamically creates one-time checkout plans for the exact Shopify cart amount
    Creates embedded checkout sessions (ch_...) inside the checkout page
    Verifies payment status & runs the 15-minute order reconciliation check
    Automatically creates or reads your checkout product in Whop
    Automatically registers /webhooks/whop for instant order completion
  5. 2.5
    Copy the API Key and paste it below. To also add the webhook manually in Whop Developer → Webhooks, paste this Webhook URL and check event :
    http://localhost:3000/webhooks/whop
If left blank, our server auto-creates a checkout product for you.
3

Choose Checkout Address, Layout & Branding

3:26

Pick one of the three conversion-tested checkout layouts inspired by CheckoutSwitch, match your brand colors, and optionally connect a custom subdomain like checkout.yourstore.com.

Classic 1:1 Shopify

1:1 Shopify native checkout replica with 2-column layout, floating labels & familiar order summary.

Preview Classic ↗
Flow Max High Urgency

Step track header, live reservation timer pill, and verified customer social proof beside the order.

Preview Flow Max ↗
Assured Max Trust-Led

Trust-led receipt-style summary, money-back guarantee badges, and dedicated Whop payment panel.

Preview Assured Max ↗
๐ŸŒ How to Connect a Custom Subdomain (checkout.yourstore.com) Step-by-Step DNS Guide

You can use your default server URL right away with zero DNS changes, OR point a custom subdomain so shoppers see https://checkout.yourstore.com in their browser:

  1. 3.1
    Open your DNS provider (Cloudflare, GoDaddy, Namecheap, or Shopify Domains) and add this CNAME record:
    Type Host / Name Target / Points To TTL
    CNAME checkout your-deployed-server-domain.com Auto / 300s
  2. 3.2
    Type your subdomain (e.g. checkout.yourbrand.com) in the Custom Checkout Subdomain field above and click Save All Changes.
๐Ÿ“Š Ad Pixels & Conversion Tracking (Meta, TikTok, Google Ads, GA4) Optional

Enter your pixel IDs below to automatically fire InitiateCheckout and Purchase events with exact order value and currency:

4

Add .js Script to Shopify Theme <head>

3:52

Add this single line inside the <head> of your Shopify theme's layout/theme.liquid file. Works on all Shopify plans (Basic, Grow, Advanced & Plus).

<script src="http://localhost:3000/cs.js" defer></script>
๐Ÿ“– Exactly How to Add the JS Script to Your Shopify Theme Header Method A & Method B
โšก Method A (1-Click Automatic Install): If you enabled read_themes & write_themes on your Shopify app in Step 1, simply click "โšก 1-Click Auto-Install into theme.liquid" above and we will inject the script right above </head> in your live theme automatically!
๐Ÿ›  Method B (Manual Copy & Paste โ€” Takes 30 Seconds):
  1. 4.1
    In your Shopify Admin, go to Online Store → Themes in the left sidebar.
  2. 4.2
    Next to your current Published Theme, click the โ‹ฏ (three dots) button (next to the "Customize" button) and click Edit code.
  3. 4.3
    In the left file explorer under the Layout folder, click theme.liquid.
  4. 4.4
    Find the opening <head> tag near the top of the file (usually around line 3โ€“10) or the closing </head> tag, and paste the script on a new line:
    <!doctype html> <html lang="{{ request.locale.iso_code }}"> <head> <meta charset="utf-8"> + <script src="http://localhost:3000/cs.js" defer></script> {{ content_for_header }} </head>
  5. 4.5
    Click Save in the top right corner of the Shopify code editor.

โœจ What cs.js does automatically on all Shopify plans:
  • Intercepts clicks on Checkout buttons (Cart Drawer, /cart page, mini-cart) and Buy It Now buttons on product pages.
  • Hides competing accelerated wallet buttons (Shop Pay, etc.) so 100% of checkouts route cleanly through your Whop checkout.
  • Automatically clears the shopper's Shopify cart (?clear_whop_cart=1) after payment completes.
5

Switch On, Test Order & 15-Minute Order Monitor

5:21

See which Whop payments have corresponding Shopify orders. Our background monitor checks Whop payments against Shopify orders every 15 minutes and auto-completes any missing orders.

โœ…
Every payment has an order Checked against Whop & Shopify ยท 15-minute automatic reconciliation active
Paid in Whop
0
Shopify Orders Made
0
Paid, No Order Yet
0
Live Checkout Sessions & Payments ๐Ÿš€ Open Live Test Checkout →
Time Customer Total Shopify Order State Action
No checkout sessions yet. Click "Open Live Test Checkout" above to run a test order!
Copied to clipboard โœ“