# Shopify Integration · Step-by-Step From "I have nothing" to "live products checking out on petvity.com" in ~90 minutes. --- ## What you'll have at the end - A real Shopify store with PETVITY products - Buy Buttons on the website that push to Shopify Checkout - Cart, payment, shipping, taxes, inventory — all handled by Shopify - No backend code needed on the static site --- ## Step 1 · Create your Shopify store (10 min) 1. Go to 2. Sign up with `manuel@petvity.com`. Free 3-day trial, then **CHF 27/mo (Basic)** or CHF 79/mo (Shopify) — the Basic plan is enough for the start 3. Choose store name: `petvity` (your store URL becomes `petvity.myshopify.com`) 4. Set country: **Switzerland** · currency: **CHF** 5. Skip the setup wizard for now (we'll come back) > **Tip:** Buy your custom domain inside Shopify (`petvity.com`) so checkout matches your brand. Costs ~CHF 15/yr. Or connect an existing domain. --- ## Step 2 · Add your first products (20 min) In Shopify Admin → **Products** → **Add product**: For each PETVITY product, fill: | Field | Example | |---|---| | Title | `Longevity Joint Complex` | | Description | (use copy from `shop.html` or product agent .md file) | | Media | Upload product image(s), 1500×1500 PNG ideal | | Pricing | `CHF 39` | | Inventory · SKU | `PV-VOY-001` | | Inventory · Track quantity | ✓ | | Shipping · Weight | e.g. `0.3 kg` | | Variants | Size or flavor if applicable | | **Tags** | `longevity`, `joint`, `supplement`, `dog` | | **Collections** | "Petvity Voyage", "Mobility" | **Required minimum products** to launch: 1. Petvity Box · Small (CHF 99) 2. Petvity Box · Large (CHF 249) 3. Longevity Joint Complex (CHF 39) 4. Hydrogen Water Bowl (CHF 189) 5. Calming Herbal Blend (CHF 28) 6. Epigenetic Age Test (CHF 149) 7. PEMF Wellness Mat (CHF 389) 8. Cognitive Vitality (CHF 45) 9. Gut Microbiome Analysis (CHF 129) After saving each product, copy its **Product ID** (visible in URL: `/admin/products/` — that's the ID we need). --- ## Step 3 · Enable Storefront API (5 min) Storefront API is what lets the website talk to Shopify without showing the admin. 1. Shopify Admin → **Settings** → **Apps and sales channels** → **Develop apps for your store** 2. Click **Allow custom app development** (one-time) 3. Click **Create an app** · name it `Petvity Web` 4. Under **Storefront API access**, click **Configure** and enable these scopes: - `unauthenticated_read_product_listings` - `unauthenticated_read_product_inventory` - `unauthenticated_write_checkouts` - `unauthenticated_read_checkouts` 5. Click **Install app** 6. Copy the **Storefront API access token** — looks like `shpat_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx` --- ## Step 4 · Plug into the website (5 min) Open `assets/main.js` in any text editor. Find the top of the file: ```js const SHOPIFY_CONFIG = { domain: 'petvity.myshopify.com', // ← your store URL storefrontAccessToken: 'YOUR_TOKEN_HERE', // ← paste your token products: { 'HARMONY_BOX': '0000000001', // ← Shopify Product IDs (numeric) 'JOINT_COMPLEX': '0000000002', 'H2_BOWL': '0000000003', 'CALM_BLEND': '0000000004', 'DNA_KIT': '0000000005', 'PEMF_MAT': '0000000006', }, }; ``` Replace: - `domain` with your actual `*.myshopify.com` URL - `storefrontAccessToken` with the token from Step 3 - Each product ID with the numeric ID from Step 2 **Save the file.** Done. The Buy buttons on `shop.html` and `index.html` will now create real Shopify checkouts. --- ## Step 5 · Test the flow (5 min) 1. Refresh the website (force-reload: ⌘⇧R) 2. Click any **Add to Cart** button 3. Should redirect to a Shopify Checkout page with that product 4. Use Shopify's test card to test: `4242 4242 4242 4242` / any future expiry / any CVC 5. Confirm the order shows up in Shopify Admin → **Orders** --- ## Step 6 · Configure payments & shipping (15 min) Shopify Admin → **Settings**: ### Payments - **Shopify Payments** (recommended) — supports cards, Apple Pay, Google Pay - Add **TWINT** (Swiss customers love it) - Add **PayPal** - Add **HeyLight BNPL** for installment payments (CH market — Petvity-relevant) ### Shipping - **Switzerland**: CHF 7 flat or free over CHF 50 - **EU**: CHF 12 flat or free over CHF 100 - **Other**: CHF 25 ### Taxes - Switzerland: 7.7% VAT included in price (Brutto-Preis) - Enable EU OSS for cross-border EU sales --- ## Step 7 · Connect your domain (15 min · optional but recommended) 1. Buy `petvity.com` if you don't have it (Shopify domains: ~CHF 15/yr) 2. Shopify Admin → **Settings** → **Domains** → **Add domain** 3. If hosted on Netlify: point your domain's DNS at Netlify, set `shop.petvity.com` to point at Shopify 4. Customers see one brand, one experience --- ## What's already wired in the code ✅ `assets/main.js` — Shopify Buy SDK auto-loads when token is set ✅ `shop.html` and `index.html` — every "Add to Cart" button has `data-product-id` attribute ✅ Hidden div `#shopify-product-component` is where the buy widget renders ✅ Falls back to demo-alert if token isn't set --- ## Member-only pricing (for later) To give Plus/Premium members up to 50% off: **Option A · Shopify Discount Codes** (easiest) - Create discount codes in Shopify (e.g. `PLUS40`, `PREMIUM50`) - Distribute via your email/CRM after subscription - Customers paste at checkout **Option B · Customer Tags + Automatic Discounts** (smarter) - Sync member status from your auth system to Shopify customer tags - Use **Shopify Functions** (or Apps like Bold) to auto-apply discount based on tag - Requires a backend later For launch: stick with **Option A**. --- ## Subscriptions (for Petvity Box quarterly) Shopify subscriptions need an app: - **Recharge** (most popular, ~$30/mo + 1% transaction) - **Shopify Subscriptions** (free, simpler) - **Bold Subscriptions** (mid-tier features) For Petvity Box: enable on the product (Shopify Subscriptions app), set to "every 3 months", customer chooses one-time vs subscribe. --- ## Inventory · operations - Connect to **Shopify Inventory** for warehouse tracking - Use **Shopify POS** if you sell at events (Zürich · Monaco salons) - **Order printer**: print packing slips from admin --- ## Troubleshooting **Buy button shows "Demo mode" alert:** token still set to `YOUR_TOKEN_HERE`. Re-check Step 4. **Checkout opens but is empty:** product ID wrong or product unpublished. In Shopify, ensure product status is **Active** and visible in **Online Store** sales channel. **CORS error in console:** make sure `domain` ends in `.myshopify.com` (not your custom domain). **Need help?** Email with the error from browser console (⌘⌥I → Console tab). --- *Last updated: 9 May 2026*