Framer Tutorial: Turn Your Website Into A Digital Store (No-Code)
🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to turn your Framer website into a digital store. I'll show you how to create a "Buy" button and how to trigger a checkout experience to it. After watching this video, you'll be ready to launch an online shop without any code.
Project remix: framer.university/resources/l...
00:00 - Intro
00:18 - Creating a button
02:28 - Adding an overlay to the button
06:40 - Adding an overlay close button
09:10 - Creating a loading animation
14:48 - Making the overlay opening smoother
15:50 - Finished checkout
16:05 - Publishing the website
16:23 - More resources
Follow me on:
X: x.com/learnframer
Instagram: / framer.university
Пікірлер: 67
Awesome! This Framer tutorials are very handy! Thanks!
@framer.university
6 ай бұрын
Happy to hear this. More to come 🫶
Amazing tutorial. Thanks for sharing!
@framer.university
7 ай бұрын
Glad you enjoyed it!
Great stuff! Exactly what I needed 😀 Thank you for sharing.
@framer.university
2 ай бұрын
Glad it was helpful!
Thanks for this this is what i need to intergrate to my upcoming templates
@framer.university
7 ай бұрын
Glad i could help ;)
Awesome tutorial!
@framer.university
7 ай бұрын
Thanks a lot :)
Super Tutorial ✨
@framer.university
6 ай бұрын
Great to hear it ✨
Amazing, thank you ! :)
@framer.university
Ай бұрын
Anytime mate 🫶
Hi! Great video By-the-way.
Great video. When your course will launch. I am eagerly waiting.
@framer.university
7 ай бұрын
Thanks again:) Multiple courses are coming in 2024. Stay tuned!
Okay, I'm seeing some cool things here... but I've got a new solution for framer integrating to shopify!!
@framer.university
Ай бұрын
Show me!
@XQuad_Insight
Ай бұрын
@@framer.university I can't drop the link!
Awesome video! Dude, could you explain how the loader knows when it needs to stop loading?
@framer.university
6 ай бұрын
It doesn’t know when to stop. You place it below the embed, so when the embed loads, it hides the loading animation. Makes sense?
Amaziiiinnng video thanks. Is there a way to create a cart? I would really need this in framer for a client
@framer.university
6 ай бұрын
The easiest solution would be to integrate with Shopify. framercommerce.com
Man it would be game changer if you could make a video on a hotel reservation tool system integrated in a framer website!
@user-gb4rv6vi4q
6 ай бұрын
Many people on framer community need this for clients
@framer.university
6 ай бұрын
do you know of any hotel reservation solutions that can be integrated into website builders?
Pleace a video about marketeplace
thanks, its great, can u shpw us how to make product image viewing, i mean if the product has more than one image, how can we show them one by one as in ecommerce websites
@Hari-gl2pv
Ай бұрын
use carousel
Great content! I tried to implement Lemon Squeezy overlay for a shop I’m working on, but decided to go with the direct link for checkout. Unfortunately, overlaying LS didn’t work on Safari, embed link gave me an error.
@framer.university
6 ай бұрын
LS is working on a fix for that.
great tutorial !!! how can one edit the embed components to suite what i want?
@framer.university
5 ай бұрын
Thanks! What aspect do u want to edit?
how to build e commerce site on framer? how did you created the checkout page? will the checkout page accpet payments?
@framer.university
Ай бұрын
This uses an integration with Lemonsqueezy and yes it accepts payments. You can alternatively integrate with Shopify using framercommerce.com.
Can you create a video on how to make a Shopify website in framer? Please, Is it even possible tho?
@framer.university
5 ай бұрын
Yes it is possible you need to use framercommerce.com for it.
What mic you using?
@framer.university
7 ай бұрын
Logitech Blue Sona
Can you make E-Book website with great animations with payment method system, in detail. Because i am creating a E-Book website with framer but i am newbie. This is why I'm getting lots of trouble.
@framer.university
5 ай бұрын
What is an eBook website?
Is it possible to create templates from scratch for Shopify?
@framer.university
3 ай бұрын
Yes you can integrate Shopify with Framer with framercommerce.com
is there any posibility to make a shopping cart?
@framer.university
7 ай бұрын
That would be more complicated with Framer. But you can integrate Shopify with Framer. framercommerce.com
@glagraphy6533
6 ай бұрын
@@framer.university too expensive, maybe one day framer will integrate this extension for free?
Can I add that to an existing website?
@framer.university
6 ай бұрын
Of course! :)
Nandi, I need to create a checkout that connects the native cms with an api like stripe and I'm just realizing how hard for me that is... 🤣 Do you have any recommendations than rather just buy the framercommerce templates with the components pre made?
@josepdevillaret
2 ай бұрын
with a checkout i mean a dynamic cart that lets you pay multiple items and remove or add units
@framer.university
2 ай бұрын
For your case. Framercommerce is the best solution.
excuse me, lemon squeeze really provides embed code that literally support us with manage all the check-out and information of our clients?
@framer.university
4 ай бұрын
yep. crazy, right? :)
we still dont have invuilt checkout for framer. this is just stupid.
@framer.university
2 ай бұрын
Which no code website builder has built in checkout?
not sure I like this. It seems like a custom thing and not a global way that everybody uses in real life. In all programming and web dev tutorials you see that the button redirects to another page for the checkout or something like this.
@framer.university
6 ай бұрын
This is almost the same thing as redirecting people to a checkout page. But you instead embed it on your website in a neat way so it feels like a more integrated experience. Makes sense?
It's breaking the LEMON SQUEEZY URL and it's 404
@framer.university
6 ай бұрын
LemonSqueezy is working on a fix.
Can you please make a website tutorial for dentists with great animations and effects
@framer.university
7 ай бұрын
Is it okay if I record a video about animations and effects generally? Or in what way can I tailor it to dentists?
@LIGHT-de1zb
7 ай бұрын
@@framer.universityI appreciate your willingness to create a video on animations and effects. It would be fantastic if you could tailor it specifically for dentists by incorporating examples related to dental websites. This way, viewers can learn how to implement engaging animations in a context that's relevant to their profession. Thank you for considering this customization
Hard to follow if you don’t have a mac
@framer.university
Ай бұрын
Thanks for the feedback. Why?
@tomschimana1009
Ай бұрын
A webapp is a webapp