Shopify integrations
Shopiframe uses Framer as a headless storefront while Shopify remains the commerce backend. Use this page to understand which Shopify apps work automatically, set up selling-plan subscriptions, and optionally redirect the native Shopify storefront to Framer.
App compatibility
Compatibility depends on where an app runs and how it adds functionality to Shopify.
Usually compatible
Apps that operate in Shopify Admin, on orders, or through Shopify Checkout without relying on theme code are generally compatible. Examples include:
Inventory, warehouse, and fulfillment apps
Shipping, accounting, tax, fraud, and operational tools
Email or marketing apps triggered by Shopify data
Checkout apps built with supported Shopify Checkout extensions
Checkout apps continue to run on Shopify-hosted checkout, but they do not automatically add UI to the Framer storefront.
Requires an integration
Apps that add theme blocks, Liquid snippets, or storefront widgets do not appear in Framer automatically. Common examples include theme-based:
Reviews and loyalty widgets
Wishlists, bundles, and upsells
Product filters, badges, popups, and search
These apps need a headless API, JavaScript SDK, or embeddable option. Check with the app vendor because some apps support both theme-based and headless integrations.
Subscriptions
Subscription apps can work with Shopiframe when they use Shopify selling plans. Enable Selling plans (Subscription) in Shopiframe and connect the Subscription component to the CMS Product Data.
Check a specific app
Test every critical workflow before launch. For help with a specific app, email support@shopiframe.com with the app name, App Store link, and the storefront feature you need. Do not send private credentials.
Subscriptions and selling plans
Subscription apps can work with Shopiframe when they create standard Shopify selling plans that are available through the Storefront API.
Requirements
Before adding the Subscription component, confirm that:
The Shopify product has an active selling plan.
The subscription app stores the plan as a standard Shopify selling plan.
The Headless storefront token can read selling plans.
The product is available to the Headless storefront.
The Shopiframe Products CMS has been synced after the product was configured.
Set up subscriptions
Configure the subscription product and selling plan in Shopify or the subscription app.
Enable the selling-plan permission for the Headless storefront token.
Open Store Configuration in Shopiframe.
Enable Selling plans (Subscription).
Add the Shopiframe Subscription component to the product page.
Connect its Product Data property to the CMS Product Data field.
Keep Add to Cart in the same product context so it receives the selected selling plan.
Verify the subscription flow
Test the published storefront with a product that offers both one-time purchase and subscription options. Confirm that the selected plan changes correctly, Add to Cart uses that plan, and Shopify Checkout shows the expected subscription details.
If the Subscription component does not appear, recheck the product selling plan, Storefront API permission, Shopiframe setting, product availability, and Product Data connection.
These apps need a headless API, JavaScript SDK, or embeddable option. Check with the app vendor because some apps support both theme-based and headless integrations.
Redirect Shopify to Framer
This step is optional. Use it only after the Framer storefront and Shopify Checkout have been tested and published.
The redirect sends visitors from the native Shopify theme to the Framer website. Shopify continues to host checkout.
Before you add the redirect
Confirm that:
The Framer site is published on its final URL.
Product, cart, market, and checkout flows work on the published site.
Shopify Checkout opens and completes without returning to the native theme.
You understand that the basic redirect below does not preserve product or collection paths.
Add the redirect in Shopify
In Shopify Admin, open Online Store → Themes.
Find the current theme, open the … menu, and select Edit code.
Open
theme.liquidin the Layout folder.Add the following snippet before the closing
</head>tag:
{% if template.name != 'checkout' %}
<script>
window.location.href = "FRAMER_WEBSITE_URL";
</script>
{% endif %}
Replace
FRAMER_WEBSITE_URLwith the complete published Framer URL, includinghttps://. For example:https://www.example.com.Save the theme.
Important: This code redirects every Shopify theme page except checkout. Product, collection, cart, and other native storefront URLs all redirect to the same Framer URL and do not preserve their original paths.
Test the redirect
After saving the theme, verify the behavior in a private browser window:
Open the Shopify storefront homepage and confirm that it redirects to Framer.
Open a Shopify product or collection URL and confirm that it redirects to Framer.
Start checkout from the published Framer storefront and confirm that Shopify Checkout opens without redirecting back to Framer.
If you need to edit or preview the native Shopify theme later, temporarily remove or comment out the snippet, then restore it when you finish.