In today’s fast-paced digital world, every click counts.

When a customer is ready to purchase, the fewer steps they have to take, the better the experience.

Redirecting users to a separate site or link can interrupt the flow, adding friction to the buying process. This is where a purchase modal—a pop-up overlay that allows users to buy directly on the current page—comes into play.

Not only does it streamline the journey from interest to purchase, but it can also boost conversions by keeping users engaged without unnecessary detours. In this article, we’ll dive into how you can create a purchasing modal on your website to offer a smoother, more intuitive buying experience that aligns with user expectations and helps drive sales.

How to retrieve your product link

1. Go to Products in Lemon Squeezy

2. Click share on your product

3. Copy the URL

Creating modals in Framer

There are two options that I'll show today - one uses a custom modal that can be full width and customized to your liking, the other utilizes the native Lemon Squeezy modal in Framer.

Option 1: Custom Lemon Squeezy modal

1. Remix the project in Framer

2. Select the button

3. Go to overlay

4. Select the overlay container

5. Update both URLs with the one copied from Lemon Squeezy

Option 2: Using the native Lemon Squeezy modal in Framer

1. Go the insert menu

2. Type Lemon Squeezy

3. Drag the Lemon Squeezy component into your product

4. Toggle type to overlay

Thanks for following along!

By integrating a purchasing modal on your website, you’re not only simplifying the buying process but also creating a more seamless, user-friendly experience. Keeping customers on your site from product selection to checkout can help reduce friction, improve engagement, and boost conversions.

If you have any questions or need assistance, please find us on the Support page.