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
- Adding a Product component to a page: Demo | Source Code
- A fully featured online store, which demonstrates how to connect a Product List with a Product and a Shopping Cart: Demo | Source Code
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 or handle of the product | (optional) If not set, the product component will look for the product id or handle in the page URL. You can obtain the product id and handle from the Reflow website. Click to edit the product and you can see the id in the URL. Example:
|
| data-reflow-show | media, name, description, price, categories, add-to-cart | (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.Examples:
|
| data-reflow-shoppingcart-url | URL | (optional) The URL of a page where a [Shopping Cart](/docs/html-toolkit/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. Examples:
|
| data-reflow-addtocart-text | string | (optional) Redefines the "Add to Cart" button text, if set. Example: data-reflow-addtocart-text="Add to Basket" |