Part of 100+ video lessons
Short, step-by-step lessons you can rewatch anytime.
Hands-on project
Follow along in the host project and build as you learn.
Certificate path
Counts toward your Framer Fundamentals certificate.
Create a custom Shopify app, copy the Storefront API token, then sync your products into a CMS collection.
Under Storefront API access, tick unauthenticated read products and write checkouts.
That token is what lets Framer read your store.
In Frameship, paste your store URL and token and connect. Products land in a synced collection.
SELL FROM A FRAMER SITE
Run a real store on a site you designed, with Shopify handling checkout.
SYNC PRODUCTS INTO THE CMS
Products, images, prices and tags arrive as CMS items you can design with.
KEEP THE STORE UP TO DATE
Edits made in Shopify need a re-sync before they show up in Framer.
Forms in Framer
Build a form visually, give every field a unique name, and send submissions to email, a Google Sheet or a webhook. No code needed.
Overflow in Framer
Overflow decides what happens when content is bigger than the frame it lives in. Learn the four overflow types and when to use each one.
CURRICULUM
WHAT YOU’LL LEARN IN THIS COURSE
In the Ultimate Framer Masterclass, you’ll master Framer from the ground up. Follow real projects, get expert feedback, and finally design and ship the way you’ve always wanted to.
Connect a test Shopify store to Framer and sync your products. Change a product title in Shopify, then re-sync and check it updates.
1:00:58
PUBLISH CHECKLIST
Custom app created in Shopify
Storefront API scopes set
Token copied
Store connected in Frameship
Products synced into the CMS
Re-sync tested after a product edit
TRY IT OUT
Cesar Rodrigues
Founder, Craate Creative
FREQUENTLY ASKED QUESTIONS
Everything you need to know about this lesson.
Can you build a Shopify store in Framer?
Yes. Shopify keeps doing products, checkout and payments while Framer handles the design. Frameship syncs your products into the Framer CMS so you keep design control.
How do I connect Shopify to Framer?
Create a custom app in Shopify, tick unauthenticated read products and write checkouts under Storefront API access, then paste your store URL and token into Frameship.
Do Shopify product edits update automatically in Framer?
No. Edits made in Shopify need a re-sync before they show up in the Framer CMS collection.
CERTIFICATION
BECOME A CERTIFIED FRAMER MASTER
Earn 3 official certifications that show you don’t just know Framer, but you can
design, build, and execute real pixel-perfect sites.
Rated excellent by 900+ students
4.8
Lifetime access
14-day money-back guarantee
Stream anywhere
