Penni Cart

How to integrate Penni Cart with Webflow

Penni Cart lets you add e-commerce to Webflow sites while keeping complete design control over your checkout flow. Since the checkout stays on your Webflow site rather than redirecting to a third-party domain, you can style it to match your brand exactly. Both methods use Webflow CMS collections to manage your product catalog.

Integrate Penni Cart with Webflow by using the Penni Cart app from the Marketplace, or by embedding templates and components using Code Embed elements when you need more control over specific cart elements.

Use the Webflow Marketplace app

The Penni Cart Marketplace app provides templates and components you can add and customize from within Webflow. Install the app from the Apps panel, authorize the connection, and Penni Cart provides Cart, Checkout, and product page templates for your project.

The app provides templates and tools for the following capabilities:

• Product management through Webflow CMS collections
• Payment processing through Stripe and other supported gateways configured in the dashboard
• Subscription billing for recurring revenue models
• Custom shipping rules based on geography, order value, weight, or product type
• Order management and invoicing tools in the dashboard

Note that subscription implementation documentation is limited. Contact Penni Cart for subscription setup requirements, failed payment handling procedures, dunning logic configuration, and customer portal setup.

During OAuth authorization, the app requests read and write access through Webflow's OAuth system, including permissions to your site data, assets, CMS collections, custom code areas, forms, page data, e-commerce store data, and site activity data.

After installation, configure payment gateways and shipping rules through the Penni Cart dashboard at pennicart.io.

Embed templates and components with custom attributes

For teams that need more control over specific cart elements, Penni Cart provides pre-built templates and components accessible through the app and official documentation. Copy the component code and paste it into a Code Embed element on any page.

When to use each approach:

• Native app alone: Standard product pages and checkout with no manual code required
• Templates and components: Custom mini-cart placement in headers, specialized cart element positioning, or more control over specific functionality

Available templates and components include:

• Product pages with variant selection and add-to-cart functionality
• Shopping cart interfaces showing line items, quantities, and totals
• Checkout flows with payment and shipping information capture
• Mini-cart widgets for persistent cart access across site pages

The Product Page documentation details the attribute system for connecting Webflow elements to Penni Cart functionality. Apply custom attributes to collection items and form elements to configure product data capture. Check the official docs for current attribute names, as these may change.

What you can build

Integrating Penni Cart with Webflow lets you build custom e-commerce stores with complete design control, subscription billing systems, B2B wholesale portals, and branded checkout experiences using Webflow CMS collections.

• Subscription-based product stores: Build recurring revenue businesses selling software licenses, digital content memberships, or physical product subscriptions
• B2B wholesale portals: Create trade-only stores with purchase order capabilities for bulk ordering
• Custom checkout experiences: Design fully branded checkout flows that match your site exactly.
• Digital goods stores: Sell ebooks, courses, templates, or digital downloads.