Add a customized bundle
Info
Bundles apps that are built using Shopify Functions and cover the mix-and-match use case will be considered for inclusion as part of our upcoming bundles product launch. To be eligible to be included in our marketing campaign, your app must be approved to be listed in the Shopify App Store by May 31, 2023.
This guide shows you how to add a customized bundle using Shopify Functions.
What you'll learn
Anchor link to section titled "What you'll learn"In this tutorial, you'll learn how to do the following tasks:
- Use GraphQL to define the input of your function.
- Build a
cart_transform
function.
Requirements
Anchor 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.0 or higher, or you've migrated your existing app so that it's compatible with Shopify CLI 3.0 or higher. If you previously installed Shopify CLI, then make sure you're using the latest version.
- You've installed Node.js 16 or higher.
- You've installed your app on the development store.
Rust-specific requirements
Anchor link to section titled "Rust-specific requirements"The following requirements are specific to Rust-based development with Shopify Functions.
You've installed Rust.
On Windows, Rust requires the Microsoft C++ Build Tools. Make sure to select the Desktop development with C++ workload when installing the tools.
You've installed cargo-wasi:
Step 1: Define the input of your function
Anchor link to section titled "Step 1: Define the input of your function"The following example shows an example of the cart
input object and the result of the
CartTransform
function output
that groups specific line items from the cart together into a bundled line. The lines might be repriced to offer
customers an incentive to purchase a complete bundle.
Step 2: Build a cart_transform
function
Anchor link to section titled "Step 2: Build a cart_transform function"The process to build a cart_transform
function is similar to the process to create a discount function, with two key differences:
- You need to skip the discount React library and related discount React UI code.
You need to create a
cart_transform
function instead of aproduct_discounts
function:
In the following example, a metafield reference is used to assign mappings between the bundle parent and components:
Step 3: Update your app access scopes
Anchor link to section titled "Step 3: Update your app access scopes"You need to request the write_products
access scope to run cartTransform
mutations in the Shopify Admin API.
In
shopify.app.toml
in the root of your app, add thewrite_products
scope.Start 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 4: Create the cartTransform object using GraphQL
Anchor link to section titled "Step 4: Create the cartTransform object using GraphQL"To activate your function, create a cartTransform
object on the store where you installed your app. You can do this using the cartTransformCreate
GraphQL mutation.
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.
Make sure to select the
write_products
access scopes for the Admin API.Find the ID of your deployed function in the
.env
file at the root of your app. Your function's ID is the value of theBUNDLE_CART_TRANSFORM_ID
environment variable that's defined in the.env
file.Run the following mutation. Replace
YOUR_FUNCTION_ID_HERE
with the ID of your function:You should receive a GraphQL response that includes the ID of the new
cartTransform
object.
- Learn how to build a user interface for bundles in the Shopify admin.
- Learn how to use variables in your input query.