> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pcnaid.com/llms.txt
> Use this file to discover all available pages before exploring further.

# SwiftPage architecture

> System design, data model, and rendering pipeline for the SwiftPage Shopify app.

# SwiftPage architecture

## System overview

SwiftPage is a Shopify embedded app that builds landing pages with a visual drag-and-drop editor. Page layouts are represented as structured data while merchants edit them, then published to Shopify and rendered as native Liquid, HTML, and CSS by a Theme App Extension. SwiftPage does not inject a global JavaScript bundle into the storefront.

* Merchants use the embedded editor inside Shopify admin.
* Authenticated app requests are tied to the current shop.
* Publishing makes the page content available to Shopify and its theme app block.
* The theme app block renders the published page on the storefront.

## Rendering decision

Pages render through a Liquid app block rather than JS-injected widgets:

* Styles load only where the app block is present.
* Interactive behavior loads only for sections that need it.
* Images and iframes use `loading="lazy"`; the carousel is CSS `scroll-snap`.
* Uninstalling the app removes the app block, leaving no ghost code.

## Content delivery

Publishing copies page content and SEO details to Shopify-native page data. The Theme App Extension reads the published data and retains compatibility with pages published by earlier versions. When required Shopify permissions are missing, the publish action prompts the merchant to reauthorize before it makes changes.

Draft changes remain in the editor until publishing succeeds. The storefront renders the published copy held by Shopify.

## Layout JSON

The layout object drives both the editor and the storefront renderer:

* `global`: `maxWidth`, `fontFamily`, `primaryColor`, `secondaryColor`, `backgroundColor`, `textColor`.
* `sections`: an array of `{ id, type, settings, mobile?, visibility? }`.

There are 16 section types: `hero`, `rich_text`, `image`, `image_with_text`, `product_feature`, `collection_grid`, `countdown`, `testimonials`, `newsletter`, `video`, `spacer`, `divider`, `custom_html`, `cro_widget`, `model_3d`, and `funnel_step`.

## Data model

SwiftPage keeps page content and revision history separate from account and plan state, editor features, collaboration settings, and storefront analytics. The public architecture does not expose physical schema names or operational storage topology.

Authenticated operations are scoped to the verified shop, so pages, settings, and analytics remain isolated per store.

## Security model

| Layer | Mechanism |
| - | - |
| OAuth install | Callback integrity and state verification |
| API requests | Shopify App Bridge session token verified per request |
| Authorization | Protected actions require a verified shop owner or an allowed collaborator role |
| Webhooks | HMAC-SHA256 body signature and payload validation before processing |
| Credential protection | Sensitive credentials are encrypted at rest |
| Data isolation | Authenticated operations are scoped to the verified shop |
| Input validation | Request bodies and style values are validated before use |

## Storefront tracking

The signed Shopify App Proxy receives anonymous page-view and conversion events for the rolling 90-day analytics surface. These identifiers are not joined to Shopify customer identity, and raw events older than 90 days are removed.

See the [quickstart](https://docs.pcnaid.com/nodes/shopify/swiftpage/developer/quickstart.md) for scopes and setup and the [API overview](https://docs.pcnaid.com/nodes/shopify/swiftpage/developer/api/index.md) for endpoints.

[Pcnaid Documentation](https://docs.pcnaid.com/namespace/index.md) › [Shopify Ecosystem](https://docs.pcnaid.com/hubs/shopify-ecosystem/index.md) › [SwiftPage](https://docs.pcnaid.com/nodes/shopify/swiftpage/index.md) › [Developer](https://docs.pcnaid.com/nodes/shopify/swiftpage/developer/index)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.