Giftship App Extensions

Contains information concerning the development of Shopify extensions via the Shopify CLI.

Currently Giftship consists two extensions developed with the CLI, found under the /extensions directory:

• giftship - Theme app extension app embed (https://shopify.dev/docs/apps/build/online-store/theme-app-extensions)
• checkout-options - Checkout UI extension (https://shopify.dev/docs/api/checkout-ui-extensions)

Giftship's order printer extensions (Admin link and Bulk action link) are must be configured via the Partner Dasboard.

1) Generating a new extension

https://shopify.dev/docs/apps/online-store/theme-app-extensions/getting-started

Run yarn to install the Shopify CLI

yarn

yarn shopify app generate extension

2) Requirements

• Node version 18.19
• Ruby version 2.7.5 or higher (Shopify CLI requirement)

The app must also have access to "Allow network access in checkout and account UI extensions" before changes can be deployed since the network_access flag is set to "true" in the shopify.extension.toml file of the "checkout-options" extension.

This can be requested (and instantly granted for a dev app) in the "API Access" tab when viewing the app in the Shopify Admin.

3) Devloping an extension

To test the extension in a devlopment environment run the following from the .shopifyextensions directory:

yarn dev

Optionally, add --reset to the above command to change the app and store used for development.

Once the command has been run, follow the instructions from the CLI output to preview the extension.

You may also want to turn on "Development store preview", which is found in the Partner Dashboard under the Extensions tab when viewing the app.

4) Env vars and TOML file

The base directory must contain a TOML configuration file shopify.app.toml to link to the app in the Partner Dashboard and deploy changes.

Multiple TOML files can be created with names matching format shopify.app.{config-name}.toml to link with multiple apps (i.e. prod, staging, dev).

An env file must also be created for each linked app, containing UUIDs for the app and each extension in the app. The env files are named in a similar way to the TOML files .env.{config-name}.

Extension environment variables are named like SHOPIFY_{YOUR_EXTENSION_NAME}_ID.

5) Deploying an extension

To deploy a new version of the extension run:

yarn deploy

**NOTE: This will release a new version of the app (and extensions) to whichever app was previously linked when running either yarn dev --reset or yarn deploy --reset.

To deploy changes to the production app, it must therefore first be linked, ideally by first running yarn dev --reset with "Development store preview" enabled to test any changes before deployment.