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
43248584687709with 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 from your eCommerce platform (e.g. Shopify) |
|
|
Product ID from your platform. Best for simple (single-variant) products only. |
|
|
Variant SKU |
|
|
Barcode. Always use quotes — a leading zero matters. |
|
|
Variant ID from ShipEarly |
|
|
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.
Comments
0 comments
Article is closed for comments.