GitHub Action: Create automated theme previews for Shopify stores

In this article, you'll learn how to properly incorporate and leverage our GitHub Action to make your store development processes even easier and smoother.

Shopify is a popular platform for building online stores and is often managed and maintained using a GitHub repository. To make the CI/CD processes within a project even easier, we implemented a GitHub Composite Action, which especially facilitates the integration process of changes to the theme and, above all, saves precious time during development.

"Create Shopify Theme Preview" is an action on the GitHub Marketplace that allows developers to preview their Shopify theme without having to set up a Shopify test environment.

In this article.

1. advantages of using our action
2. setup of the GitHub Action
3. usage example

Advantages of using our Action

In order to transition changes from specific pull requests to the actual theme, several correction loops often take place.
Reconciling changes in this process can be tedious, as previews only run locally at the respective developer and long-lived preview links have to be created manually before they can be shared with project managers or clients.

To simplify this process, we created a GitHub action that automatically previews a pull request and leaves a comment about the pull request with a link to the preview. If you need to review changes from multiple open pull requests, this action simplifies this many times over.

You don't have to manually create a preview for each pull request using the Shopify CLI, but just leave a comment with the specific predefined keyword. The action then automatically generates the desired links.

The Action is inspired by the Vercel Preview Deployment feature, which allows developers to automatically create a preview as soon as a new commit has taken place.

The Action is especially useful for developers who work on large theme projects and make frequent changes. It also allows project members who have little understanding of code to also have a preview generated without setting up their own local environment.

However, the action is also useful for developers who are working on smaller theme projects and want to preview quickly without requiring a lot of effort.
This can help speed up the development process and improve the quality of themes.

Setting up the GitHub Action

In order for the Action to work for you without any problems, it needs to be set up for each repository it will be used in. Below is the common method via github.com for implementation pointed out and explained:

navigate to the correct repository.
click on the Actions tab
click on New Workflow
copy the code below and save the file (see code snippet)
replace the inputs shopify_flag_store and shopify_cli_theme_token with your own input values
(optional) replace the inputs build_step and dir

Preview.yml

run-name: Create Theme Preview by @${{ github.actor }}
on:
  issue_comment:      
    types: [created]    
jobs:                   
  deploy:
    name: preview
    runs-on: ubuntu-latest
    if: contains(github.event.comment.body, '!preview')
    steps:
      - uses: Brand-Boosting-GmbH/shopify-theme-preview@v1
        with:
          shopify_flag_store: 'your-shop.myshopify.com'
          shopify_cli_theme_token: 'your-cli-theme-token'
          build_step: 'npm i && npm run build'
          dir: 'dist'

Example of use

This action can be triggered by adding the keyword !preview to a pull request comment. The keyword can be customized to filter for a different string in the pull request comments.

After a few seconds, the entire comment is replaced with a table showing the information and loading status.

Then, the first table is replaced by another table containing a preview and editor link.

We have created a repository where the whole thing can be tried out as an example.
You can find an example of how to use it here!

👍 Tip

Don't forget to generate a shopify_cli_theme_token for the repository and provide it as input to this action, along with the shopify_flag_store which is your store URL.

Optional inputs

Optionally, you can add the build_step and dir inputs to the composite action. These inputs are used when there are specific requirements to preview the theme, such as a custom build step or changing the path to a different path before the preview is deployed.

⚠️ Note.

For more information on setting up the shopify_cli_theme_token, see this Theme Access App Guide

Inputs

The action includes the following steps:

get the current date and time.
create a comment on the pull request with a table containing the name of the store, the preview creation status, and the date and time of the action.
check out the current pull request.
set up Node.js and Ruby.
install the Shopify CLI.
optional build step using the "build-step" input.
use the Shopify CLI to build a preview and save the returned preview link in an output object (optional path via "dir"-input).
Update the table to display the preview links. 9.
if any of the previous steps fail, create a comment on the pull request with an error message.