I'm Ogasawara, CTO of Tsun Inc.
This time, I will introduce the procedure for deploying a Shopify app theme extension from CI.
I hope this will be helpful for those who are currently developing theme extensions and those who will develop them in the future.
Why do this?
To develop a Shopify theme extension, you deploy it to Shopify separately from the Shopify app.
(Liquid and JavaScript files for theme extensions are served from Shopify's servers.)
You also need to publish the theme extension from the Shopify Partner admin after deployment.
By automating the deployment process, you can prevent missed theme extension updates and publishing mistakes to some extent.
(However, the process of publishing a theme extension from the Shopify Partner admin cannot be automated.)
Prerequisites
Target audience
- People developing a theme extension for a Shopify app
Environment
- Shopify CLI: Version 3.39.0
- Package manager: npm
Things to prepare
- A theme extension for a Shopify app
- A CI/CD service (GitHub Actions, CircleCI, etc.)
Procedure
There is an official guide on the Shopify Developers Platform, so in general, you can follow the steps there.
Get the theme extension ID
* If you have already deployed it before, you can skip this step.
With the theme extension already implemented, run the following command.
npm run deployWith the latest CLI, there are prompts such as whether to deploy the theme extension, and when deployment is complete, SHOPIFY_THEME_EXTENSION_ID is added to .env.
This is an ID created for each theme extension. During deployment, the theme extension is identified and deployed based on SHOPIFY_API_KEY and this ID.
Get a CLI token
- From the Shopify Partner admin, click Manage tokens under Settings > CLI tokens.
- Click Generate CLI token and copy the generated token.
Deploy with a CI/CD service
Run the deployment with a CI/CD service.
At that time, you need the SHOPIFY_THEME_EXTENSION_ID, CLI token, and SHOPIFY_API_KEY obtained above.
Configure them so that SHOPIFY_API_KEY, SHOPIFY_THEME_EXTENSION_ID, and SHOPIFY_CLI_PARTNERS_TOKEN can each be retrieved from environment variables.
Once the environment variables are set, running the deploy command makes it possible to deploy the theme extension from CI.
One note: when deploying a theme extension, Shopify CLI checks the theme extension. Because that check runs in Ruby, you need to run the deployment in an environment where Ruby and Bundler can run.
Also, since CLI v3.40.0, you need to add the -f flag to the deploy command.
As an example, here is a Dockerfile that installs Node in a Ruby-based image file.
It is OK if you prepare an environment like this in your CI/CD service where Ruby and Node can be used.
FROM ruby:3.1-bullseye as extension
ARG SHOPIFY_API_KEY
ENV SHOPIFY_API_KEY=$SHOPIFY_API_KEY
ARG SHOPIFY_CLI_PARTNERS_TOKEN
ENV SHOPIFY_CLI_PARTNERS_TOKEN=$SHOPIFY_CLI_PARTNERS_TOKEN
ARG SHOPIFY_THEME_EXTENSION_ID
ENV SHOPIFY_THEME_EXTENSION_ID=$SHOPIFY_THEME_EXTENSION_ID
RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && apt-get install -y nodejs
WORKDIR /app
COPY . .
RUN cd extensions/theme-extension && npm ci && npm run build
RUN npm ci && npm run deploy -- --forceSummary
This time, I introduced how to deploy a Shopify theme extension from a CI/CD service.
Once you set up deployment automation and similar workflows, they continue to improve work efficiency and prevent human error, so be sure to set them up.
Tsun Inc. develops Shopify apps used by stores around the world.
If you are interested in requesting Shopify app development or hiring us, please contact Tsun Inc.
