54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import { IntegrationGuide } from '@/components/IntegrationGuide'
|
|
import { CodeBlock } from '@/components/CodeBlock'
|
|
import { getIntegration } from '@/lib/integrations'
|
|
import { notFound } from 'next/navigation'
|
|
|
|
export default function ShopifyIntegrationPage() {
|
|
const integration = getIntegration('shopify')
|
|
if (!integration) return notFound()
|
|
|
|
return (
|
|
<IntegrationGuide integration={integration}>
|
|
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
|
|
Add privacy-first analytics to your Shopify store in minutes using the theme editor — no app installation required.
|
|
</p>
|
|
|
|
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
|
|
|
|
<h3>Method 1: Theme Settings (Easiest)</h3>
|
|
<ol>
|
|
<li>In your Shopify admin, go to <strong>Online Store > Themes</strong>.</li>
|
|
<li>Click <strong>Actions > Edit code</strong> on your active theme.</li>
|
|
<li>Open <code>layout/theme.liquid</code>.</li>
|
|
<li>Paste the following snippet just before the closing <code></head></code> tag:</li>
|
|
</ol>
|
|
|
|
<CodeBlock filename="layout/theme.liquid">
|
|
{`<!-- Pulse Analytics -->
|
|
<script
|
|
defer
|
|
data-domain="your-store.myshopify.com"
|
|
src="https://pulse.ciphera.net/script.js"
|
|
></script>`}
|
|
</CodeBlock>
|
|
|
|
<h3>Method 2: Custom Pixels (Shopify Plus)</h3>
|
|
<p>
|
|
If you are on Shopify Plus, you can also use <strong>Customer Events > Custom Pixels</strong> to add the script. Go to <strong>Settings > Customer events</strong> and create a new custom pixel.
|
|
</p>
|
|
|
|
<h3>Important Notes</h3>
|
|
<ul>
|
|
<li>
|
|
<strong>data-domain</strong>: Use your custom domain (e.g., <code>shop.example.com</code>) if you have one, or your <code>.myshopify.com</code> domain.
|
|
</li>
|
|
<li>
|
|
Pulse does not use cookies and is fully GDPR-compliant — no cookie banner changes needed.
|
|
</li>
|
|
</ul>
|
|
</IntegrationGuide>
|
|
)
|
|
}
|