# 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 (opens new window) | Source Code (opens new window)
- Using Add to Cart buttons to communicate with a Shopping Cart component on the same page: Demo (opens new window) | Source Code (opens new window)
# 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 of product to show | Must always be set. 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-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 button to the shopping cart. Example: data-reflow-variant="variant_123" |
| data-reflow-addtocart-text | string | (optional) Redefines the "Add to Cart" button text, if set. Example: data-reflow-addtocart-text="Add to Basket" |
| 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-show="button" |
| 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. Examples:
|