Setup Development Pipeline

mandertx
Shopify Partner
4 0 0

Hi, I want to set up my theme to be like a proper project that uses config, env, etc. I'm using the same theme code for two stores, each in it's own currency, so due pixels and apps using domain names "...myshopify.com" in their scripts, I want simply push the theme from github onto both stores, how do I set it up so that I can use dynamic domain names, proper project structure, setup proper pipeline, etc. I need an example of someone implementing this in their organization and can tell me the procedures they follow and how they setup everything. Currently I just have github setup to my production theme and that's it.

Reply 1 (1)
Liam
Shopify Staff
Shopify Staff
1350 128 432

Hi Mandertx,

 

Setting up a theme to function as a proper project that uses config, env, etc., and can be easily pushed to multiple stores from GitHub, involves a couple of steps. Here is a general outline of the process:

  1. Project Structure: Start by organizing your theme in a manner that will facilitate easy deployment to multiple stores. This involves adopting the default Shopify theme folder structure.

  2. Environment Variables: Use environment variables to store sensitive information such as API keys, or in your case, store-specific details like domain names. This way, you can have one set of code, but still customize it according to the store. In the settings of your deployment pipeline, you can specify different environment variables for each store.

  3. GitHub Integration: Shopify's GitHub integration allows you to connect a branch to a theme. Any changes pushed to that branch will be reflected in the theme. You can have one branch per store to manage changes for each store separately. You can also set up webhooks in GitHub to trigger the deployment pipeline whenever code is pushed to a specific branch.

  4. Deployment Pipeline: A CI/CD pipeline can automate the deployment process. Tools like Jenkins, CircleCI, or GitHub Actions can be used to build these pipelines. When code is pushed to a branch, the pipeline is triggered, the code is tested, and if the tests pass, the code is deployed to the store associated with that branch.

Here's an example process and setup:

  1. Setting up the Theme: Start with a base theme. You can use Shopify's Dawn theme as a starting point. Organize your theme following the Shopify folder structure.

  2. Environment Variables: In the theme's config/settings_data.json file, add placeholders for the dynamic values. For example, "google_analytics_domain": "{{ google_analytics_domain }}". Then, in your deployment pipeline, replace these placeholders with the respective environment variables.

  3. GitHub Integration: Connect your GitHub repository to your Shopify store. In Shopify Admin, go to Online Store > Themes > Add theme > Connect from GitHub. Connect a branch to each store.

  4. Deployment Pipeline: Set up a deployment pipeline using a tool like GitHub Actions. In the pipeline, replace the placeholders in the settings_data.json file with the respective environment variables.

  5. Deployment: When you push code to a branch, the pipeline is triggered. The code is tested, the placeholders are replaced with the correct environment variables, and if the tests pass, the code is deployed to the respective store.

This is a high-level overview of the process. The specifics will vary based on your particular use case and the tools you are using. You might need to consult the documentation of the specific tools you're using for more detailed instructions.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog