# Integration

Reflow (opens new window) is a free toolkit for adding ecommerce functionality to any website. You just need to include the library in your page, link a PayPal and/or Stripe accounts, and start selling.

This guide will show you how to integrate Reflow in practice.

# 1. Create a Store

Signing up for Reflow and creating a store takes less than a minute. It is a free service and you can create an unlimited number of stores and products in each. Sign up here (opens new window).

# 2. Include the Library

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

https://cdn.reflowhq.com/v1/toolkit.min.js
https://cdn.reflowhq.com/v1/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/v1/toolkit.min.css" rel="stylesheet">
</head>
<body>
	<p>Your Content is Here</p>
	<script src="https://cdn.reflowhq.com/v1/toolkit.min.js" data-reflow-store="999999" defer></script>
</body>
</html>

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

# 2.1 Obtain your Store ID

You can copy your store's id from the URL on the Reflow website after you login. In this example, 999999 is your store's ID:

https://reflowhq.com/stores/999999

Just go ahead and paste it as the value of the data-reflow-store 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 store's control panel on reflowhq.com, open it for editing and copy its id from the URL:

https://reflowhq.com/stores/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/v1/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/v1/toolkit.min.js" data-reflow-store="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/v1/toolkit.min.css" rel="stylesheet">
</head>
<body>
	<div data-reflow-type="shopping-cart"></div>
	<script src="https://cdn.reflowhq.com/v1/toolkit.min.js" data-reflow-store="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 store, so that the payment can be processed. Read more in our guide.

# 5. Your Store is Ready!

Reflow 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.