Rendering the Add to Cart Button

The Add to Cart button is a ready-made button you can place anywhere on your product page. It automatically checks whether the product is in stock, disables itself if it isn't, and adds the item to the ShipEarly cart when a shopper clicks it — no extra code needed.

Before You Begin

This button works alongside the Buy Button cart. Make sure you have already followed the global setup steps to install the widget scripts and create the window.shipearlyBuyButton instance on every page.

Step 1 — Add a Placeholder on Your Page

First, add an empty element to your HTML where you want the button to appear. Give it an id so the script can find it.

<span id="add-to-cart-placeholder"></span>

You can put this right next to your existing "Add to Cart" button, underneath a product image, or wherever makes sense in your layout.

Step 2 — Render the Button

The setup is split across two places in your theme.

Global template

Your global template already creates and renders the Buy Button cart (as described in the parent article). No changes are needed here — this is just for reference:

<script>
window.addEventListener('load', function () {
  window.shipearlyBuyButton = ShipEarly.BuyButton({
    client_id: '<SHIPEARLY_API_CLIENT_ID>',
  });
  window.shipearlyBuyButton.render();
});
</script>

Product page template

On your product page template, add a second script that waits for the cart to be ready and then renders the Add to Cart button into the placeholder you added in Step 1:

<script>
window.addEventListener('load', function () {
  window.shipearlyBuyButton.render().then(function () {
    window.shipearlyBuyButton.renderAddToCartButton('#add-to-cart-placeholder', {
      item: { variant_id: 43248584687709 },
    }).then(function (addToCartButton) {
      document.querySelector('select[name="id"]').addEventListener('change', function () {
        addToCartButton.setItem({ variant_id: this.value });
      });
    });
  });
});
</script>

Calling render() a second time here is intentional — it waits for the cart to finish loading before creating the Add to Cart button. This matters because the Add to Cart button inherits its accent colour from the rendered cart widget; if it were created before the cart element existed, it would fall back to the default blue instead.

Tip: Replace 43248584687709 with the actual variant ID for the product on this page. See Specifying the Product below for other ways to identify a product.

Keeping the Button in Sync

Chaining a .then() call from renderAddToCartButton() can be used to update the button if the shopper changes the selected variant (colour, size, etc.).

    }).then(function (addToCartButton) {
      document.querySelector('select[name="id"]').addEventListener('change', function () {
        addToCartButton.setItem({ variant_id: this.value });
      });
    });

Specifying the Product

The item property tells the button which product to add to the cart. You can identify a product using any of the following:

Property	Example	Notes
variant_id	43248584687709	Variant ID from your eCommerce platform (e.g. Shopify)
product_id	7034682900573	Product ID from your platform. Best for simple (single-variant) products only.
sku	'HEL-1'	Variant SKU
upc	'83736789238'	Barcode. Always use quotes — a leading zero matters.
variant_shipearly_id	29670	Variant ID from ShipEarly
product_shipearly_id	1595	Product ID from ShipEarly. Best for simple products only.

You can also include a quantity:

item: { variant_id: 43248584687709, quantity: 2 }

If quantity is omitted it defaults to 1.

Dynamic variant selection

If your page has a variant picker (like a colour or size dropdown), use a function for item so it reads the current selection each time the button is clicked:

<script>
window.addEventListener('load', function () {
  window.shipearlyBuyButton.render().then(function () {
    window.shipearlyBuyButton.renderAddToCartButton('#add-to-cart-placeholder', {
      item: function () {
        return {
          variant_id: document.querySelector('select[name="id"]').value,
          quantity: Number(document.querySelector('#Quantity').value),
        };
      },
    }).then(function (addToCartButton) {
      document.querySelector('select[name="id"]').addEventListener('change', function () {
        addToCartButton.refresh();
      });
    });
  });
});
</script>

Keeping the button in sync can then be managed by calling refresh() when the shopper changes the selected variant.

Customizing the Button Text

By default the button reads Add to Cart and switches to Out of Stock when the product is unavailable. You can change either label:

window.shipearlyBuyButton.renderAddToCartButton('#add-to-cart-placeholder', {
  item: { variant_id: 43248584687709 },
  label: 'Buy Now',
  outOfStockLabel: 'Sold Out',
});

Customizing the Button's Appearance

Changing the colour

The button has one accent colour used for its background. Pass a CSS colour value to override the default blue (#009fff):

window.shipearlyBuyButton.renderAddToCartButton('#add-to-cart-placeholder', {
  item: { variant_id: 43248584687709 },
  accentColor: '#e63946',
});

The hover colour darkens automatically. To set it explicitly:

  accentColorHover: '#c1121f',

Using your own CSS class

If you'd rather style the button entirely with your own stylesheet, pass a className. This replaces the built-in ShipEarly styles with your own class name(s):

window.shipearlyBuyButton.renderAddToCartButton('#add-to-cart-placeholder', {
  item: { variant_id: 43248584687709 },
  className: 'btn btn-primary',
  outOfStockClassName: 'btn btn-secondary',
});

className applies when the product is in stock; outOfStockClassName applies when it is out of stock.