Create local pickup charges

You can use a local pickup delivery option generator to generate custom local pickup options that are available to customers during checkout.

Local pickup is an option that allows customers to pick up their orders from your physical location. You can activate it in the Shipping and delivery settings in the Shopify admin. Customers can then choose the local pickup option at checkout. To learn more, visit the Shopify Help Center.

In this tutorial series, you'll use Shopify Functions to create a function that adds a price to local pickup options when the cart contains bulky items. You can use this tutorial as a guide to creating other functions that generate local pickup charges.

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:

Generate starter code for Shopify Functions.
Use GraphQL to define the input of your function.
Deploy a local pickup delivery option generator function to the Shopify platform.
Review logs for your 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.49.5 or higher. If you previously installed Shopify CLI, then make sure that 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.

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:

Note

If you've previously installed cargo-wasi and updated Rust to version 1.67 or higher, then you also need to update to the latest cargo-wasi by running cargo install cargo-wasi.

Step 1: Create the local pickup delivery option generator function

Anchor link to section titled "Step 1: Create the local pickup delivery option generator function"

To create your local pickup delivery option generator function, you can use Shopify CLI to generate a starter function, specify the inputs for your function using an input query, and implement your function logic.

Navigate to your app directory:
Run the following command to create a new local pickup delivery option generator extension:
Choose the language that you want to use. For this tutorial, you should select either Rust or JavaScript.

Shopify defaults to Rust as the most performant and recommended language choice to stay within the platform limits. For more information, refer to language considerations.

Tip

Shopify Functions support any language that compiles to WebAssembly (Wasm), such as Rust, AssemblyScript, or TinyGo. You specify the Wasm template option when you're using a language other than Rust and can conform to the Wasm API. Learn more about the Wasm API.
Navigate to extensions/local-pickup-generator:
Replace the contents of the input.graphql file with the following code:

input.graphql defines the input for the function.
If you're using JavaScript, then run the following command to regenerate types based on your input query:
Replace the src/index.js or src/main.rs file with the following code.

The function logic determines if any items in the cart have a "bulky" tag and adds a price to delivery options:
If you're using Rust, then build the function's Wasm module:

If you encounter any errors, then ensure that you've installed Rust and cargo-wasi.

Step 2: Preview the function on a development store

Anchor link to section titled "Step 2: Preview the function on a development store"

To test your function, you need to make it available to your development store.

If you're developing a function in a language other than JavaScript or TypeScript, ensure you have configured build.watch in your function extension configuration.
Navigate back to your app root:
Use the Shopify CLI dev command to start app preview:

You can keep the 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 3: Test the local pickup delivery option generator

Anchor link to section titled "Step 3: Test the local pickup delivery option generator"

You can test your local pickup delivery option generator to ensure it's working as expected, and review logs for your function.

From the Shopify admin, go to Settings > Shipping and delivery.

Make sure you have at least one location in your store with local pickup enabled.
Activate a pickup service connected to your function.
Open your development store, build a cart, proceed through checkout, and select Pick up.
Open your terminal where shopify app dev is running, and review your function executions.

When testing functions on development stores, the output of dev includes executions of your functions, any debug logging you have added to them, and a link to a local file with the full function execution details.
In a new terminal window, use the Shopify CLI app function replay command to replay a function execution locally, and debug your function without the need to re-trigger the function execution on Shopify.
Select the function execution from the top of the list. Press q to quit when you are finished debugging.

Next steps

Anchor link to section titled "Next steps"

Learn more about how Shopify Functions work and the benefits of using Shopify Functions.
Consult the API references for Shopify Functions.
Learn how to use variables in your input query.