Quick summary
Framer's e-commerce integration lets you add product displays, Stripe payment buttons, and store navigation directly inside your Framer project without writing code. Designers can configure product properties like price, description, and SKU, then link pages and publish a fully shoppable site in minutes.
Steps
- Open your Framer project where you'll set up the e-commerce integration.
- Select 'Text' to create a button with clear, action-oriented text to drive conversions.
- Add a Stripe payment button to let customers check out directly from your site.
- Style your product displays to align with your brand's visual identity.
- Preview your changes to see your e-commerce elements in action.
- Connect your product pages by clicking the add icon to create a smooth shopping flow.
- Adjust product properties like price, description, and SKU in the properties panel.
- Build your store navigation by linking category pages and product collections.
- Configure your button to point to your Stripe checkout URL.
- Your Framer store is now connected to e-commerce for processing payments.
