Customize checkout business logic with Shopify functions
To cater to the unique needs of merchants, Shopify offers robust customization capabilities, particularly in the checkout process, through a feature called Shopify Functions. In this article, we’ll explore what Shopify Functions are, how they work, who can use them, common use-cases, and their limitations. We’ll also provide code examples to illustrate how you can utilize these functions to customize the checkout experience.
What are Shopify Functions?
Shopify Functions are a new type of extensibility that allows developers to customize the backend logic of Shopify stores. Unlike traditional Shopify apps that run on external servers and interact with the store via APIs, Functions run directly on Shopify’s infrastructure. This proximity allows for more efficient and secure customizations, especially for checkout processes.
Shopify Functions enable developers to modify or extend Shopify’s core functionality in a scalable and secure way. They are primarily used to manipulate aspects like pricing, shipping, discounts, and other business logic at checkout.
How Shopify Functions work
Shopify Functions are powered by WebAssembly (WASM), a lightweight binary format that allows code to run with near-native performance within Shopify’s platform. Developers can write these functions in programming languages like JavaScript, TypeScript, Rust, and others, which are then compiled to WASM for efficient execution. This approach ensures reliable and secure function execution with minimal latency. Functions are triggered by specific events within Shopify’s ecosystem, such as when a customer reaches the checkout page or selects a delivery option.
Source: shopify.com
Key characteristics of Shopify Functions
- Functions are triggered by events, such as checkout initiation, discount application, or shipping selection.
- They are defined using a manifest file that specifies the input and output types, as well as the logic of the function.
- Shopify Functions run in a sandboxed environment, ensuring the safety and stability of the platform.
Here’s a simplified flow of how Shopify Functions operate:
- An event (e.g., checkout, shipping method selection) triggers the function.
- Shopify provides relevant input data to the function (e.g., cart details, customer information).
- The function executes its logic based on the input data.
- The function returns an output that modifies the checkout process, such as adding a discount or offering a custom shipping rate.
Who can use Shopify Functions?
Shopify Functions are primarily designed for Shopify Plus merchants and developers building custom functionalities for them.
Zdroj: shopify.com
Common use-cases for Shopify Functions
Shopify Functions provide a powerful way to customize and enhance the checkout process. Here are some common use-cases:
Dynamic discounts
You can create highly customized discount logic that is not possible with Shopify’s built-in discount features. For instance, a function could offer a “Buy One Get One Free” discount for specific products or create tiered discounts based on the total number of items in the cart.
Product-specific checkout rules
Implement checkout rules that apply only to specific products. For example, if a certain product is in the cart, you can enforce a minimum order quantity or restrict certain payment methods.
Custom shipping methods and rates
Shopify Functions can be used to define custom shipping methods based on various conditions such as customer location, cart contents, or order value. For example, a merchant could offer free shipping for orders over $100 only to customers located in specific regions. Some brands offer special shipping options, like bike shipping, that only display to customers that live within a certain local area based on ZIP or postal codes.
Custom payment method selection
Shopify Functions can allow merchants to customize available payment methods based on various conditions like cart contents or customer attributes. For instance, you can restrict certain payment methods for high-value orders (e.g., offer cash-on-delivery as a payment option only up to a specific dollar amount).
For more information, check out tutorials on building with payment customizations and delivery customizations.
Example: Creating a Custom Shipping Option
This example demonstrates how to create a custom shipping option using Shopify Functions. It offers free express shipping for customers in the Czech Republic who have more than 5000 CZK worth of items in their cart.
Step 1: Define the Shopify Function
For this example, we will write the function in JavaScript using the Shopify Function template. We will use the run.liquid file to define the logic.
export default function run(
input,
{
deliveryGroups: {
deliveryOptions: deliveryOptions,
cartLines: cartLines,
customer: customer,
},
}
) {
let availableDeliveryOptions = [];
const totalCartValue = cartLines.reduce((acc, line) => {
return acc + line.priceSet.presentmentMoney.amount;
}, 0);
const isCustomerInCzechRepublic = customer && customer.address && customer.address.countryCode === 'CZ';
if (isCustomerInCzechRepublic && totalCartValue > 5000) {
availableDeliveryOptions.push({
title: 'Free Express Shipping',
handle: 'free_express_shipping',
price: 0,
});
}
availableDeliveryOptions = [...availableDeliveryOptions, ...deliveryOptions];
return { availableDeliveryOptions };
}
This JavaScript function checks whether a customer is located in the Czech Republic and if their cart total exceeds 5000 CZK. If both conditions are true, a “Free Express Shipping” option is added to the available delivery options during checkout.
Step 2: Deploy and Test the Function
Once the logic is written, you need to deploy the function using Shopify CLI or other deployment tools.
- Update access scopes
- Deploy the app
- Create delivery customization via GraphiQL – read more here.
Limitations of Shopify Functions
While Shopify Functions are powerful, there are a few limitations to keep in mind:
- Shopify Functions are usually available only on Shopify Plus plan. Some can also be used on other plans, but only through App Store apps, such as Payify, which allows you to hide specific payment methods.
- You need to write functions in languages that compile to WebAssembly.
- Shopify Functions are currently limited to specific checkout-related events (e.g., delivery options, discounts).
- Since the code runs in a sandboxed environment, there are limitations on accessing external APIs and services directly.
Conclusion
Shopify Functions provide a powerful way for developers to customize the checkout experience in Shopify stores. They offer a high degree of flexibility, scalability, and security for Shopify Plus merchants looking to implement unique business logic. With their event-driven nature and ability to run directly on Shopify’s infrastructure, they present an exciting avenue for building advanced e-commerce functionalities.
For more detailed documentation and examples, check out the official Shopify Functions Documentation.