Skip to content
Meet Penni Cart. All the work around ecommerce, beautifully connected.Learn more
Practical ecommerce guides

Add ecommerce to a static website

Keep your existing HTML, CSS and hosting. Connect commerce with a small install snippet and a deliberately tested shopping journey.

WEBFLOW · ONE CLICK
♡ 248Install App ↗
CUSTOM CODE · COPY & PASTE
Claude
Connect my website to Penni Cart.
Add a cart and custom checkout.
Run ↗
✓
Just like that. Connected.Your website is ready for commerce.
✦
Illustrative product preview. Sample store data.
01

Add the loader

Put this in the head of your plain HTML document. Replace the store identifier.

CODE EXAMPLE
<script src="https://embed.pennicart.io/v1/loader.js?store=YOUR_STORE_ID"></script>
02

Map the shopping elements

Use the documented Penni Cart attributes for products, cart and checkout.

03

Test the published site

Verify the real domain and a complete supported test order before accepting payments.

Keep the site and add a commerce layer

A static website can present a catalog without becoming a separate hosted storefront. Penni Cart adds commerce behavior to the website you already have. Your existing hosting still serves the pages, while the commerce system handles the configured cart and checkout flow.

Use the loader in the right place

For plain HTML, place the one-line loader in the head as a blocking script. Do not add async or defer to this loader: it writes the cloak and runtime setup during document parsing. If your site renders through a JavaScript framework, use the explicit integration instead.

Connect real product actions

Loading the runtime is not the same as wiring a purchase button. Follow the element attributes and product mapping in the current documentation. Keep product identifiers and selected options consistent between what the customer sees and what the cart receives.

Check every published page

Ensure the snippet is present once on every relevant commerce page. Publish to a staging domain, configure the website connection and test product selection, cart updates and checkout. Check that the styling does not flash before the commerce elements are ready.

A LITTLE MORE CLARITY

Questions, answered.

Where do I find my store ID?

Use the store identifier supplied by your Penni Cart setup. Replace YOUR_STORE_ID in the snippet before publishing.

Does the install snippet create my product design?

It loads the commerce runtime. You still need to configure products and connect storefront and checkout elements using the documentation.

Helpful references

Penni Cart documentation
GET STARTED

From your first idea
to their next order.

Connect your website. Add your products. Make it yours.

Start your free trial
Hugo Coffee
Northmark
The Wellness Den
Wild Oak Wellness
Webflow Jobs
Olliebooks
Drag to explore