Penni Cart

A Webflow site can hold a full product catalog in Webflow CMS collections, but without Webflow Ecommerce it has no cart, checkout or payment flow. Native checkout needs an Ecommerce Site plan, and the free Starter plan only lets you test Ecommerce features. Teams that already built product pages and Collection List layouts face an upgrade or a rebuild.

Penni Cart layers a cart, checkout and order backend over those same collections. You keep designing product pages, the bag and the checkout in Webflow and connect each element with a pc attribute. Penni Cart doesn't use Webflow Ecommerce's checkout. Payments run through the gateway you connect in Penni Cart (Stripe, Square, Converge or Authorize.net), and Penni Cart also handles shipping rules, discount codes and subscriptions. Orders and customer records live in Penni Cart's dashboard, and its docs don't describe writing them back to Webflow.

This integration suits designers and agencies who build in Webflow and want a branded store with checkout kept on the site. Penni Cart's homepage lists physical products, digital downloads, variants and subscriptions among what you can sell.

How to integrate Penni Cart with Webflow

What is Penni Cart? Penni Cart is a commerce layer for Webflow and custom-coded websites. Your storefront stays in Webflow, while Penni Cart runs the cart, checkout and order management from its own dashboard, which covers products, inventory, orders, customers, shipping zones and discounts.

Penni Cart's tagline for Webflow is "Keep designing in Webflow. Run your commerce in Penni Cart." Its Marketplace listing describes product management inside Webflow CMS, while its current product pages describe a dashboard editor with variant stock and inventory history. Penni Cart's docs don't say whether stock you change in the dashboard is written back to your CMS items, so check both after your first test order.

The Penni Cart-Webflow integration supports four approaches:

• The Penni Cart app installs from the Marketplace, syncs your site and adds Cart, Bag and Checkout pages without writing code.
• Penni Cart attributes let you connect your own Webflow product, bag, cart and checkout elements to the commerce runtime.
• Zapier can pass Webflow form submissions to Penni Cart's coupon action in a Zap you build, though the Zapier integration is in closed beta.
• The Webflow Data API gives you full control over the CMS collections that hold your products, but requires server-side development.

You can combine these methods, depending on how much of the storefront you design from scratch.

Install the Penni Cart app

The Penni Cart app on the Webflow Marketplace is the install path Penni Cart recommends for any site built in Webflow. It connects your Webflow site to Penni Cart's commerce runtime and adds the Cart, Bag and Checkout pages your store needs. You need a Webflow account and a Penni Cart account. If a live store already exists, Penni Cart's Webflow setup guide tells you to work in a staging copy.

To set up the integration:

1. Open the Penni Cart Marketplace listing, click Add to site, select the correct Webflow site and click Authorize app. The Webflow Apps overview also lets you install from the Apps panel inside Webflow. Webflow's Site roles article lets the Site manager and Designer roles install Apps. Workspace roles let Owners, Admins, Marketers, Content editors and Guests install them as well.
2. In Penni Cart, create your account, fill in location, currency and industry, then connect and name your Webflow project. Penni Cart's Quick Connect guide shows "✅ Website Synchronized." when the sync succeeds.
3. Back in Webflow, open the Apps panel, hover over Penni Cart and click Launch. Penni Cart adds the store pages.
4. Create one product with real options and a price, then map it to a product page using the attributes in the next section.
5. Publish to your webflow.io staging domain and test add-to-cart, quantity updates, checkout and a test payment.

Once connected, the app provides the following features.

• Real-time product management within Webflow CMS.
• Cart, Checkout and product page templates, plus unstyled components for Product Page, Cart, Bag and Checkout.
• Subscriptions with intervals in days, weeks, months or years, including trial days and setup fees.
• Shipping classes, discount codes and manually entered tax rates in the Penni Cart dashboard, with carrier rates, labels and tracking through the Shippo integration.

If these steps differ from what the app shows, follow the in-app instructions. Per its listing, the app requests read and write access to assets, CMS data, custom code, pages, forms, site publishing, user accounts and the Ecommerce store, and Penni Cart's docs don't say what it uses the Ecommerce permission for. An app authorized at the Workspace level can access every current and future site, and the only way to remove it from one of those sites is to remove it from the whole Workspace. After revocation, any custom code the app added is removed at the next publish.

Connect storefront elements with Penni Cart attributes

Penni Cart's runtime finds your product fields, forms, bag and checkout through custom attributes that all start with pc. You add them in Webflow through the Custom attributes panel on any element. The Marketplace listing describes this as "No-code customization with straightforward attributes". CMS binding for attribute values works only on Collection pages or inside Collection Lists, so place product elements on a Collection page template or inside a Collection List. Penni Cart's docs say the app or snippet "connects your website to the commerce runtime." It does not replace mapping these elements, defining products or configuring payment and shipping. If you ever paste component markup rather than tagging existing elements, use a Code Embed element. Code Embed needs an active Site plan or a Core, Growth, Agency or Freelancer Workspace.

Map a product page

A product page needs five required attributes before Penni Cart will accept it, and the app validates them for you. The Product Page component doc and Product Page attributes list every value.

To map a product page:

1. In the Penni Cart app, open the Product Page grid and copy each attribute value.
2. In Webflow, select the matching element, open Element settings > Custom attributes, click the plus icon and paste the name and value.
3. Add the required set: product-name, product-price, product-quantity, form and add-btn. Apply pc="form" only to the Form element itself, and use pc="add-btn" on the button that submits it.
4. For variants, use v-item to identify each variant item and tag the fields with v1-name or v2-name, v-price, v-sku, v-stock and v-image.
5. Set pc="tax-type" to Product or Service, then click Validate Attributes and fix any highlighted issues.

Setup is complete when all required components validate. v-stock marks each variant's inventory value on the page.

Design the bag, cart and checkout

The bag, cart and checkout come as unstyled components, so you control layout, type and spacing in Webflow. Navigation needs pc="bag" and pc="bag-count" per the Navigation attributes page, and the bag must be designed and published to Penni Cart's backend first. The Cart attributes page covers the Products List and Order Summary on the auto-created Bag Page, and pc="cart" on the wrapper initializes a cart built from scratch.

To publish bag changes:

1. Launch Penni Cart from the Webflow Apps panel.
2. Click Publish under Bag in Templates or Components.
3. Publish the site in Webflow.

Checkout uses pc="checkout" and three mandatory groups for shipping and billing, payment, and order status, but the Checkout attributes page is still marked Work in Progress. For Stripe and Square, card entry happens in provider-secure fields with their own styling rules, and some payment methods may redirect to the provider.

Connect with Zapier

Penni Cart publishes a Zapier app. Webflow triggers in Zapier, such as New Form Submission, can start a Zap that runs a Penni Cart action. Penni Cart's Zapier docs describe the integration as closed beta and invite only. Email hello@pennicart.io to request access. The public Zapier listing shows seven instant triggers and one action. Penni Cart's docs list four triggers and one action, so confirm what's available when you get beta access. Zapier's directory doesn't list a prebuilt Webflow + Penni Cart template.

Once you have beta access, a Zap can start on Webflow's New Form Submission trigger and run Penni Cart's Create / Update Coupon action, so a newsletter signup receives its own discount code. Penni Cart's docs don't describe a Zap that sends its transaction or subscription triggers into Webflow CMS.

Build with the Webflow Data API

Penni Cart's published docs include no public REST API, API-key scheme or outbound webhook list. Its docs hub says those pages are an orientation and installation checklist rather than the complete API reference. Penni Cart's product pages are built on Webflow CMS collections, so the API you can build against is the Webflow Data API v2. That makes this path a build pattern for developers who want to sync catalog, stock or order records from an external system. It requires a server to hold tokens and handle webhooks.

Webflow's Data API handles CMS collections and form submissions, and Webflow webhooks fire on events such as collection item changes, form submissions and site publishes.

Authentication is a bearer token in the Authorization header, either a site token or an OAuth token with scopes such as cms:read, cms:write and sites:write.

Create and update product items in the CMS

An inventory or ERP system can push products into the collection Penni Cart reads from. Map pc attributes on the Collection page template, then confirm on staging that new items render with them.

To sync products:

1. Create a product with POST https://api.webflow.com/v2/collections/{collection_id}/items/live, which publishes directly. The staged POST /v2/collections/{collection_id}/items needs a follow-up POST /v2/collections/{collection_id}/items/publish.
2. Update price or stock with PATCH /v2/collections/{collection_id}/items/live. Include cmsLocaleId for any locale other than the primary one.
3. Publish the site with POST /v2/sites/{site_id}/publish if needed.
4. If you changed the bag, press Publish under Bag in the Penni Cart app as well.

Penni Cart's docs don't say whether a price or stock change made through the API reaches its dashboard or the checkout total, so run a test purchase on staging and compare the charged amount with the CMS item before relying on it.

Listen for collection changes with Webflow webhooks

A webhook lets your server react when someone edits a product in Webflow, for example to mirror the change to a warehouse system. Webhook creation needs a bearer token from a Data Client App with sites:write.

To register and verify a webhook:

1. Send POST /v2/sites/{site_id}/webhooks with triggerType set to collection_item_changed and your endpoint URL. The all events list also includes collection_item_created and form_submission.
2. On each delivery, read x-webflow-timestamp and x-webflow-signature, compute an HMAC SHA-256 over timestamp + ":" + JSON.stringify(body) with your secret, and compare.
3. Reject requests older than 5 minutes as possible replays.

Site-token webhooks created after April 14, 2025 each have their own secret, while OAuth-created webhooks sign with the app's client secret. Nothing in Penni Cart's docs says its orders raise Webflow's ecomm_new_order event, so plan to read orders from the Penni Cart dashboard or Zapier's New Transaction trigger.

What you can build with the Penni Cart Webflow integration

Each of these builds starts from a Collection page and Penni Cart's attributes.

• Subscription coffee storefront: Offer a one-time bag beside a weekly, biweekly or monthly delivery, the pattern Penni Cart illustrates with sample store data for Hugo Coffee. Renewals run on Stripe or Converge, and Square handles one-time purchases only.
• Digital download shop: Sell digital downloads from a Collection page, with checkout on your Webflow site. Penni Cart's docs don't describe how files reach the buyer after payment, so test that step before launch.
• Shipped products with carrier rates: Show live carrier rates at checkout through Penni Cart's Shippo connection, which also covers labels and tracking.
• Personalized product page: Capture a monogram or engraving request with a pc-custom attribute, which the Product Page attributes describe as capturing a custom product option.

If you only need to sell a few items without a cart, set up Stripe Checkout with payment links instead.