# Product

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

# Examples

# 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 (example.com?product=123456789).

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-xxx attributes.

Attribute Possible Values Description
data-reflow-type product 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.

Example: data-reflow-product="12345678"
data-reflow-show media, name, description, price,
(optional) Comma separated list of sections to display. The sections not in the list will be hidden.

Example: data-reflow-show="media,name,price"
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 {id} placeholder can be used, which will be replaced with the category id.

  • data-reflow-category-link="https://example.com/products?category={id}"
  • data-reflow-category-link="/category.html?id={id}"
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-shoppingcart-url="https://example.com/cart"
  • data-reflow-shoppingcart-url="/somepage.html"
data-reflow-addtocart-text string (optional) Redefines the "Add to Cart" button text, if set.

Example: data-reflow-addtocart-text="Add to Basket"