WhatsApp
Shopify Functions allow you to add custom checkout logic, enabling modifications to cart items. In this guide, we will learn how to customize cart item names using Shopify Functions.
Step 1: Install Shopify CLI
First, install Shopify CLI globally:
npm install -g @shopify/cli @shopify/functions
Step 2: Initialize a Shopify App
Now, initialize your Shopify app:
shopify app init
Then, enter your app name.
Navigate to the app directory:
like:
cd cart-item-rename-function
Step 3: Generate a New Shopify Function
Now, generate a Shopify function:
npm run shopify app generate extension
This command will prompt for inputs:
-
Type of extension: Cart Transformer
-
Name of extension: cart-item-rename
- Language Selection: TypeScript or JavaScript
Step 4: Update GraphQL Query
Add the following code to run.graphql:
query RunInput {
cart {
lines {
id
merchandise {
... on ProductVariant {
title
product {
title
}
}
}
}
}
}
Step 5: Implement Logic in run.js
Now, add the following code to run.js:
// @ts-nocheck
/**
* @typedef {import("../generated/api").RunInput} RunInput
* @typedef {import("../generated/api").FunctionRunResult} FunctionRunResult
*/
/**
* @type {FunctionRunResult}
*/
const NO_CHANGES = {
operations: [],
};
/**
* @param {RunInput} input
* @returns {FunctionRunResult}
*/
export function run(input) {
console.log("Received input:", JSON.stringify(input, null, 2));
const operations = input.cart.lines
.filter((line) => line.merchandise?.product?.title?.includes(" "))
.map((line) => {
const newTitle = line.merchandise.product.title.split(" ").slice(0, 3).join(" ");
return {
update: {
cartLineId: line.id,
title: newTitle,
},
};
});
return operations.length > 0 ? { operations } : NO_CHANGES;
}
Step 6: Generate Type Definitions
Run the following command to generate type definitions for your function:
shopify app function typegen
This ensures your function has the necessary types generated correctly.
Step 7: Update App Configuration
Update shopify.app.toml by adding the following scope:scopes = "write_cart_transforms"
Step 8: Deploy Your App
Deploy the app using:
shopify app deploy
When prompted with "Update configuration?", select Yes and proceed.
Step 9: Start Development Server
Start the development server:
shopify app dev
Step 10: Install the App on Your Store
1. Open the development store from the preview link.
2. Click "Install" when prompted.
Step 11: Test in GraphQL Explorer
Press g in the terminal to open GraphQL Admin API and run the following
Query:
query {
shopifyFunctions(first: 25) {
nodes {
app {
title
}
apiType
title
id
}
}
}
To add the function to cart transform:
mutation {
cartTransformCreate(
functionId: "fabc7cdc-1436-4070-90b6-c24983d9e905",
blockOnFailure: false
) {
cartTransform {
id
functionId
}
userErrors {
field
message
}
}
}
Step 12: Verify the Checkout Page
Now, open the store preview, add a product to the cart, and proceed to checkout. If the product title is long, it will now be shortened
Step 13: Preview the Function in Checkout
1. Open your development store.
2. Navigate to Online Store > Themes.
3. Click on Preview for your active theme.
Step 14: Debugging and Logs
If the function is not working as expected:
-
Check the logs in the terminal for any errors.
-
Add console.log statements inside the run.js function to debug input data.
-
Run shopify app function run --path=<path-to-function> to test the function separately.
