App compatibility

Shopify Apps extend stores in ways themes alone can’t — payment gateways, reviews, advanced search, translation, analytics, marketing automation. Hyprism is built to work well with the most popular apps in each category.

This chapter covers integrations with the specific apps Hyprism has been tested against, plus general patterns for any app that uses app blocks or theme app extensions.

16.1 The two app-integration patterns

Pattern	How it works	Examples
App blocks	The app provides a block type that you add to sections via the theme editor (drag-and-drop).	Trust Badges, Subscription, Reviews, Frequently Bought Together
App embeds	The app injects code into the storefront via Shopify’s theme-app-extension API, often as a script in `<head>` or `<body>`.	Analytics pixels (Meta, TikTok), cookie banners (Pandectes), customer-support chat (Tidio)

Hyprism’s sections include { "type": "@app" } in their schema’s blocks array, allowing app blocks to be added. The theme also exposes data attributes (e.g., data-product-id, data-collection-handle) that apps query.

16.2 Apps Hyprism has been tested against

These are based on the actual app stack the theme developer uses on their reference store.

StoreSEO (Shopify SEO app) — medium risk

What it does: Adds JSON-LD schemas, meta tags, breadcrumbs.

⚠️ Potential schema duplication. If StoreSEO emits schemas that Hyprism also emits (Organization, Product, BreadcrumbList), you’ll have two copies of each. Google handles duplicates gracefully but it’s wasteful.

Resolution: turn off Hyprism’s schema emission for any schemas StoreSEO covers.

Theme Setting	What to set
Enable schema emission (master)	ON
Enable FAQ schema	Off (StoreSEO covers)
(Other per-schema toggles)	Check StoreSEO docs

Alternatively, ✅ recommended: turn off StoreSEO’s schemas and let Hyprism handle them. Hyprism’s schemas are reviewed against Google Rich Results Test and are correct.

Translate & Adapt (Shopify’s free translation app) — low risk

What it does: Machine-translates store content (products, collections, pages, articles, theme strings).

✅ Works out-of-the-box with Hyprism. Hyprism’s locale architecture is the standard Shopify pattern; Translate & Adapt reads it natively.

No conflicts.

Trusted Shops (trust-badge + review platform) — medium risk

What it does: Adds a Trusted Shops badge to the storefront, collects reviews, surfaces them in product cards.

⚠️ CSS conflicts with glassmorphism. Trusted Shops widgets inject their own CSS with high specificity. On stores using glass surfaces extensively, widgets may render with their own background that breaks the glass aesthetic.

Workaround: place the Trusted Shops badge in a section with transparent_bg = on and glass = off (a regular solid section). Alternatively, custom-CSS override their widget styles (advanced).

What it does: Cookie consent banner, GDPR-compliant.

✅ Works without conflict. Hyprism doesn’t have its own cookie banner, so Pandectes fills that role cleanly.

Order Printer Pro (admin-only) — low risk

What it does: Print order receipts/invoices.

Admin-only — no storefront impact. ✅ Zero conflict.

Shopify Inbox (Messaging) — low risk

What it does: Customer-support chat widget on the storefront.

✅ Works fine. The chat bubble appears in the corner regardless of theme.

Search & Discovery (Shopify’s filter/search app) — HIGH integration, low risk

What it does: Adds advanced filtering and search-suggestion UI to collection and search pages.

✅ Hyprism is designed for Search & Discovery compatibility. Specifically:

sections/collection.liquid uses collection.filters (Shopify’s native filter API that S&D extends)
sections/search.liquid uses /search/suggest.json (the search-suggest endpoint S&D extends)
Both sections emit data-product-grid, data-collection-id, data-product-card attributes
Filter UI is page-reload-based (not AJAX), so S&D’s progressive enhancement works seamlessly

If you’ve never used Search & Discovery, here’s what it adds:

Auto-complete in search (“Type ‘shir’ → suggestions: ‘shirt’”)
Filter recommendations (“Most-popular filters: Size, Color”)
Synonyms and search-rule overrides
Boost specific products in search results

Printful (print-on-demand fulfillment) — low risk

What it does: Inventory/fulfillment integration. Data-level only — adds variants, tracks inventory, fulfills orders.

✅ Zero storefront-impact. Products created via Printful render exactly like any Shopify product.

Collabs (Shopify Collabs creator-affiliate network) — low risk

What it does: Tracks creator-attributed sales via a pixel.

✅ Zero conflict. Pixel-only.

16.3 Apps Hyprism has NOT been tested against

If you use one of these, expect to do some manual integration testing:

PageFly / Flexi Sections / Section Store (page-builder apps) — likely some style conflicts; these apps inject their own section UIs
Tapita SEO — overlaps with Hyprism’s built-in SEO; would need to turn one off
Klaviyo — email-capture forms may need styling work; Klaviyo’s default forms don’t match the theme

16.4 General app-integration patterns

1. App blocks slots in sections

Most content sections include { "type": "@app" } in their schema’s blocks array. This means any app block can be dragged into the section.

Example: dropping a “Reviews” app block into a product page section, between the description and the share-buttons.

If you want to add app blocks to a section that doesn’t have the @app slot, you’d need to edit the section’s Liquid file (developer work).

2. Theme app extensions

Apps that inject <script> tags into <head> or <body> use Shopify’s “Theme App Extensions” system. You enable them in Online Store → Themes → Customize → Theme Settings → App embeds.

Examples:

Cookie banners (Pandectes, Cookiebot, OneTrust)
Analytics pixels (Meta Pixel, TikTok Pixel, Pinterest Tag)
Live chat (Tidio, Intercom)
Customer-support badges

Toggle these on / off per theme without code changes.

3. Section-id AJAX rendering

Hyprism uses /products/{handle}?section_id={id} for Quick View and /recommendations/products?...&section_id={id} for Related Products. Any app that uses the same pattern (e.g., “Frequently Bought Together”) will work fine — the pattern is Shopify-standard.

4. Cart updates

When an app modifies the cart (add discount, change quantity, add line-item-property), Hyprism’s cart drawer / mini-cart should re-render. To do this, the app should:

document.dispatchEvent(new CustomEvent('ne:cart-updated'));

If the app doesn’t dispatch this event, the cart drawer / count badge may not refresh until the page reloads.

For most popular apps (Recharge subscriptions, Bold Subscriptions, gift-wrap apps), this works automatically because they emit Shopify’s standard cart:updated event, which Hyprism listens for and re-broadcasts.

5. Customer data attributes

For analytics / pixel apps that need to track:

Attribute	Where	Value
`data-product-id`	Product card	`{{ product.id }}`
`data-product-handle`	Product card	`{{ product.handle }}`
`data-collection-id`	Collection section	`{{ collection.id }}`
`data-customer-id`	Body	`{{ customer.id }}` (logged-in only)

These are emitted globally — analytics apps can query them for event tracking without modification.

16.5 Theme + app conflict troubleshooting

If you install an app and something breaks visually:

Disable Hyprism’s overlapping feature (e.g., turn off Hyprism’s schema emission if you installed an SEO app).
Test in preview mode (don’t publish yet) — go to Themes → Hyprism → ⋯ → Preview, then enable/disable the app, refresh, observe.
Inspect with browser DevTools — check the Console for JS errors, the Network tab for failed requests.
Disable the app temporarily — narrow down whether the app is the cause.
Contact the app’s support — most app developers have seen these issues before and have specific theme-compatibility fixes.

If Hyprism is the cause (not the app), please reach out via the support channel listed in the theme’s listing page.

Chapter 17 — Customization (Custom CSS, Custom Liquid, Custom Section) — the escape hatches.