# Framer E-commerce Integration

> To integrate e-commerce in Framer, open your project, add a conversion button and Stripe payment button, style product displays, preview changes, connect product pages, adjust product properties, build store navigation, configure the Stripe checkout URL, and complete your store connection for payment processing.

Canonical: https://livedemo.ai/tutorials/framer-ecommerce-integration/
Apps: Framer
Updated: 2026-10-05
Interactive demo: https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ff3f7dd0e157abed91e9/preview?step=1

## Steps

1. Open your Framer project where you'll set up the ecommerce integration.
2. Select 'Text' to create a button with clear, action-oriented text to drive conversions.
3. Add a Stripe payment button to let customers check out directly from your site.
4. Style your product displays to align with your brand's visual identity.
5. Preview your changes to see your ecommerce elements in action.
6. Connect your product pages by clicking the add icon to create a smooth shopping flow.
7. Adjust product properties like price, description, and SKU in the properties panel.
8. Build your store navigation by linking category pages and product collections.
9. Configure your button to point to your Stripe checkout URL.
10. Your Framer store is now connected to an e-commerce for processing payments.