When SEO, support, and development teams talk about Shopify, they often speak in silos. But connecting actionable data with technical implementation shouldnât be complicated. The SearchAtlas Shopify Addâon was built to solve exactly that: unify OTTO Pixel installation, automated SEO diagnostics, and technical visibility into a single, user-friendly interface.
This article is your complete manualâfrom installation and testing to extending, debugging, and monitoring in production. Whether you're a merchant, agency, or developer, youâll find a step-by-step guide here to install, configure, and extract maximum value from this tool.
đ§ŠSearchAtlas Shopify Addâon
đ§ŠSearchAtlas Shopify Addâon
This add-on connects Shopify storefronts to SearchAtlas, allowing you to inject and verify the OTTO Pixel, run diagnostics, sync core SEO data, and (optionally) expose UI blocks for merchants (theme app embeds/app blocks) to toggle functionality on/off without modifying code. Modern Shopify apps should prefer theme app extensions over instructing merchants to edit manually. theme.liquid
.
Who uses it?
Merchants/Site Admins: Install the app, enable the OTTO Pixel, and run diagnostics.
Agencies/SEOs: Verify that OTTO is firing, troubleshoot duplicate pixels, and monitor deployments.
Developers: maintain app code, handle webhooks, build new blocks/endpoints, ensure compatibility.
Key features
One-click pixel injection using Shopifyâs ScriptTag API or theme app embeds.
Automatic diagnostics: detect duplicates, confirm correct load location, and run reâscans.
Theme App Extension support (Online Store 2.0): enable/disable from Customize Theme â App embeds.
Secure OAuth and scoped API access to Shopify resources where needed.
Optional server-side endpoints to store and sync project metadata with SearchAtlas.
Telemetry & logging (pixel fires, detection method, last scan, error codes).
Developer hooks (webhooks, JS events) to extend behavior without forking core.
đGetting Started
đGetting Started
Installation paths (pick one)
1. Public App (preferred for scale)
1. Public App (preferred for scale)
Merchant clicks âInstall appâ from the Shopify App Store (or your app listing).
OAuth flow completes; app injects the pixel either via ScriptTag API or theme app embed (recommended).
2. The OAuth flow completes; the app injects the pixel either via the ScriptTag API or the Custom App (private distribution)
2. The OAuth flow completes; the app injects the pixel either via the ScriptTag API or the Custom App (private distribution)
Create via Shopify Partners â Apps â Create app.
Send the merchant an install link (OAuth still applies).
The feature set is identical; the distribution is restricted.
3. Development / local testing
3. Development / local testing
Use Shopify CLI & the official Shopify Remix app template to scaffold and run locally.
Run
shopify app dev
to create a tunnel, authenticate, test ScriptTags, and app embeds in a dev store.
Dependencies (minimum recommended)
Node.js 18+ (Shopify CLI now targets modern Node versions).
Shopify CLI v3+
Remix or Next.js (Shopify templates exist; Remix is the default from Shopify).
PostgreSQL / MySQL / SQLite for app data (choose per infra)
SearchAtlas API credentials (for pixel validation, diagnostics, quotas, etc.)
Quickstart (developer)
npm create @shopify/app@latest
(choose Remix template).Add the SearchAtlas SDK / client (internal) to talk to our APIs.
Implement theme app extension (preferred) or ScriptTag injector.
Deploy to your hosting (Fly.io, Railway, Vercel, etc.) and register the app URL(s) in the Shopify Partner dashboard.
Test pixel detection end-to-end in a dev store with OTTO Diagnostics.
đď¸Architecture Overview
đď¸Architecture Overview
High-level flow
Merchant installs app â OAuth completes â App stores shop token â
App offers a toggle to Enable OTTO Pixel â
App either (a) creates a ScriptTag or (b) activates an App Embed (theme app extension) â
Pixel loads on every page â
SearchAtlas backend can now detect, validate, and deploy OTTO fixes.
Core components
Core components
Admin App (Remix)
Settings UI, OAuth, diagnostics, log viewer, and uninstall handler.
Theme App Extension (Online Store 2.0)
App embed (recommended): insert a script into
<head>
globallyâzero code edits for merchants.Optional App blocks for per-template control.
ScriptTag API injector (fallback/legacy themes)
Automatically registers a hosted JS file to load on every page.
Diagnostics Engine
Pings SearchAtlas API â runs duplicate detection, CSP/blocked script checks, UUID mismatch checks, etc.
Webhooks
app/uninstalled
(Remove script or mark project inactive)Theme publish/update (re-validate embed state)
Data store
Shop tokens, pixel status, last diagnostic date, scriptTag IDs, and theme extension IDs.
Data flow (simplified)
Data flow (simplified)
Install â we store
shop
,access_token
.Enable Pixel â create ScriptTag OR enable embed â store IDs.
Merchant runs diagnostics â we hit SearchAtlas API â send results back to the UI.
Merchant removes app â webhook â clean up ScriptTags / mark project paused.
đ§Key Modules/Components
đ§Key Modules/Components
Settings Module
Settings Module
Purpose: Admin UI where merchants toggle pixel and view scan status.
Location:
/app/routes/settings.*
(Remix)Key:
SettingsRoute
,saveSettings()
Deps: Shopify Admin API (REST/GraphQL), SearchAtlas API.
Pixel Injector
Pixel Injector
Purpose: Create/Update/Delete ScriptTags or toggle the app embed.
Location:
/app/services/pixel.server.ts
Key:
ensureScriptTag()
,removeScriptTag()
,enableAppEmbed()
,disableAppEmbed()
Deps: Shopify REST:
/admin/api/*/script_tags.json
; Theme App Extensions API.
Diagnostics & Telemetry
Diagnostics & Telemetry
Purpose: Run detection, show âinstalled / duplicate / blockedâ states.
Location:
/app/services/diagnostics.server.ts
Key:
runDiagnostic(shop, url)
,getLastResult(shop)
Deps: SearchAtlas Diagnostics API.
Webhooks
Webhooks
Purpose: Cleanup + sync.
Location:
/app/routes/webhooks.*
Key:
appUninstalledWebhook
,themesPublishWebhook
.
API Client
API Client
Purpose: Thin wrapper around Shopify & SearchAtlas APIs.
Location:
/app/lib/clients/*
Key:
shopifyClient()
,searchAtlasClient()
Deps:
@shopify/shopify-api
.
đŞHooks (Actions, Filters, Events)
đŞHooks (Actions, Filters, Events)
Shopify doesnât use âactions/filtersâ like WordPress. Hereâs what you expose instead:
App â Merchant (UI hooks)
App Embed Settings: toggles inside Theme Editor (Online Store â Themes â Customize â App embeds).
Dynamic configuration from your admin UI (e.g., whitelist domains, UUID override).
App â Developer (events/webhooks)
Webhooks
APP_UNINSTALLED
â clean store data, remove ScriptTags.THEMES_PUBLISH
â re-assert app embed state postâpublish.
Frontend JS events
If you expose a window event (e.g., window.dispatchEvent(new CustomEvent('searchatlas:pixel:loaded', { detail: {...} }))
), document it here so integrators can listen and react.
Example listener:
window.addEventListener('searchatlas:pixel:loaded', (e) => {
console.log('OTTO Pixel loaded with UUID:', e.detail.uuid);
});
đReassert Surface
đReassert Surface
REST endpoints (inside your app)
POST /api/diagnostics/run
Runs the diagnostic for the current shop and returns a structured status:installed: boolean
method: 'script_tag' | 'app_embed'
duplicates: number
errors: []
POST /api/pixel/enable
|POST /api/pixel/disable
Toggle pixel installation method.
Shopify APIs used
ScriptTag API (legacy fallback) to inject JS on every page.
Theme App Extensions API (preferred) to expose app embeds/app blocks.
Not applicable to Shopify:
Shortcodes / WPâCLI â Use Liquid snippets, app blocks, app embeds, or the Admin/API instead.
đ ď¸
Development & Contribution
đ ď¸
Development & Contribution
Local environment
Scaffold with Shopifyâs official Remix template.
Run
shopify app dev
to auto-tunnel your app to a dev store.Env vars:
SHOPIFY_API_KEY
,SHOPIFY_API_SECRET
,SCOPES
,HOST
,SEARCHATLAS_API_KEY
, etc.
Code standards
TypeScript, ESLint (Airbnb or Shopify config), Prettier
Follow PSRâ12 / WP Coding Standards? â Not applicable here; use Shopify/TS standards.
Build tools
Remix + Vite (when applicable), or Remixâs built-in compiler.
npm / yarn / pnpm supported.
Contribution workflow
Branching:
main
(stable),develop
(integration),feature/*
PRs: require code review, CI green, and documentation updates.
Semantic commits recommended (
feat:
,fix:
,chore:
, etc.)
đ§Ź
Testing
đ§Ź
Testing
Types of tests
Unit tests: Pixel injector, diagnostics orchestrator.
Integration tests: OAuth flow, Script Tag creation, and app embed toggling.
E2E: Use Playwright/Cypress in a dev store with CI test shop.
Running tests
npm test
(unit)npm run test:e2e
(Cypress/Playwright)
CI/CD
GitHub Actions (recommended):
Lint â Unit tests â E2E tests â Deploy preview â Manual approval â Production deploy.
đŚExtending the Plugin / App
đŚExtending the Plugin / App
Add a new diagnostic
Create a new rule in
diagnostics.server.ts
(e.g., CSP blocked, UUID mismatch).Add UI surface for merchants to fix it (link or CTA).
Add a new app block
In your theme app extension, create a new block to expose controls for storefront authors.
Add a server endpoint
Use Remix route conventions (
/app/routes/api/*.ts
) + auth guard.
Expose new JS events.
Document event name, payload, and version for integrators.
đ§ŻTroubleshooting
đ§ŻTroubleshooting
Universal issues
Universal issues
Pixel not firing
DevTools â Network â search
sa-dynamic-optimization
.If missing, check if the app embed is disabled or the ScriptTag was deleted.
Duplicate pixels
Diagnose: Look for two or more network calls to the pixel script.
Fix: Choose one installation method (app embed or ScriptTag) and remove the other.
CSP / blocking
Theme or app proxies can block external scripts; whitelist SearchAtlas domains or use Shopifyâs hosted asset.
Theme switch / publish
After publishing a new theme, re-enable the app embed (Shopify turns it off until you re-enable it).
Shopifyâspecific gotchas
Shopifyâspecific gotchas
Online Store 2.0 themes â Use app embeds (Theme App Extensions).
Legacy themes â ScriptTag API fallback.
Uninstall â Ensure webhook cleans up ScriptTags and marks SearchAtlas project inactive.
Debugging tips
Debugging tips
Enable verbose logs in a /debug route (dev only).
Log ScriptTag IDs, app embed state, and last diagnostics run.
Confirm that the UUID in SearchAtlas matches the one being emitted by the pixel.
Merchant FAQ (short, support-friendly)
Merchant FAQ (short, support-friendly)
âWhy do I still see âPixel not installedâ?â â Re-scan in OTTO; clear CDN cache; ensure app embed is ON.
âCan I keep the pixel if I uninstall the app?â â Technically possible via ScriptTag, but unsupported. We remove it for data integrity.
âWhy did it break when I changed themes?â â App embeds must be re-enabled after a theme publish.
đď¸Changelog (template)
đď¸Changelog (template)
1.3.0 â 2025â07â24
Added automatic duplicate detection & remediation wizard.
Migrated default install path to Theme App Embed.
Improved diagnostics latency by 40%.
1.2.2 â 2025â06â10
Fixed uninstall webhook race condition.
Added Playwright E2E suite.
1.0.0 â 2024â12â01
Initial public release.
đ§âđźStakeholder Documentation (NonâTechnical)
đ§âđźStakeholder Documentation (NonâTechnical)
Feature overview (business)
Feature overview (business)
Faster OTTO timeâtoâvalue: one-click pixel setup for Shopify.
Lower support burden: diagnostics + app embeds = fewer âwhere do I paste this code?â tickets.
Safer: no manual theme edits necessary for OS 2.0 themes.
User personas
User personas
SEO agency owner wants a reliable, repeatable install across 100+ shops.
Merchant: wants âclick â install â done.â No code.
Support/Success: needs a consistent troubleshooting path (diagnostic scan, embed state, ScriptTag ID).
Product: tracks adoption, duplicate error rate, and resolution time.
Business logic
Business logic
Licensing: one SearchAtlas project â one Shopify shop.
Billing: handled by Shopify Billing API (subscriptions or usage-based, if applicable).
Integration points: SearchAtlas Pixel/Diagnostics API, Shopify ScriptTag/Theme App Extension APIs.
Business Metrics (examples)
Business Metrics (examples)
Activation Rate: % of installs that successfully enable the pixel within 24h.
Duplicate Pixel Incidents: keep < 3% of installs.
TimeâtoâResolve (TTR) pixel issues: median < 15 min.
Positive CSAT for pixel install tickets: > 90%.
Quality Metrics
Quality Metrics
Bug rate/release: < 1 severe incident/quarter.
Change failure rate: < 5%.
99.9% uptime for diagnostic API.
Median diagnostic API response: < 500ms.
Roadmap (teaser)
Roadmap (teaser)
Autoâmigration ScriptTag â App Embed
Selfâhealing duplicate detection (suggest âclick to cleanâ)
Merchantâside âone step deep freezeâ for OTTO changes on Shopify stores
Realâtime pixel telemetry dashboard
Value Proposition (external)
Value Proposition (external)
âInstall the SearchAtlas Shopify Add-on, flip one toggle, and your OTTO Pixel is live across your entire storefrontâwith built-in diagnostics, duplicate protection, and zero manual theme edits.â
RACI (example)
RACI (example)
Responsible: App engineering team (implementation, fixes)
Accountable: Product Manager â Integrations
Consulted: SEO Operations, Support, Solution Architects
Informed: Sales, Success, Marketing
Key Resources (fill with your real numbers)
Key Resources (fill with your real numbers)
Hosting: Fly.io / AWS / Vercel
DB: Postgres on RDS (prod), SQLite (dev)
Monitoring: New Relic / Datadog
Cost: ~$XX / month infra per 1,000 active shops
Mastering a technical installation isnât just about knowing where to clickâitâs about understanding what happens behind the click. By adopting the SearchAtlas Shopify Addâon, your team gains more than efficiencyâit gains confidence: the confidence that every pixel is installed precisely, every duplication issue is caught before it escalates, and every store maintains its SEO structure without compromising performance or security.
From architecture to webhooks, scripts to stakeholders, you now have a complete blueprint. Use this guide as your checklist, playbook, and navigation map for any Shopify client. Because a correctly installed pixel⌠is the first step to frictionless SEO.