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
• Show login status and the customer’s first name in your nav with custom attributes
• Hand a signed-in shopper off to another app without asking them to log in again

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.

Step 6: Show login status and the customer’s name in your nav

Your nav probably has a Login link on every page. Once a shopper signs in, that link should become their name. You do not need an embed or a script for this—Open Shop reads data-os-* custom attributes straight off your own Webflow elements.

The pattern is a pair of elements: design both, mark each with the state it belongs to, and Open Shop hides the wrong one.

6.1 In the Webflow Designer, open your Navbar and select the existing Login link.

6.2 Open the Element settings panel on the right (the gear icon above the Style panel), scroll to Custom attributes, and click the +.

6.3 Enter data-os-show as the Name and guest as the Value, then press the checkmark to save. This link now shows only to shoppers who are not signed in.

6.4 Add a Link Block next to the Login link. A plain Text Link cannot hold child elements, so the signed-in variant needs a Link Block rather than a duplicate of the link you just edited. Point it at your account page (e.g. /customer).

6.5 Drag two Text Blocks inside the Link Block: the first reading Hi, and the second holding any placeholder name—it will be replaced on the live site.

6.6 Select the Link Block itself (not its children), open Element settings → Custom attributes, and add data-os-show with the Value customer. The whole block—greeting and name together—now shows only to signed-in shoppers.

6.7 Select the second text block, the one holding the placeholder name, open Element settings → Custom attributes, and add:

Name	Value
data-os-text	customer.firstName

6.8 Open Site settings → Custom code → Head code and add one style rule, so neither link shows before the bundle has run for the first time:

Head code

<style>
  html:not([data-os-auth]) [data-os-show] {
    display: none;
  }
</style>

6.9 Save and Publish. Custom attributes only reach the page on a published site. Load the site as a guest and you’ll see Login; sign in and you’ll see Hi, Jane.

Note

Once the bundle is running it keeps both links hidden itself until Open Shop knows whether anyone is signed in, so your nav never flashes the wrong one; the rule in 6.8 covers the instant before it runs. On repeat page views that moment is usually skipped entirely. The data attributes reference has the details.

The full attribute list—including data-os-cart-open for a button that opens the cart, and data-os-add-to-cart for a subscribe button—is in the Data attributes reference.

Step 7: Hand a signed-in shopper to another app

Some stores send shoppers from the marketing site into a second app—an assessment, a quiz, a partner tool. Normally the shopper has to log in again when they get there. data-os-handoff fixes that: on click, Open Shop mints a short-lived handoff token and adds it to the link’s URL.

Caution

Skip this step unless you send shoppers to an app that accepts Open Shop handoff tokens. On any other link the token is just a ?token= query parameter the destination ignores—harmless, but pointless.

7.1 In the Webflow Designer, select the link that points at the other app (e.g. a Take the Assessment button).

7.2 Make sure its Link settings point at the real destination—for example /assessment/. That URL is what a shopper gets if the handoff does not apply, so it must work on its own.

7.3 Open Element settings → Custom attributes, click the +, and enter data-os-handoff as the Name. Leave the Value empty—the attribute only needs to be present.

7.4 Save and Publish.

A signed-in shopper now arrives at the other app already authenticated. Guests fall through to the plain link and land on the same page without a token, so a signed-out visitor sees no difference and nothing breaks. The same fall-through covers a failed token and a ⌘-click or middle-click, so “open in a new tab” keeps working.

Note

Leave this link’s Opens in new tab setting off. A known guest follows the link natively, so a new tab would open for them; a signed-in shopper is intercepted so the token can be minted, and that navigation always happens in the same tab. Turning it on gives you one behaviour for guests and a different one for customers.

What’s next?

• Your own code — components.js also installs the window.OpenShop JavaScript API for anything the attributes don’t cover: read the cart, add items, react to login and cart changes.
• 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. Plain CSS wins: a rule on one of your own classes, or on an os-* class name, overrides the component without !important. See Overriding styles.
• 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.