Tutorials

How to sell your products on a Framer site

Dan Rowden  ·  April 26, 2023

Framer is a web design platform that lets you easily create websites with a drag-and-drop editor.

How it works

Framer has added a Lemon Squeezy button component, which makes it very easy to add product links to your website.

These buttons are very flexible: with Framer's editor you can change the button design and text to match your brand, and choose whether the checkout opens in a hosted page or overlay.

View a live demo to see how it works on a site.

How to add a Lemon Squeezy button to a Framer site

Click on Insert and then Utilities. You will find Lemon Squeezy at the top of the list.

Alternatively you can click Insert and start typing "lemon".

Click the Lemon Squeezy component or drag it into your page.

Now you can customise the button. On the right you'll find a Lemon Squeezy-labelled editing panel.

Grab the checkout URL for your product by clicking "Share" in your Lemon Squeezy dashboard and paste it into the "Link" field.

For styling, you have button-specific options like text, colour, font and padding as well as being able to choose to use a hosted checkout or checkout overlay when the button is clicked.

Previous
Preview checkout total