Skip to main content

Getting Started

The Reflow HTML Toolkit is a free JavaScript library for adding ecommerce functionality to any website. It is a much simpler way to integrate Reflow than our regular React libraries – you just need to write a bit of HTML and the toolkit will turn it into a full blown online store.

The toolkit does have a few limitations:

  • It is rendered entirely client side, which means that product information is not part of your site's HTML. This might affect SEO, although Google and other engines are capable of crawling client-side generated sites these days.
  • Only the ecommerce part of Reflow is available, subscriptions are not. This makes the toolkit capable of building classic online stores but not subscription web apps.

This guide will show you how to integrate the toolkit in practice.

1. Create a Project​

Signing up for Reflow and creating a new project takes less than a minute. Sign up here.

2. Include the Library​

To add Reflow to your website, you need to include the library JS and CSS files:

https://cdn.reflowhq.com/v2/toolkit.min.js
https://cdn.reflowhq.com/v2/toolkit.min.css

Add the CSS to the <head> of your pages, and the JS before the closing body tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Reflow Example</title>
    <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
  </head>
  <body>
    <p>Your Content is Here</p>
    <script
      src="https://cdn.reflowhq.com/v2/toolkit.min.js"
      data-reflow-project="999999"
      defer
    ></script>
  </body>
</html>

Notice that the <script> tag has a data-reflow-project attribute. This tells Reflow the id of your project, and is required to render your products.

2.1 Obtain your Project ID​

You can obtain your project ID from the Reflow dashboard settings page.

Just go ahead and paste it as the value of the data-reflow-project attribute in the script tag.

Checking for Errors

If there are any errors, they will be reported in your browser's JS error console. Be sure to check Dev Tools for errors often during development.

3. Add a Product​

At this point, Reflow is integrated in your website, but since you don't have any components, nothing will show up. To fix this, let's add a Product component.

Create a product in your project's control panel, open it for editing and copy its id from the URL:

https://reflowhq.com/projects/999999/products/111111/edit

In this example, 111111 is the id of your product. Keep it safe because we're going to need it in a second.

Now add a Product component to your page. Paste the id you copied as the data-reflow-product attribute, this will instruct Reflow which product to render:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Reflow Example</title>
    <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
  </head>
  <body>
    <p>Your Content is Here</p>
    <div data-reflow-type="product" data-reflow-product="111111"></div>
    <script
      src="https://cdn.reflowhq.com/v2/toolkit.min.js"
      data-reflow-project="999999"
      defer
    ></script>
  </body>
</html>

You now have a full product listing on your page, complete with an image gallery and an Add to Cart button. But there is no way for users to actually view their cart or complete the purchase. Let's fix this.

4. Add a Shopping Cart​

On another page of your website, add the Shopping Cart component. This will render a live shopping cart that lists all products that have been added and will let users to purchase them.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Reflow Example</title>
    <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
  </head>
  <body>
    <div data-reflow-type="shopping-cart"></div>
    <script
      src="https://cdn.reflowhq.com/v2/toolkit.min.js"
      data-reflow-project="999999"
      defer
    ></script>
  </body>
</html>

With this your users can see a fully functional product page, add the product to their cart, enter their shipping details and pay, all with just a few HTML tags added to your site.

Note

For checkouts to work, you will need to connect a PayPal and/or Stripe account to your project, so that the payment can be processed. Read more in our guide.

5. Your Store is Ready!​

The toolkit gives you a lot of control over how components are presented and you can customize them to meet your design. Learn more in our other guides.