APIs
Leverage our public APIs
Smootify is JS dev friendly! It exposes many APIs that you can use to further customize and enrich your Webflow site!
Wait for Smootify
The Smootify instance is exposed only after the APIs are loaded, so be sure to wrap all your code inside the API Loaded callback, e.g:
.("smootify:loaded", () => {
.("Smootify APIs are available");
});If you don't want to care about using callbacks and you are hosting your scripts elsewhere and not inline you can add a script with type smootify-load, it will be loaded after APIs are available. The type of the module will be set based on the data-type attribute you add to the script or will be set as application/js by default.
<script
src="https://yourcdnurl.tld/yourscript.js"
type="smootify-load"
data-type="module"
></script>Shopify Files
You can also upload js files to Shopify > Content > Files and use that as CDN if you need 😉
Query
It allows you to access the whole storefront graphql api without thinking about any fetch call, tokens and all the rest
Syntax
Smootify.query(query);
Smootify.query(query, variables);Parameters
Prop
Type
Examples
const result = await Smootify.query(`{
shop {
id
}
}`);
const shopID = result.shop.id;Query Customer
It allows you to query customer fields for the current logged in customer, it can automatically fetch either from the old or new customers account APIs based on if you are using passwordless login or not. This is not the full Customer Accounts Api but is limited to only query the Customer object, schemas below:
Handle Errors
If the customer is not logged in it will throw up an error, so handle it in your custom code
Syntax
Smootify.queryCustomer(fields);Parameters
Prop
Type
Examples
document.addEventListener('smootify:user_auth_change', (event) => {
const shopifyCustomer = event.detail;
if (shopifyCustomer) {
const {customer} = await Smootify.queryCustomer(`
id
customField: metafield(namespace:"custom", key:"my_key") {
value
}`);
console.log(customer.id, customer.customField)
} else {
// If you want to redirect here
}
})document.getElementById('my-button').addEventListener('click', () => {
try {
const {customer} = await Smootify.queryCustomer(`
id
customField: metafield(namespace:"custom", key:"my_key") {
value
}`);
console.log(customer.id, customer.customField)
} catch(e) {
console.log(`Customer not logged in or error with the query`, e);
}
})Set Customer Metafields
It allows you to set customer fields for the current logged in customer. Be sure to set the metafields as readable/writable from Customer Accounts API
Handle Errors
If the customer is not logged in it will throw up an error, so handle it in your custom code
Not for Legacy
This method will not be available if you are using legacy accounts.
Syntax
Smootify.setCustomerMetafields(...metafields);Parameters
Prop
Type
Examples
document.addEventListener('smootify:user_auth_change', (event) => {
const shopifyCustomer = event.detail;
if (shopifyCustomer) {
await Smootify.setCustomerMetafields({
key: "popup_seen",
value: "true"
}, {
key: "last_viewed_page",
value: window.location.pathname
})
}
})Apply Coupon Code
It allows to apply a coupon code to the cart without user interaction, usefull if you want to add a specific coupon code based on your js interactions
Syntax
Smootify.applyCouponCode(code);Parameters
Prop
Type
Examples
document.getElementById("welcome-button").addEventListener("click", () => {
Smootify.applyCouponCode("welcome20");
});Change Market By Country ISO Code
It allows to change up the market by an ISO code, usefull if you want to use some ip localization or select the market manually
Syntax
Smootify.changeCountryByIsoCode(isoCode);Parameters
Prop
Type
Examples
document.getElementById("italy-button").addEventListener("click", () => {
Smootify.changeCountryByIsoCode("IT");
});Change Market Language
It allows to change up the market language, usefull if you want to use some ip localization or select the market language manually
Syntax
Smootify.changeMarketLanguage(isoCode);Parameters
Prop
Type
Examples
document.getElementById("italy-button").addEventListener("click", () => {
Smootify.changeMarketLanguage("IT");
});Add to Cart
It allows to add lines to the cart and refresh the cart render automatically, you can also optionally redirect directly to the Checkout
Syntax
Smootify.addToCart(lines);
Smootify.addToCart(lines, true);Parameters
Prop
Type
Examples
document.getElementById("product-card-button").addEventListener("click", () => {
const productsToAdd = [
{
attributes: [
{
key: "Attribute Key",
value: "Attribute value",
},
],
quantity: 1,
merchandiseId: "gid://shopify/ProductVariant/1",
},
];
Smootify.addToCart(productsToAdd);
});document.addEventListener("smootify:cart_updated", (event) => {
const cart = event.detail;
const userAddedMyProduct = !!cart.nodes.find(
(node) => node.merchandise.product.title == "My Product"
);
const userAddedMyOtherProduct = !!cart.nodes.find(
(node) => node.merchandise.product.title == "My Other Product"
);
if (userAddedMyProduct && !userAddedMyOtherProduct) {
const productsToAdd = [
{
attributes: [
{
key: "Attribute Key",
value: "Attribute value",
},
],
quantity: 1,
merchandiseId: "gid://shopify/ProductVariant/1",
},
];
Smootify.addToCart(productsToAdd);
}
});Get Cart ID
It allows to get the current cart ID, usefull if you want to directly mutate the cart state using your own queries
Syntax
Smootify.getCartID();Examples
const cartId = await Smootify.getCartID();
await Smootify.query(
`mutation cartMetafieldsSet($metafields: [CartMetafieldsSetInput!]!) {
cartMetafieldsSet(metafields: $metafields) {
metafields {
id
value
}
userErrors {
field
message
}
}
}`,
{
metafields: [
{
key: "<your-key>",
ownerId: cartId,
type: "<your-type>",
value: "<your-value>",
},
],
}
);Reload Cart
It allows to re-render the cart, usefull if you modified the cart state using your own queries
Syntax
Smootify.reloadCart();Clear Cart
It allows to remove all items from the cart
Syntax
Smootify.clearCart();Format Money
It formats a string (cents) or a number as a money string based on the Shopify format
Syntax
Smootify.formatMoney(cents);Parameters
Prop
Type
Examples
document.querySelector('.my-text').textContent = Smootify.formatMoney('100');Add Box to Cart
This function allows you to add a group of products as a box.
It requires Magic Box Add-on enabled
Syntax
Smootify.addBoxToCart(lines);
Smootify.addBoxToCart(lines, boxOptions);
Smootify.addBoxToCart(lines, boxOptions, true);Parameters
Prop
Type
// Typescript interface
// Smootify.addBoxToCart(lines: CartLineInput[], boxOptions?: {title?: string, image?: string}, goToCheckout?: boolean): Promise<Cart>
// /** The input fields to create a merchandise line on a cart. */
// export type CartLineInput = {
// /** An array of key-value pairs that contains additional information about the merchandise line. */
// attributes?: InputMaybe<Array<AttributeInput>>;
// /** The ID of the merchandise that the buyer intends to purchase. */
// merchandiseId: Scalars['ID'];
// /** The quantity of the merchandise. */
// quantity?: InputMaybe<Scalars['Int']>;
// /** The ID of the selling plan that the merchandise is being purchased with. */
// sellingPlanId?: InputMaybe<Scalars['ID']>;
// };
const productsToAdd = [
{
attributes: [
{
key: "Attribute Key",
value: "Attribute value",
},
],
quantity: 1,
merchandiseId: "gid://shopify/ProductVariant/123123123",
},
{
attributes: [
{
key: "Attribute Key",
value: "Attribute value",
},
],
quantity: 1,
merchandiseId: "gid://shopify/ProductVariant/12312312312",
},
];
const boxOptions = {
title: "My Custom Box",
image: "https://cdn.shopify.com/s/files/1/0563/0689/2909/files/image.webp", // The image must be hosted on Shopify CDN!
};
Smootify.addBoxToCart(productsToAdd, boxOptions);