QuickStart

Welcome to the Open Shop Quickstart! This guide will walk you through the process of setting up Open Shop for your site.

How Open Shop web components work

Open Shop delivers commerce through web components—standard custom elements that you add to your pages like any other HTML. They’re framework-agnostic and work in site builders (e.g. Webflow, Framer), or app frameworks (Vue, React, Svelte).

How it works:

Load the Open Shop script
Include the Open Shop script (and optional styles) on your site. Once loaded, the custom elements are registered and ready to use.
Use the components where you need them
Drop a code snippet into your site builder’s embed/code block, or inside your Vue/React/Svelte templates. Example: a product card, cart, or checkout—wherever you want that piece of commerce to appear. No need to rebuild your whole site or adopt a specific framework.
Configure via attributes
Point components at your store and products using the products slugs.
They talk to your backend
The components call the Open Shop API for products, cart, and checkout. The components are the front-end layer that stays consistent across all your pages and platforms.

Because they’re standard web components, they work in any environment that can run JavaScript and render HTML—so one set of components works on a marketing site, a Webflow page, or a Vue app.

For a complete list of supported tags and attributes, see the Web Components reference.

Integrating with your own site

To use Open Shop on your site:

Add the Open Shop script
In your HTML <head> or before </body>, include the Open Shop script (and optional default styles) so the custom elements are registered. You can load it from a CDN or bundle it with your own assets. If you’re using a site builder, you can add the script to the site header.
Place the components in your layout
Add the component tags where you want commerce to appear—e.g. a product card in a grid, a cart in the header or sidebar, a checkout section on its own page. Use the same tags in static HTML, in your site builder’s embed/code block, or inside your Vue/React/Svelte templates. If you’re using a site builder, you can add the components to the page using the site builder’s embed/code block. If you’re using a framework, you can add the components to your templates.
Style to match your brand
Use your existing CSS to target the component tags or their inner parts (via shadow-DOM-friendly selectors if needed). You can also load a theme or override CSS variables so the components match your design system. If you’re using a site builder, you can style the components using the site builder’s CSS editor. If you’re using a framework, you can style the components using your own CSS.