Skip to main content

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.

AttributePossible ValuesDescription
data-reflow-typeadd-to-cartMust always be set.
data-reflow-productid 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-product="12345678"
  • data-reflow-product="example-handle"
data-reflow-variantvariant 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.
You can find the variant id from the product edit page.

Example: data-reflow-variant="variant1235678"

data-reflow-addtocart-textstring

(optional) Redefines the "Add to Cart" button text, if set.

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

data-reflow-showbutton, 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-urlURL

(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:

data-reflow-variants-sort

name_asc, name_desc, price_asc, price_desc, in_stock

(optional) Controls the order in which product variants are displayed in the dropdown. If this is not set, variants will be displayed in the order they are defined.

You can specify one or more sort criteria, separated by commas. For example, "in_stock,price_asc" will show in-stock variants first, then order by price lowest to highest.

Examples:

  • data-reflow-variants-sort="name_asc"
  • data-reflow-variants-sort="in_stock,price_asc"