Product component renders a product from your store in any web page. You can use it to display an entire product page with an image gallery and a buy button, or a minimal product listing with only the info that you need.
If you need to display multiple products, use the Product List component, instead of placing individual product components on your page.
- Adding a Product component to a page: Demo (opens new window) | Source Code (opens new window)
- A fully featured online store, which demonstrates how to connect a Product List with a Product and a Shopping Cart: Demo (opens new window) | Source Code (opens new window)
# How to Embed
To embed this component on your website and display a product, include the reflow library, and add the following tag somewhere in the
<body> of your page:
<div data-reflow-type="product" data-reflow-product="1234567890"></div>
The id of the product to show can be set either via the
data-reflow-product attribute or by appending a
product query parameter to the page URL (
Check out the examples above to see how we use the query parameter to connect a product list with a product page.
# Supported Attributes
You can configure the product and change the way it's rendered by specifying additional
|data-reflow-type|| ||Must always be set.|
|data-reflow-product||id of product to show||(optional) If not set, the product component will look for the product id in the page URL.|
You can obtain the product id from the Reflow website. Click to edit the product and you can see the id in the URL.
|data-reflow-show|| ||(optional) Comma separated list of sections to display. The sections not in the list will be hidden. |
|data-reflow-category-link||URL||(optional) If set, this attribute wraps the product categories, displayed under the product title, into links that point to the URL you've set. A special |
|data-reflow-shoppingcart-url||URL||(optional) The URL of a page where a Shopping Cart components is located.|
If this is set, when customers add the product to their cart, they will see a button that brings them to their shopping cart so they can complete the checkout.
|data-reflow-addtocart-text||string||(optional) Redefines the "Add to Cart" button text, if set. |