No video

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

  • @leandrosilva6414
    @leandrosilva64146 ай бұрын

    Awesome! This Framer tutorials are very handy! Thanks!

  • @framer.university

    @framer.university

    6 ай бұрын

    Happy to hear this. More to come 🫶

  • @daviktran4742
    @daviktran47427 ай бұрын

    Amazing tutorial. Thanks for sharing!

  • @framer.university

    @framer.university

    7 ай бұрын

    Glad you enjoyed it!

  • @raw_pc
    @raw_pc2 ай бұрын

    Great stuff! Exactly what I needed 😀 Thank you for sharing.

  • @framer.university

    @framer.university

    2 ай бұрын

    Glad it was helpful!

  • @ericsonl_
    @ericsonl_7 ай бұрын

    Thanks for this this is what i need to intergrate to my upcoming templates

  • @framer.university

    @framer.university

    7 ай бұрын

    Glad i could help ;)

  • @hypericron
    @hypericron7 ай бұрын

    Awesome tutorial!

  • @framer.university

    @framer.university

    7 ай бұрын

    Thanks a lot :)

  • @MCbyGracjan
    @MCbyGracjan6 ай бұрын

    Super Tutorial ✨

  • @framer.university

    @framer.university

    6 ай бұрын

    Great to hear it ✨

  • @AnthoCMusic
    @AnthoCMusicАй бұрын

    Amazing, thank you ! :)

  • @framer.university

    @framer.university

    Ай бұрын

    Anytime mate 🫶

  • @user-fs7vb2pw3e
    @user-fs7vb2pw3e2 ай бұрын

    Hi! Great video By-the-way.

  • @arafatshuvo667
    @arafatshuvo6677 ай бұрын

    Great video. When your course will launch. I am eagerly waiting.

  • @framer.university

    @framer.university

    7 ай бұрын

    Thanks again:) Multiple courses are coming in 2024. Stay tuned!

  • @XQuad_Insight
    @XQuad_InsightАй бұрын

    Okay, I'm seeing some cool things here... but I've got a new solution for framer integrating to shopify!!

  • @framer.university

    @framer.university

    Ай бұрын

    Show me!

  • @XQuad_Insight

    @XQuad_Insight

    Ай бұрын

    @@framer.university I can't drop the link!

  • @hfromero
    @hfromero6 ай бұрын

    Awesome video! Dude, could you explain how the loader knows when it needs to stop loading?

  • @framer.university

    @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?

  • @user-gb4rv6vi4q
    @user-gb4rv6vi4q6 ай бұрын

    Amaziiiinnng video thanks. Is there a way to create a cart? I would really need this in framer for a client

  • @framer.university

    @framer.university

    6 ай бұрын

    The easiest solution would be to integrate with Shopify. framercommerce.com

  • @user-gb4rv6vi4q
    @user-gb4rv6vi4q6 ай бұрын

    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

    @user-gb4rv6vi4q

    6 ай бұрын

    Many people on framer community need this for clients

  • @framer.university

    @framer.university

    6 ай бұрын

    do you know of any hotel reservation solutions that can be integrated into website builders?

  • @gojhonny8039
    @gojhonny803927 күн бұрын

    Pleace a video about marketeplace

  • @LanguagedesignLearn
    @LanguagedesignLearn2 ай бұрын

    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

    @Hari-gl2pv

    Ай бұрын

    use carousel

  • @merisimamovic965
    @merisimamovic9656 ай бұрын

    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

    @framer.university

    6 ай бұрын

    LS is working on a fix for that.

  • @Tchinweizu
    @Tchinweizu5 ай бұрын

    great tutorial !!! how can one edit the embed components to suite what i want?

  • @framer.university

    @framer.university

    5 ай бұрын

    Thanks! What aspect do u want to edit?

  • @Hari-gl2pv
    @Hari-gl2pvАй бұрын

    how to build e commerce site on framer? how did you created the checkout page? will the checkout page accpet payments?

  • @framer.university

    @framer.university

    Ай бұрын

    This uses an integration with Lemonsqueezy and yes it accepts payments. You can alternatively integrate with Shopify using framercommerce.com.

  • @RahulYadav-yg6zh
    @RahulYadav-yg6zh5 ай бұрын

    Can you create a video on how to make a Shopify website in framer? Please, Is it even possible tho?

  • @framer.university

    @framer.university

    5 ай бұрын

    Yes it is possible you need to use framercommerce.com for it.

  • @BhawinJagad
    @BhawinJagad7 ай бұрын

    What mic you using?

  • @framer.university

    @framer.university

    7 ай бұрын

    Logitech Blue Sona

  • @Rajdeep_Pandey
    @Rajdeep_Pandey5 ай бұрын

    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

    @framer.university

    5 ай бұрын

    What is an eBook website?

  • @marceloferreira1821
    @marceloferreira18213 ай бұрын

    Is it possible to create templates from scratch for Shopify?

  • @framer.university

    @framer.university

    3 ай бұрын

    Yes you can integrate Shopify with Framer with framercommerce.com

  • @glagraphy6533
    @glagraphy65337 ай бұрын

    is there any posibility to make a shopping cart?

  • @framer.university

    @framer.university

    7 ай бұрын

    That would be more complicated with Framer. But you can integrate Shopify with Framer. framercommerce.com

  • @glagraphy6533

    @glagraphy6533

    6 ай бұрын

    @@framer.university too expensive, maybe one day framer will integrate this extension for free?

  • @hanzimir6760
    @hanzimir67606 ай бұрын

    Can I add that to an existing website?

  • @framer.university

    @framer.university

    6 ай бұрын

    Of course! :)

  • @josepdevillaret
    @josepdevillaret2 ай бұрын

    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

    @josepdevillaret

    2 ай бұрын

    with a checkout i mean a dynamic cart that lets you pay multiple items and remove or add units

  • @framer.university

    @framer.university

    2 ай бұрын

    For your case. Framercommerce is the best solution.

  • @thehieunguyen_
    @thehieunguyen_4 ай бұрын

    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

    @framer.university

    4 ай бұрын

    yep. crazy, right? :)

  • @SK-ii9qw
    @SK-ii9qw2 ай бұрын

    we still dont have invuilt checkout for framer. this is just stupid.

  • @framer.university

    @framer.university

    2 ай бұрын

    Which no code website builder has built in checkout?

  • @ChronicleContent
    @ChronicleContent6 ай бұрын

    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

    @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?

  • @user-ye5uw8bq6c
    @user-ye5uw8bq6c6 ай бұрын

    It's breaking the LEMON SQUEEZY URL and it's 404

  • @framer.university

    @framer.university

    6 ай бұрын

    LemonSqueezy is working on a fix.

  • @LIGHT-de1zb
    @LIGHT-de1zb7 ай бұрын

    Can you please make a website tutorial for dentists with great animations and effects

  • @framer.university

    @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

    @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

  • @briantilghmanjr
    @briantilghmanjrАй бұрын

    Hard to follow if you don’t have a mac

  • @framer.university

    @framer.university

    Ай бұрын

    Thanks for the feedback. Why?

  • @tomschimana1009

    @tomschimana1009

    Ай бұрын

    A webapp is a webapp