Add to Cart
The Add to Cart component renders a button which lets users add a specific product to their shopping cart.
Use it in place of the full Product component if you wish to have an entirely custom page with the ability to add a specific product to the user's cart.
Examples
- Demo showing the various Add to Cart attributes: Demo | Source Code
- Using Add to Cart buttons to communicate with a Shopping Cart component on the same page: Demo | Source Code
How to Embed
To embed this component on your website and display a list of products, include the reflow library, and add the following tag somewhere in the <body> of your page:
<div data-reflow-type="add-to-cart" data-reflow-product="1234567890"></div>
Supported Attributes
You can configure the Add to Cart and change the way it's rendered by specifying additional data-reflow-xxx attributes.
| Attribute | Possible Values | Description |
|---|---|---|
| data-reflow-type | add-to-cart | Must always be set. |
| data-reflow-product | id or handle of the product to show | Must always be set. 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-variant | variant of the product | (optional) If the product has
variants, you can place the variant id
here. Pressing "Add to Cart" will add the specified variant to the
shopping cart. Example: |
| data-reflow-addtocart-text | string | (optional) Redefines the "Add to Cart"
button text, if set. Example: |
| data-reflow-show | button, variants, quantity | (optional) Comma separated list of sections
to display. The sections not in the list will be hidden. Example. Skip the quantity and variant selectors, leaving only the
button: |
| data-reflow-shoppingcart-url | URL | (optional) The URL of a page where a
Shopping Cart components is located. Examples:
|