What happens once website designs have been signed off by the client and they’re ready to go into development?
The design team uploads their files to a programme called Zeplin. This is a great tool because it lets the designers document what needs to be built and how designs should behave in a central, collaborative environment for the whole project team.
The developers then start from these Zeplin files. We work closely with the design team throughout the process and stay in touch via Slack or Google Meet calls. Most of the team also meet in person once a week. The design and dev team normally have a call before we start development to go through the project, request any additional assets or icons, and clarify any questions.
The developers work from Git (an open source control system that helps us track and manage changes to our code and projects) - this means every change is logged and we can easily backtrack if needed.
When it comes to pieces of work or functionality which are part of ongoing retainer work (as opposed to a Shopify site build project) we work on a separate Git branch which keeps the code separate from the main development theme. This isolates those separate pieces of work and means we can hotfix the live theme if needed. This branch is then reviewed by another developer before being merged into the main development branch when we want that piece of work to go live.
What software and tools does the development team use?
Git
This lets us keep track of changes and different development branches for projects, and makes it easier to collaborate.
Text Editors
For coding, the team uses an array of different software, but VS (Visual Studio) Code is the most popular. This is a streamlined code editor with support for development operations like debugging, task running, and version control. It provides the tools the developers need for a quick ‘code-build-debug’ cycle.
Internal Sync Tool
This is a command line tool (software that allows users to interact with a computer system by typing commands into a text-based interface) which we use to sync local files to a remote Shopify theme. This allows us to work locally but sync changes remotely. The tool also allows us to sync files in bulk and across multiple stores, which we use when working with clients who have more than one Shopify store.
Languages Used
HTML - Hypertext Markup Language is a text-based approach to describing how content contained within an HTML file is structured. This markup tells a web browser how to display text, images and other forms of multimedia on a webpage.
Liquid - Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
SCSS - Sassy Cascading Style Sheets or Sassy CSS. It is a superset of the CSS language that allows web designers more freedom and control when designing web designs by adding new features to CSS.
JS - JavaScript is a versatile programming language that plays a pivotal role in both frontend and backend development. At its core, it works seamlessly with HTML and CSS to structure and design web pages.
We also use a range of backend languages and libraries including Node, Express, PostgreSQL and Redis.
What does ‘full stack’ mean in development terms?
Full stack refers to both the frontend and backend of an application. In the context of Shopify this applies to app development. Full stack developers will be able to work on both the frontend and backend of an app, which allows for quicker development and makes them more versatile as multiple developers are not needed.
What is GraphQL?
GraphQL is a data query and manipulation language which allows you to query only the specific data you need across multiple data sources. This improves efficiency and speed as you only request the data you require, compared to REST where you have to request each resource separately (and it usually includes all data properties).
In the context of Shopify we work with GraphQL when working with apps and the backend Shopify API. Shopify has now deprecated their REST API so everything going forward is using GraphQL.
What testing processes do we have in place to minimise errors?
For testing, developers will test their own work when it’s complete, then we'll test each other’s work when we review the merge request in Git. In addition to this, we also have an in-house QA tester who thoroughly tests all development work to make sure it functions as intended, but also to look at it from a user point of view so that it makes sense to people who are not coming at it from a developer angle!
Anything you’d recommend people look for when considering working with a Shopify design and development agency?
I think one of the key things brands need to see evidence of at an agency is what processes it has in place when working on new features, and how they keep this separate to the main theme so hotfixes can quickly be done if necessary.
Also a client should be aware of the process when they add new content to themes - it’s important to understand this so their changes are not overwritten, because we copy theme content before every deployment.
Finally I think it’s really helpful when clients have an awareness of how the development process works - it helps with things like making sure they don’t deploy the dev theme themselves, as that will sometimes contain features being tested.
If you're looking for support with your Shopify business, whether that's a new site, a migration from another platform, SEO support or ongoing optimisation, drop us a line and we'll see if we can help.
