Add a customized bundle
This guide shows you how to add a customized bundle using Shopify Functions.
What you'll learnAnchor link to section titled "What you'll learn"
In this tutorial, you'll learn how to do the following tasks:
- Set up your environment to use functions.
- Create a
RequirementsAnchor link to section titled "Requirements"
- You've created a Partner account.
- You've created a development store.
You've created an app that uses Shopify CLI 3.49.5 or higher. If you previously installed Shopify CLI, then make sure you're using the latest version.
If you plan to create a UI for your extension, then start with the Remix app template.
You've installed Node.js 16 or higher.
You've installed your app on the development store.
You're familiar with the Cart Transform Function API.
Rust-specific requirementsAnchor link to section titled "Rust-specific requirements"
The following requirements are specific to Rust-based development with Shopify Functions.
Step 1: Generate a new extensionAnchor link to section titled "Step 1: Generate a new extension"
To create a cart transform extension, you can use Shopify CLI, which generates starter code for building your extension and automates common development tasks.
Navigate to your app directory:
Run the following command to create the app extension:
Choose the language that you want to use. For this tutorial, we will use Rust.
Step 2: Define the input of your functionAnchor link to section titled "Step 2: Define the input of your function"
run.graphql defines the input for the function
The following example shows an input that retrieves information about buyer's cart like merchandise, quantity etc.
Replace the contents of
src/run.graphql file with the following code.
Function API references provide information on the available fields for the input query.
Step 3: Define the business logic of your functionAnchor link to section titled "Step 3: Define the business logic of your function"
In this example, our function will output expand operations for cart lines where merchandise has a metafield referencing other bundle components.
Replace the contents of
src/run.rs file with the following code.
Step 4: Update your app access scopesAnchor link to section titled "Step 4: Update your app access scopes"
shopify.app.tomlin the root of your app, add the
Push your updated configuration to Shopify:
Restart your app.
Use the URL provided by the CLI to open and re-install your app. You should be prompted to accept the new access scope permissions in your store.
Step 5: Create the cartTransform object using GraphQLAnchor link to section titled "Step 5: Create the cartTransform object using GraphQL"
Install the Shopify GraphiQL app on your store. If you've already installed GraphiQL, then you should do so again to select the necessary access scopes for cartTransform.
In the GraphiQL app, in the API Version field, select the 2023-07 version.
Find the ID of your function by executing the following query:
The result contains a node with your function's ID:
Run the following mutation. Replace
YOUR_FUNCTION_ID_HEREwith the ID of your function:
You should receive a GraphQL response that includes the ID of the new
Step 6: Create metafield defination to store bundle components.Anchor link to section titled "Step 6: Create metafield defination to store bundle components."
Run the following mutation on the GraphiQL app:
Step 7: Create bundle products along with the components.Anchor link to section titled "Step 7: Create bundle products along with the components."
In this tutorial, we will take the example of a happy meal bundle which contains a burger and fries.
- Create bundle component products, i.e. burger and fries.
- Create a bundle parent product, i.e. Happy Meal Bundle.
Step 8: Install the extension on a development storeAnchor link to section titled "Step 8: Install the extension on a development store"
To test your function, you need to make it available to your development store.
build.watchin your function extension configuration.
Navigate back to your app root:
Use the Shopify CLI
devcommand to start app preview:
You can keep the this preview running as you work on your function. When you make changes to a watched file, Shopify CLI rebuilds your function and updates the function extension's drafts, so you can immediately test your changes.
Follow the CLI prompts to preview your app, and install it on your development store.
Step 9: Preview the functionAnchor link to section titled "Step 9: Preview the function"
Follow the steps below to test your function on your development store.
- Navigate to your online storefront.
- Add the happy meal product to your cart.
- Navigate to checkout.
- You will now see that your happy meal product is converted into a bundle which includes a burger and fries.
Step 10: Deploy the extensionAnchor link to section titled "Step 10: Deploy the extension"
When you're ready to release your changes to users, you can create and release an app version. An app version is a snapshot of all of your app extensions.
For more information about extension deployment and versioning, refer to Deploy app extensions.
- Navigate to your app directory.
Run one of the following commands.
Optionally, you can provide a name or message for the version using the
Releasing an app version replaces the current active version that's served to stores that have your app installed. It might take several minutes for app users to be upgraded to the new version.