HOW IT WORKS
Your AI, guided by Shopiframe
The skill gives your AI agent practical instructions for building with Shopiframe components already available in your Framer project. It helps the agent follow your design while using your connected Shopify products and storefront features.
STORE EXPERIENCES
What your agent can build
Product pages
Create product detail pages with galleries, variant selection, and add-to-cart interactions.
Product grids
Show synced products in storefront grids and collection-style browsing experiences.
Cart and checkout
Build cart experiences and connect the purchase flow to Shopify checkout.
Markets and localization
Add market switching experiences to support your Shopify market setup.
SET UP YOUR WORKFLOW
Choose your AI workflow
Use the built-in Framer AI workflow or add the skill to a compatible external agent.
FRAMER AI
Add the skill to Framer AI
1. Copy in-app/shopiframe.skill.md from the Shopiframe skills repository.
2. In Framer AI, open /skills, add the skill as shopiframe, and save it for on-demand use.
3. Mention /shopiframe when you ask Framer AI to build or update your storefront.
EXTERNAL AGENTS
Use an external AI agent
Prerequisites: Node.js 22+ and Framer agent tools.
Then ask your agent to use /shopiframe. The skill supports workflows with tools such as Claude Code, Codex, Cursor, and Windsurf.
YOUR FIRST PROMPT
Start with a clear task
Name the page, the components you need, and the behavior you expect. For example:
Using Shopiframe, build a product page for my Framer store with a gallery, variant picker and add to cart that opens the cart drawer.
Make it yours: name the product, describe your visual direction, and specify any interaction details.
BEFORE YOU START
Connect Shopiframe first
QUICK ANSWERS
A few things to know
Can I use the skill with Framer AI and external agents?
Yes. Use the in-app skill file with Framer AI, or install the GitHub skill for a compatible external agent.
Do I need my own Shopify store?
Does the skill set up the Shopiframe plugin?
What can my AI agent build?
Join 4.6k+ others