Setting up a Webflow Site with Open Shop

This guide walks you through adding Open Shop to a Webflow site: adding the script, creating a shop page with a product list, and creating product pages with product details.

Assumptions

• You have a Webflow account and a Webflow site
• You’re familiar with the Webflow Editor
• Your Open Shop store is set up and has at least one product (you’ll need product slugs for the product pages)

What you’ll learn

• Add the Open Shop script to your site header
• Add the product list component to a shop page
• Create product pages and add the product details component to each
• Load the cart slideout and add the cart button so customers can open and use the cart from any page

Note

After adding the Open Shop embed code, you must publish your site for the components to load. The Webflow Editor does not run custom script embeds until the site is published.

Note

The code in the steps below includes a loadingEmbed div—it is part of the copy-paste snippet but can be removed. It is there to give you something visible in the Webflow editor while you’re editing, since custom components don’t render in the editor until you publish. You can remove it, or keep and style it (e.g. as a spinner or placeholder) to help you see the component while editing.

Step 1: Add the Open Shop script to your site header

1.1 In the Webflow Dashboard, open the site you want to use, hover over it, and click the Site settings (cog) icon.

1.2 In the left sidebar, click Custom code.

1.3 In the Head code textarea, add:

<link rel="stylesheet" href="https://openshopgo.com/wc/components.css">
<script src="https://openshopgo.com/wc/components.js" defer></script>

1.4 Save, then click Publish to apply the changes. The components will not load in the editor until you publish.

Step 2: Create a shop page and add the product list

Make sure you already have products created in the Open Shop admin site. The <os-product-list> component will display those products; if your store has none yet, the list will be empty.

2.1 In the Webflow Editor, create a new page (if you don’t have one already) and name it Shop.

2.2 Open the Shop page in the editor.

2.3 In the main content area, add an Embed element (Components → Embed). In the embed’s Custom code field, paste:

<os-product-list product-url-prefix="products"></os-product-list>
<div class="loadingEmbed" style="background: yellow; width: 24px; height: 24px"></div>

The loadingEmbed div in the code above is optional—remove it if you prefer, or keep it for visibility while editing in Webflow.

The product-url-prefix="products" value means product links will go to /products/your-product-slug. Use a different value if your product pages live under a different URL segment.

2.4 Save and close the embed, then save the page. Publish when you’re ready for the list to appear on the live site.

Step 3: Create product pages and add the product details component

The <os-product-details> component renders a single product’s details (image, description, price, add-to-cart) on a dedicated page.

3.1 In the Webflow Editor, create a folder (e.g. products) to hold your product pages. This keeps URLs tidy (e.g. yoursite.com/products/awesome-cream).

3.2 For each product in your Open Shop store, create a new page inside that folder. Name the page after the product (e.g. Awesome Beauty Cream). The page slug (URL segment) must match the product slug in Open Shop exactly—otherwise the component won’t find the product.

Example folder structure:

pages
└── products
    ├── Awesome Beauty Cream
    ├── Delightful Toothpaste
    ├── Orange Dreamsicle Perfume
    └── …

3.3 On each product page, add an Embed element and paste this into Custom code, replacing your-product-slug with the real slug from Open Shop:

<os-product-details product-slug="your-product-slug"></os-product-details>
<div class="loadingEmbed" style="background: yellow; width: 24px; height: 24px"></div>

The loadingEmbed div in the code above is optional—remove it if you prefer, or keep it for visibility while editing in Webflow.

3.4 Save and close the embed, then save the page. Repeat for every product. Publish to see the product details on the live site.

Note

Product slugs are defined in your Open Shop store. If you’re not sure what a product’s slug is, check your Open Shop admin or API—the slug must match exactly (including case and punctuation).

Step 4: Add the cart slideout

The <os-cart-slideout> component loads the slide-out panel that displays cart contents. Add it once in a global place (e.g. your header or a layout used on every page) so the slideout is available site-wide. The cart button that opens the slideout must be added separately—for example in your nav or header—using the Open Shop cart-button component or your own button that triggers the slideout.

4.1 In the Webflow Editor, open a layout or page that wraps all pages—for example your Header section in the navigator, or the first page that uses your main template.

4.2 Add an Embed element in a global spot (e.g. header or body). In the embed’s Custom code field, paste:

<os-cart-slideout></os-cart-slideout>
<div class="loadingEmbed" style="background: yellow; width: 24px; height: 24px"></div>

The loadingEmbed div in the code above is optional—remove it if you prefer, or keep it for visibility while editing in Webflow.

4.3 Save and close the embed, then save the page. Publish so the slideout is loaded on every page.

Step 5: Add the cart button

The <os-cart-button> component renders the button that opens the cart slideout. Add it where you want the cart icon to appear—typically in your header or nav so it shows on every page.

5.1 In the Webflow Editor, open the same layout or header where you added the cart slideout (or any global section that appears on all pages).

5.2 Add an Embed element where you want the cart button (e.g. top-right of the header, next to nav links). In the embed’s Custom code field, paste:

<os-cart-button></os-cart-button>
<div class="loadingEmbed" style="background: green; width: 24px; height: 24px"></div>

The loadingEmbed div in the code above is optional—remove it if you prefer, or keep it for visibility while editing in Webflow.

5.3 Save and close the embed, then save the page. Publish so the cart button appears. Customers can click it to open the slideout and view their cart from any page.

What’s next?

• Styling — Use your own CSS or Webflow classes to style the components; you can target the custom elements (e.g. os-product-list, os-product-details) to match your brand.
• Troubleshooting — If components don’t appear: ensure you’ve published the site, that the script is in Head code, and that product slugs on each page match your Open Shop product slugs exactly.