Shopify Staging: Essentials To Know Before Making Changes

Leading e-commerce web development companies across the globe are accustomed to a well-organized process – from development to staging to production process. Moreover software development is tough so having a staging environment for through testing and bugs iron out without affecting a live production server gets mandatory.

Shopify is a global e-commerce development platform focused on businesses and empowering leaders of online store. If a bug remains while developing a functional Shopify Plus store, it’s going to cost huge loss in sales. Here we would discuss about ways to set up a staging environment for your Shopify store without any hassle.

What do prefer to stage?

Basically a Shopify store is based on two important features: 1) data of products/collections/pages/images etc. and 2) selected theme and its configuration. While deciding what you require to stage, have a thought about its necessity.  Theme bugs can be critical: customers unable to order products. Data errors can be too bad either: bulk deletes done in error, incorrect pricing.

But these elements can be usually owned by different team members working on different things. Having a single staging environment for your shop’s theme as well as data would possibly slow down workflows and cause confusion. Here recommendation would be focused to have individual staging environment for your theme and data, a backup instead of a staging environment. A useable staging environment for your theme must have updated data, but it isn’t used for data testing: just theme.

Mandates for Shopify staging environment

Shopify can present a set of unique challenges while setting up good staging and production environments. Let’s have a minute to have a thought about how its appropriately working.

• Master branch
• Staging branch
• Feature branches for local development

Spanner in the workflows

Shopify is pretty different to other available software options due to the code and configuration elements can be changed simultaneously by anyone having access of admin login. Remember you can’t have our Git repository as the source of truth that master equals production.

Theme settings

In workflows, theme settings cannot be ignored for development purposes. But this also limits the usage of theme settings in development and makes it and staging environment ahead with production. This stated solution will definitely ensure that theme settings can be easily changed during production and during development.

Apps

Apps can go haywire in a theme, making changes to different kind of things. But they are preferred choice of store owners and offer a great plug-in functionality. Here the motto is letting apps do their own thing, reflecting that in our git repo as a change.

Rogue developers

An in-house development team will follow a precise development workflow and without making changes using the Shopify theme editor, but you can’t trust other collaborators to do the same. Sometimes a client might hire an external help like developer/designer/marketer for some small job where they would open up the live theme, edit the code, done. Overwriting their work would not be good.

Realistic Shopify development workflow

Keeping this in mind, we searched for this efficient and realistic workflow to benefit everyone working on the store.

Setup

Set up a Git repo on hosting provider like GitLab. Here Beanstalk can also let a developer to deploy automatically in a Shopify store whenever branch change in Git- saving a lot of time. The free plan covers just one deployment, ideally we want two: production and staging. Set up Beanstalk to pull your current live theme into git repository then built a new deployment in Beanstalk for automatic deployment of changes into your live Shopify theme. Make a copy of your theme in Shopify admin referred as ‘Staging’. In Git, built a branch off of master: ‘staging,’ then setup Beanstalk for pushing the stage theme copy whenever an staging branch changes. If you haven’t set up a local development environment using Slate, its highly recommended to use development shops created in your Shopify partner admin to develop against, not your live shop.

Now we are ready for development.

Development workflow

• Take branch from master ‘shiny-new-feature’
• Develop in local using Slate
• When dev and dev test is complete, create a pull request to master
• Merge your new branch into the staging branch
• In your Shopify admin download your production theme
• Switch your branch to master
• Copy the contents of the production theme zip into this folder, overwriting existing files
• Commit any changes directly to master with as descriptive a comment as possible (like ‘Installed slideshow app’)
• Merge master into staging
• The staging branch will now automatically deploy to the staging theme copy using Beanstalk
• To view staging, in your Shopify theme admin push Actions > Preview
• Test and fix
• When staging is ready to deploy, depending on how long has elapsed you may want to repeat steps 5-9 again to make sure git is up-to-date
• Approve the pull request and merge into master
• Beanstalk will deploy and your change is live!

This process ensure that any happening changes to production in the meantime (app install/uninstall, theme settings, code edited) gets reflected in Git. Some Shopify tools can be improvised for support this; however the mentioned solution can be helpful for clean development, staging and production environments on Shopify in UAE stores.