# 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

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

  • data-reflow-shoppingcart-url="https://example.com/cart"
  • data-reflow-shoppingcart-url="/somepage.html"