Guide
- How-to
- Tutorial
Guide
- How-to
- Tutorial
Guide
- How-to
- Tutorial
How To Add A Checkout Experience to Your Framer Site
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.
Posted by
Nandi
Table of contents
Step 1: Create a "buy now" button
Let’s kick things off with the cornerstone of any online store: the “Buy Now” button. It’s the first interaction your users will have with your checkout process, so let’s make it look amazing and function perfectly. Don’t worry—it’s simpler than it sounds.
Start with some text:
Hit
Ton your keyboard and type “buy now.” super easy, right?Font: Satoshi
Weight: Bold
Color: White
You want to make it easy for your users to spot!
Wrap it in a frame:
- Select your text, then pressoption + command + enter. boom—instant frame!
- Rename it to something neat likebutton.
Step 1: Create a "buy now" button
Let’s kick things off with the cornerstone of any online store: the “Buy Now” button. It’s the first interaction your users will have with your checkout process, so let’s make it look amazing and function perfectly. Don’t worry—it’s simpler than it sounds.
Start with some text:
Hit
Ton your keyboard and type “buy now.” super easy, right?Font: Satoshi
Weight: Bold
Color: White
You want to make it easy for your users to spot!
Wrap it in a frame:
- Select your text, then pressoption + command + enter. boom—instant frame!
- Rename it to something neat likebutton.
Step 1: Create a "buy now" button
Let’s kick things off with the cornerstone of any online store: the “Buy Now” button. It’s the first interaction your users will have with your checkout process, so let’s make it look amazing and function perfectly. Don’t worry—it’s simpler than it sounds.
Start with some text:
Hit
Ton your keyboard and type “buy now.” super easy, right?Font: Satoshi
Weight: Bold
Color: White
You want to make it easy for your users to spot!
Wrap it in a frame:
- Select your text, then pressoption + command + enter. boom—instant frame!
- Rename it to something neat likebutton.
Creating a "buy now" button.
Creating a "buy now" button.
Creating a "buy now" button.
Style that button up:
- Add padding: 12px top/bottom, 24px left/right.
- Set the background to black and the text to white (classic combo).
- Give it a sweet 12px border radius for some nice rounded corners.Make the text unselectable:
- Go to the styles panel and setuser selecttonone. trust me, it’s better this way.Add some hover magic:
- Turn the button into a component withoption + command + k.
- Create a hover state where the background fades to 60% opacity.
- Oh, and don’t forget the pointer cursor! it’s all in the details ;)
Style that button up:
- Add padding: 12px top/bottom, 24px left/right.
- Set the background to black and the text to white (classic combo).
- Give it a sweet 12px border radius for some nice rounded corners.Make the text unselectable:
- Go to the styles panel and setuser selecttonone. trust me, it’s better this way.Add some hover magic:
- Turn the button into a component withoption + command + k.
- Create a hover state where the background fades to 60% opacity.
- Oh, and don’t forget the pointer cursor! it’s all in the details ;)
Style that button up:
- Add padding: 12px top/bottom, 24px left/right.
- Set the background to black and the text to white (classic combo).
- Give it a sweet 12px border radius for some nice rounded corners.Make the text unselectable:
- Go to the styles panel and setuser selecttonone. trust me, it’s better this way.Add some hover magic:
- Turn the button into a component withoption + command + k.
- Create a hover state where the background fades to 60% opacity.
- Oh, and don’t forget the pointer cursor! it’s all in the details ;)
Hover effect for button.
Hover effect for button.
Hover effect for button.
Now we have the perfect button, let’s build the checkout experience
Step 2: Build the checkout overlay
This is where the magic happens—your customers will seamlessly move from clicking the button to entering their payment details.
Let’s make it smooth, stylish, and functional.
Create the overlay:
- Select your button and slap on a fixed overlay.
- Set the background color to match your vibe (dark mode fans, try#050505—it’s a win).
- Use a highz-indexto make sure it sits on top of everything else.Add some content:
- Inside the overlay, draw a new frame calledcontent.
- Set it to fill the viewport (pin all sides to0). easy!
Now we have the perfect button, let’s build the checkout experience
Step 2: Build the checkout overlay
This is where the magic happens—your customers will seamlessly move from clicking the button to entering their payment details.
Let’s make it smooth, stylish, and functional.
Create the overlay:
- Select your button and slap on a fixed overlay.
- Set the background color to match your vibe (dark mode fans, try#050505—it’s a win).
- Use a highz-indexto make sure it sits on top of everything else.Add some content:
- Inside the overlay, draw a new frame calledcontent.
- Set it to fill the viewport (pin all sides to0). easy!
Now we have the perfect button, let’s build the checkout experience
Step 2: Build the checkout overlay
This is where the magic happens—your customers will seamlessly move from clicking the button to entering their payment details.
Let’s make it smooth, stylish, and functional.
Create the overlay:
- Select your button and slap on a fixed overlay.
- Set the background color to match your vibe (dark mode fans, try#050505—it’s a win).
- Use a highz-indexto make sure it sits on top of everything else.Add some content:
- Inside the overlay, draw a new frame calledcontent.
- Set it to fill the viewport (pin all sides to0). easy!
Adding an overlay to button.
Adding an overlay to button.
Adding an overlay to button.
Embed your checkout:
- In the content frame, add another frame namedembed. Position it like this:
- Left, right, bottom: 0px
- Top: 60px (leave room for a close button).
- Drop in anembedcomponent, paste your checkout link (like lemon squeezy), and make it fit perfectly.
Embed your checkout:
- In the content frame, add another frame namedembed. Position it like this:
- Left, right, bottom: 0px
- Top: 60px (leave room for a close button).
- Drop in anembedcomponent, paste your checkout link (like lemon squeezy), and make it fit perfectly.
Embed your checkout:
- In the content frame, add another frame namedembed. Position it like this:
- Left, right, bottom: 0px
- Top: 60px (leave room for a close button).
- Drop in anembedcomponent, paste your checkout link (like lemon squeezy), and make it fit perfectly.
Embed checkout URL.
Embed checkout URL.
Embed checkout URL.
Step 3: Add a close button
This small but essential detail ensures users can exit the overlay easily without frustration.
Let’s make a top-notch close button that fits right into your design.
Make a top bar:
- Add a 60px-high frame at the top of your overlay. call itclose top bar.
- Match the background color to your overlay for that seamless look.
Pop in a close icon:
- Use the insert menu (i) to grab an “X” icon.
- Center it, size it to 24px, and make it bold and white.
Add a close interaction:
- Wrap the icon in a frame and set it to close the overlay on click.
Step 3: Add a close button
This small but essential detail ensures users can exit the overlay easily without frustration.
Let’s make a top-notch close button that fits right into your design.
Make a top bar:
- Add a 60px-high frame at the top of your overlay. call itclose top bar.
- Match the background color to your overlay for that seamless look.
Pop in a close icon:
- Use the insert menu (i) to grab an “X” icon.
- Center it, size it to 24px, and make it bold and white.
Add a close interaction:
- Wrap the icon in a frame and set it to close the overlay on click.
Step 3: Add a close button
This small but essential detail ensures users can exit the overlay easily without frustration.
Let’s make a top-notch close button that fits right into your design.
Make a top bar:
- Add a 60px-high frame at the top of your overlay. call itclose top bar.
- Match the background color to your overlay for that seamless look.
Pop in a close icon:
- Use the insert menu (i) to grab an “X” icon.
- Center it, size it to 24px, and make it bold and white.
Add a close interaction:
- Wrap the icon in a frame and set it to close the overlay on click.
Adding an overlay close button.
Adding an overlay close button.
Adding an overlay close button.
Step 4: Polish it up with a loading animation
Adding a loading animation can keep users engaged and make your checkout process look and feel professional.
Design the loader:
- Create four lil dots (8px each) and set their opacity to 50%.
- Line them up in a horizontal stack with an 8px gap.Animate it:
- Turn the loader into a component, then make variants where each dot changes size/opacity.
- Set transitions to make them cycle in a smooth loop. So satisfying :)Add it to the overlay:
- Paste your loader into the content frame.
- Use absolute positioning to center it right where it belongs.
Step 4: Polish it up with a loading animation
Adding a loading animation can keep users engaged and make your checkout process look and feel professional.
Design the loader:
- Create four lil dots (8px each) and set their opacity to 50%.
- Line them up in a horizontal stack with an 8px gap.Animate it:
- Turn the loader into a component, then make variants where each dot changes size/opacity.
- Set transitions to make them cycle in a smooth loop. So satisfying :)Add it to the overlay:
- Paste your loader into the content frame.
- Use absolute positioning to center it right where it belongs.
Step 4: Polish it up with a loading animation
Adding a loading animation can keep users engaged and make your checkout process look and feel professional.
Design the loader:
- Create four lil dots (8px each) and set their opacity to 50%.
- Line them up in a horizontal stack with an 8px gap.Animate it:
- Turn the loader into a component, then make variants where each dot changes size/opacity.
- Set transitions to make them cycle in a smooth loop. So satisfying :)Add it to the overlay:
- Paste your loader into the content frame.
- Use absolute positioning to center it right where it belongs.
Creating a loading animation.
Creating a loading animation.
Creating a loading animation.
Step 5: Preview your masterpiece
This is your moment to click around, ensure everything works as planned, and see your hard work come to life.
Click your “buy now” button to test everything.
Does the overlay pop up? does the checkout load? does the close button work? If yes, then pat yourself on the back—you nailed it! :)
And that’s a wrap! see? No code, no sweat. Your Framer site is now a fully functional store.
Step 5: Preview your masterpiece
This is your moment to click around, ensure everything works as planned, and see your hard work come to life.
Click your “buy now” button to test everything.
Does the overlay pop up? does the checkout load? does the close button work? If yes, then pat yourself on the back—you nailed it! :)
And that’s a wrap! see? No code, no sweat. Your Framer site is now a fully functional store.
Step 5: Preview your masterpiece
This is your moment to click around, ensure everything works as planned, and see your hard work come to life.
Click your “buy now” button to test everything.
Does the overlay pop up? does the checkout load? does the close button work? If yes, then pat yourself on the back—you nailed it! :)
And that’s a wrap! see? No code, no sweat. Your Framer site is now a fully functional store.
