Prerequisites

A Framer project and access to the Shopiframe plugin. The Demo Store needs neither a Shopify account nor a Store Credit.

1. Open the plugin

In Framer, open Menu → Plugins → Browse All, search for Shopiframe, and open it. Select Let’s begin on the welcome screen. You can use a blank project, an existing design, or a Shopiframe template.

2. Choose the Demo Store

Select Demo Store as your onboarding path. Use its sample catalog to learn the workflow rather than entering credentials for a real store. All Shopiframe components are available for testing and configuration.

3. Create and sync the CMS

Create the Shopiframe Products CMS, configure the fields you need, and sync products. Keep Title and Product Data available. Enable Featured Image for cards and optional content fields only when the design uses them.

4. Build a small product experience

Open Components in the plugin and insert a Product Card or product components. Put product-aware components in a CMS Collection List item or product detail page and bind Product Data to the matching CMS field. Bind ordinary titles and images separately.

5. Plan the real-store handoff

When ready, connect your real Shopify store through Store Configuration and sync the CMS once. The documentation says the design stays intact, but review every binding and product link against the replacement catalog before launch.

Check your work

Preview more than one sample product. Make sure card text and images change by item, and that price and variant components receive Product Data rather than showing a built-in sample.

Troubleshooting

If components show unrelated sample content, inspect Product Data bindings, including nested component properties. If you changed stores, finish the prompted CMS sync before testing again. Demo Store testing is not verification of a real store’s inventory or checkout configuration.

Resources

Get started with Shopiframe