News, views and general insights about brands, words and the web.

Take it from our people people

Show me more

AI apps are everywhere right now. So we took some time out to separate the great from the gimmicky. Here are 9 of our faves.

A one-click-wonder for removing backgrounds. Whether you want to save as a PNG or add a new background to product photos, remove.bg has got you.

Our go-to app for creating super-resolution assets. It allows you to enlarge and enhance photos and other images in an instant.

Makes finding fonts easier than ever. Upload your font inspo photo and the app searches its database of 230,000 fonts to find the best match.

A content-based one this time – but something we use for high-fi design mock-ups. Drop in your text and Quillbot will rephrase it in seconds.

Say goodbye to superimposed mock-ups. For showcasing branding concepts on everything from swag to billboards, try Place It.

For converting 2D assets to 3D, there’s Morflax. It even lets you customise and animate 3D mock-ups, too. Think device screens, bags, bottles, and more.

TomeAI takes presentation templates one step further. Sales pitches, design portfolios – you name it, Tome helps you create it, fast.

Tiny by name, mega by nature. This one has all your general admin tools: PDF compression, image conversions, spellcheck, and more.

Great for creating simple UI mock-ups - whether you’re in need of inspiration, or want to free up time to focus on the meatier, more complex design tasks. 

Top AI apps right now: design edition

In web development, whether it be fast-paced or not, hiccups happen. Deadlines creep up, budgets fluctuate – there may even be a change in team members. All of these things can lead to development ‘shortcuts’. And this, in turn, builds up technical debt.

Basically, technical debt is all the development work that needs to be done to rectify any corner cutting that was done to keep the project moving forwards.

If a project deadline is far into the future, there’s no reason not to keep with the best practices. By this, I mean neat and tidy code, everything just looking 

, and working perfectly. Sections of code can be built upon, comments in code to document various workings are self-explanatory. It’s what every project 

But, if that deadline is brought forward, suddenly more complex sections might become a bit rougher round the edges and will take a future developer more time to maintain, fix bugs or build upon.

Shifting team members, or onboarding new ones, can occasionally rack up debt, too. If a developer comes onto the project that hasn’t had a reasonable amount of knowledge sharing, or doesn’t have the technical abilities to work on the project efficiently, they might cut corners to get things done.

For example, they might find an area in the project that looks or functions something like the end result and mould it to fit what is needed – without cleaning up any unnecessary parts of the code. What you’re left with is something that works, but is a bit of a Frankenstein’s monster.

There are a few other reasons that can come into play – some are deliberate, others not so much.

A deliberate decision could be pushing forward with development while skipping over the design phase. Developers almost “guess for themselves” as to what the end result should look and function like. Another cause of technical debt could be pushing the project live during a stage of development and being prepared to deal with any consequences afterwards.

The not-so-deliberate reasons for debt build-up could be recklessness i.e. knowingly creating technical debt due to a lack of knowledge. Or, being unaware of the mistakes that are being made along the way.

And, finally, there’s the kind of technical debt that you’re knowingly creating, i.e. after development has taken place, you become aware of a better way of doing things.

Still with me? Great. Now let’s talk about what we can do to reduce that debt.

Once technical debt is identified, it’s better to get a plan in place to clean things up as early as possible. This prevents the debt from increasing, because the more development work is factored into those areas, the harder it will be to clean up later on.

There’s been times when in order to get the project to meet the required design, front-end developers have used unsupported features in CSS files. While these use specific browser prefixes and will eventually be supported across all browsers, using these prefixes also creates a technical debt that can be dealt with later on. A good example of this would be the appearance property that currently needs prefixing with -moz-appearance and -webkit-appearance

Eventually, these prefixes won’t be needed, and can be removed to make the class more efficient and cleaner.

While we’re on the topic of stylesheets, Harry Roberts 

 a stylesheet that exists purely to keep any known trade-offs in, so that it can be easily identified as something to work with later when reducing the debt. Keeping this separated means that when a solution has been worked out to make it more efficient to the known system, it can be removed from this file and placed in an appropriate section of the stylesheet structure. On top of this, it also allows you to do a git blame to find out when, and by who, the debt was introduced.

Debt can be minimised by providing thorough documentation at the end of the design process. This can then be built upon with new components and processes as further development work. It also means new developers can use it as a guide to pick up the project.

Interactive libraries such as Storybook – a Javascript library that allows for components to be built, documentation and tested – are also extremely beneficial when it comes to reducing technical debt.

User feedback and reviews can help identify and reduce technical debt, too. A user could already have knowledge of how the project should look/interact or be completely unfamiliar with it. All feedback is valuable!

So, to sum up – technical debt happens. In some cases it’s avoidable, in others – inevitable. But, being mindful of how best to reduce it (as a team) can help limit those future headaches and promote better ways of working. Win-win right?

4 ways to reduce technical debt during front-end dev

Get in touch

This year’s all about making budgets go further. But when you’re weighing up where your marketing spend will make the biggest impact, there’s one thing you really shouldn’t be cutting corners on – and that’s your branding. Here’s why.

First impressions have never counted more

If there was ever a time to show you take pride in your appearance, it's now. Research by 

 shows that people will make a judgement about your brand within the first 90 seconds – and up to 90% of that decision is based on colour alone. Saying that, it’s important to remember a logo, colour palette or symbol is just a tiny part. Your brand is also your values, your story, and your perspective. So, a stronger, more well-rounded identity shows you care – about your business, your customers, and your future.

Investing in your brand doesn’t always mean upgrading what you have. Most of the time, it’s simply about being more unified in everything you do. Consistency shows confidence in your brand identity, and confidence always inspires trust. This is something that’s never been more important when it comes to new users – especially since 

 that as many as 77% of customers would recommend a brand to a friend after a single positive experience.

You’re only as good as your team. And, when times are tough, you need the best talent behind you if you’re going to come out on top. Investing in your brand is a great way to build engagement among teammates. If everyone’s aligned, you’ll strengthen your brand image across every touchpoint.

Plus, you’ll make your brand something that your people are genuinely proud to be associated with. Do that, and you’ll have a better chance of attracting and keeping the best people, and getting better results across the board.  Win-win, right?

Loyalty will be the word on everyone’s lips this year. Across every industry, people will be shopping around for cheaper alternatives. But the stronger your brand identity, the less likely it is that your current customers will stray away.

Yes, a competitor may be cheaper – but do they really offer more value? The role of your brand identity is to remind your users of everything you stand for and why they loved shopping with you in the past. If you feel you’re out of touch or falling behind, then re-evaluating your brand can help you stay relevant. Your customers identified with you at one point in time, so there’s every chance they will in the future, too.

Impactful advertising is going to be essential for standing out. But having a strong brand identity goes a long way in making your marketing all the more powerful. We’re not saying shake things up for the sake of it – or go bolder, brighter or more playful if that’s not what you’re about. Simply tightening up your look and feel, or even just getting a fresh outlook on your creative assets, can help ensure your brand identity remains relevant, exciting and – above all things – recognisable. Your brand is your biggest asset, so push it further and make it work harder for your business. That’s what it’s there for.

Why the last thing you should cut corners on this year is your branding

Join us

New year, (kind of) new us. Over the last few months, we’ve had some fresh talent join the design team in the form of Simon, Ellie and Dylan, and welcomed our newest developer, Donny. Plus, our oldie (but goodie!) team mate, Alistair, has moved into his brand new role as Development Team Lead.

Read on for a brief intro to the gang – in their own words.

I once worked for a latex fetish brand. They kept sending us NSFW products to display in our (very central) Manchester city centre office. I also did work for a pillow printing start-up, who used to send us printed pillow gifts of our faces blown up on them. So we had loads of our staffs faces on pillows around the office for a while.

We once threw a Christmas party in our (recently kitted out) office. Our boss MASSIVELY underestimated the amount of damage 60+ employees in their mid 20s would cause to the office, which resulted in a very expensive tidy up bill afterwards!

Career wise - my move to Series Eight! Lots of opportunities and I’m very thankful. The team’s also great.

Project-wise - even 3 years down the line, I’m still very proud of my work with PlayStation. A brand like that doesn’t come around often, and it was one of the rare projects I got to give my ‘all’ to. I also had some insanely generous feedback from some key decision-makers at Sony!

AI and automation design. It’s already grown massively over the last 12 months, so it will be interesting to see where it goes in the next 12.

Back in winter 2016, I climbed Norway's iconic Trolltunga. Near the summit, there’s a sign that says "If you're here between September to December, do not climb. Danger of death." The date was October 4th. But, I figured I couldn’t turn back at this point, so pushed on – and nearly slipped off – but the views made it worth it in the end. 

Has to be Better Call Saul, with Breaking Bad being a close second (even named my two dogs Hector and Gustavo). Third place, I’d go with The Last Dance (the story behind Michael Jordan and the Chicago Bulls). More of a docuseries, but definitely one that sticks in my mind.

I've been lucky enough to see some amazing artists in concert, starting with Skrillex when I was 15. Since then, I've seen Kendrick Lamar, Coldplay, Post Malone, Ne-Yo, and more. While they were all fantastic, Kendrick Lamar stands out as the best, with Coldplay close behind.

You’ll probably find me playing board games in one of the local taprooms, watching crappy reality TV (looking at you Below Deck), or trying to walk my dog round the streets of Leith. He’s ridiculously small and weird/cute looking so we get stopped by literally every other person asking ‘WHAT IS IT?’ (

read in a thick Scottish accent for authenticity

Probably one of my current clients at Series Eight – a sex toy company. Definitely some of the most fun I’ve had working on a project and never thought I’d feel so at ease chatting about vibrators and lube with my boss. 

Sustainable design creeping into digital. It’s still pretty new and there’s not been very much research put into the area, but there are already so many things we could be doing to create more sustainable (less energy-greedy) websites. As brands try harder to be sustainable, reach B-Corp status or greenwash themselves, I think they’ll pick up on this newer trend.

You’ll probably find me binge-watching videos of my favourite bands or just staring at my guitars…hoping one day I’ll magically be able to play them. Failing that, I’ll be nerding out over a science or history documentary, kicking a football about, or gaming.

I actually used to be a chef. I learned the ropes working in a flame-grilled steakhouse before working in an Indian restaurant. I’d secretly always wanted to be a pastry chef. But looking back, I’m definitely glad that food didn’t become my day job!

Professionally, I’d say the fact that I’m completely self-taught. I started coding as a hobby when I was 14, so I feel really lucky to have turned something that I love into a career. Personally – without a doubt, becoming a dad.

I worked in Scotland's largest ski resort for almost a decade. I spent my days sorting out ski hire, selling tickets, running lifts, and ended up doing a bit of everything. By the end of my stint, I was a qualified ski instructor and determined that was going to be my career!

It was in an old converted whisky cellar in Edinburgh’s old town called The Caves. It is ridiculously atmospheric and cool, which made seeing ‘The Japanese House’ there amazing. Other gig highlights include The Shins, De Staat, Yumi Zouma and Another Sky.

I'm probably walking up a Scottish mountain in the middle of nowhere, shouting into the wind. Or I'm out skiing – also shouting.

My biggest web development prediction for 2023

Legislation will sneak up on the industry. There are a handful of laws coming up that concern competition on the web and accessibility requirements that could have huge consequences for building websites.

New year, new teamies

Vote for us

That’s right, the people at awwwards have shortlisted us as one of the 40 best global web agencies in 2022. And to say we’re over the moon is an understatement.


Last year turned out to be a pretty big year for us. We designed, dev’ed and launched a record number of sites, collab’ed with some incredible brands, and pushed the boundaries (and ourselves) further than ever before.

We even scooped a couple of awards in the process – ‘

’ for our very own Series Eight site. But to even be nominated for Agency of the Year, by a team as prestigious as the awwwards jury, hasn’t just made our day – it’s made our decade.

We can’t let something like this go by without saying a huge thank you – to the team, our community, and all our clients past and present. Without you, we wouldn’t love doing what we do. And it’s moments like this that make us feel all the more grateful.

We’re up for Agency of the Year!

Whatever you need these days, you can bet Figma has a plug-in for it. So whether you’re looking for shortcuts that will generally make life easier – or want to level-up your design work – here are 10 that come top of my list when it comes to web design.

Quickly resize images/shapes into specific aspect ratios.

 Staying as consistent as possible makes things easier to manage content-wise during the web build.

figma.com/community/plugin/739222456238688882

 You get an instant example without having to play around with X, Y & Blur values.

figma.com/community/plugin/1068595505353552645

 Quickly generate button states and styles.

 Helps you spend less time manually creating the same states for every project

figma.com/community/plugin/891833918736503296

 Input your chosen colour and generate a range of complementary palettes/shades based on Material, Atlassian, Orbit and Ant Design.

figma.com/community/plugin/1024452006068794933

 Get a library of editable handy components.

 Allows you to drop useful pre-set components and states in your design system.

figma.com/community/plugin/944200797696370948

 This tool lets you instantly convert logos/icons to vector format within Figma.

figma.com/community/plugin/735707089415755407

 Great for when you need to display sizes for documentation such as design systems/guides.

figma.com/community/plugin/739918456607459153

 Good practice when it comes to preparing for dev handover.

figma.com/community/plugin/739106292828562948

 A great way to make sure accessibility is taken care of when it comes to colour palettes, branding and design systems.

figma.com/community/plugin/732603254453395948

 Quickly and easily scale all your typography for branding docs, web designs, and more.

figma.com/community/plugin/739825414752646970

10 Figma plug-ins all designers should know about

GET IN TOUCH

We’re wrapping up 2022 as a team of 22. We’ve designed stuff, developed stuff, even won some stuff. Some of us managed to meet up for the first time, too.

From the brands we’ve collabed with to the people we’ve met, there’s one thing we can all agree on – 2022, you’ve been a blast.

It’s been a busy year for go-lives. We’ve designed, dev’ed and launched a total of 24 sites in the last 12 months – the most we’ve ever done. Go team!

6 visual identities and 11 brand voice projects

We tackled everything from total reinventions to quick nip and tucks, collaborating with teams in California, London, and plenty of places in between.

First up, Bobbie (our first full-time copywriter), then Project Manager, Jack, and designers, Ellie and Dylan. Dom joined our dev team and then we welcomed Design Director, Simon. And, last but not least, Jaxon joined the gang (and the world) on 10th November 2022.

’ for our very own Series Eight site. Big shout out to all our clients – and the entire team – for making us look good.

We went back to basics to rediscover what makes us, us. After a few months of hard graft, we went live with our new brand identity back in February. Go check out 

We had our biggest and best team retreat ever

In September, we all headed to Europe’s Surf Mecca to hang out IRL. Four days of fun in the sun and more Portuguese custard tarts than we could manage. Read the 

2022 in numbers

The busiest shopping season of the year is almost upon us. And with more and more of us choosing to tackle our Christmas shopping from the comfort of the couch, how can you ensure you’re as prepared as possible on the fulfilment front?


We recently caught up with ShipBob to chat about seasonal shipping and how to stay one step ahead.

And by this, we mean delivery times. Offering the fastest, cheapest delivery may be a great way to capture those last-minute Christmas shoppers, but there’s no point in overpromising if you can’t achieve it. Be clear in the way you communicate delivery times and highlight cut-off dates that align with your deadlines. Some people may be more than happy to receive their order later than planned, but with customer retention more important than ever, it’s not worth taking the risk.

It sounds obvious, but all areas of your business need to talk to one another. Predicting sales peaks is going to be essential for keeping up with demand, so ensure everyone’s aligned when it comes to campaigns or PR activity. If you’ve got products that are selling faster than others, slow promotional activity and readjust your ordering. If you know your biggest sellers are being held up (because of bad weather or general shortages) then add messaging around when users can expect a restock and prioritise replenishment ASAP.

Get prepared by looking at sales numbers from previous years and supplier restock times. If you use a 3PL for shipping, ask them to calculate and relocate your inventory. Having the right stock in the right warehouses will help reduce your shipping costs and, more importantly, help ensure you don’t run out of your best sellers. Plus, forecasting busy periods ahead of schedule means your warehouses can bring in seasonal staff and increase their courier networks to keep up with demand.

If you’re looking for a way to ease the pressure on your fulfilment channels, why not push gift vouchers this festive season? Black Friday offers on gifting, as well as last-minute e-delivery messaging during the countdown to Christmas, are both great for driving sales. You can still cash in on buyers, but you won’t incur the same costs or require the manpower needed for packing and posting orders.

High numbers of returns will follow any big sales period. Unwanted gifts, impulse buys – all on top of the regular returns you’ll receive in any given month. Review your returns policy as soon as possible. Think about who pays, offer exchanges instead, and source the most competitive rates on couriers. Even introduce cut-off dates – or consider charity donations instead if it’s more sustainable and cost-effective. And finally, make sure your up-to-date policy is super clear on your website. You’ll then have the chance to crunch the numbers and review the reasons behind returns once the dust settles.

Seasonal shipping: how to be Christmas and Black Friday-ready when it comes to fulfilment

Selling to shoppers outside the UK is a no-brainer for growing your e-commerce business. But expanding overseas is easier said than done – especially when it comes to fulfilment. We caught up with ShipBob to discover why – in today’s marketplace – offering localised shipping is such a big conversion driver.


Fewer delays at customs = more repeat custom

Since Brexit, a big hurdle for businesses selling outside the UK to overcome is the red tape at customs. Not only are additional duties costly, but the entire process of shipping across borders can also be incredibly time-consuming. Being in both locations helps prevent anything from being slowed down. And the more reliable your delivery times, the more likely your customers are to buy – and keep buying again and again.

Staying local keeps your shipping costs down. If you’re already based in your buyer’s region, there’s no need to navigate exchange rates. You’re also avoiding any carrier surcharges and cutting down on the fuel costs associated with getting your goods from A to B. And with your profits taking less of a hit all around, you’re more likely to be able to offer the holy grail of fast, free shipping – something that’s essential at a time when customer expectations are at an all-time high.


Eliminate any uncertainty at the checkout

Don’t underestimate the power of “what you see is what you pay”. Tell a customer that they may have to pay additional fees because they’re based overseas and they’ll definitely think twice about buying. If you’re shipping locally and can offer delivery duty paid, then your sales are guaranteed to soar. In fact, according to ShipBob, conversion rates are four times better when you offer this type of service.

Offering local fulfilment isn’t just great for slashing delivery times and costs. It allows you – and your customers – to personalise the shipping process further. Instead of offering just home delivery, you can make use of pick-up points and collection lockers – the preferred choice for buyers in the Netherlands, France and Germany. And let’s face it, if your customers can choose to collect (and return) their orders in a way that works best for them, they’re more likely to commit in the first place.

How localised shipping can help drive conversions

Whatever your ecommerce business needs, you can bet that Shopify has an app for it. But when it comes to adding wholesale functionality to a site, we found that the third-party apps out there - to put it politely - could be a whole lot better. Here’s why:

We had to wait for the app developer to manually install the app on our store

Random generated discount codes were being generated

So instead of continuing to subscribe to something that simply doesn’t work, we set about figuring out what Shopify's discount code feature had to offer. From here, we utilised this feature with our own custom code to provide a better solution.


Read on to discover how we hacked it and learn how to create a Shopify whole account without a third-party app, too.

The easiest way to assign a discount code to many customers is by creating a customer group. The discount will also automatically apply to any future customers who are later added to the group.

To get started, simply add a tag to your customers, for example: “trade”.

Next, on the customers listing page, perform a search by filtering by the tag you added in the previous step.

Once you add the filter, a custom search will be performed and a list of your tagged customers will be shown. Whilst in this custom search view, click “Save segment” to create a new group.


You’ll be prompted for a name; this can be anything you like and will only be shown in the Admin panel.

You should now see a new, easy to access tab at the top of the customers panel.

To set up a unique discount for our “Trade Customers” group, head over to the Discounts section in Shopify’s Admin and create a new discount code.

You can name this code anything you like, just note that this will be shown to customers at checkout and on their orders.

Next, fill out the discount as per your own needs. You can use any discount type (percentage, fixed amount, etc), add minimum orders — whatever your needs are for this customer group. Do note that this post will be referring to the percentage discount type with no minimum order, therefore certain code snippets might require significant tweaking to meet your discount rules.

The only requirement is that under Customer eligibility, you select “Specific customer segment” and then select your customer group, eg: “Trade Customers”.

You can check the discount summary at the top right of the page. If you’re happy with the discount rules, click save (note: you can come back and change these details at any time!)

You are free to edit your theme’s code via the Shopify Admin, or using a code editor and using a tool like Themekit or the Shopify CLI to push your changes.

Please note that since in our example we’ve been using “Trade Customers”, we’ll continue to do so in the code snippets below, feel free to rename any files and variables as you need — just make sure to stay consistent throughout this section.

Head over to the cart.liquid template/section. Here we’ll need to do a few things, firstly we’ll automatically apply the discount code if a user has a trade account, using the following snippet. Make sure to paste it between the opening and closing <form> tags, since it is a hidden input, the user won’t see it on the page.

Note that if you named your discount code something other than “TRADE_DISCOUNT”, please update the value.

So at this point the discount will automatically be applied if a Trade Account user is logged in and submits the Cart form, they will see the discounted prices on the Checkout page.

Let’s continue with some more code snippets which will calculate the product prices based on a few editable discount rules.

Please note that the following example doesn’t take minimum requirements into consideration (min. quantity of items, or purchase amount). While it is technically still possible to implement this Trade Accounts technique using minimum requirements, it requires much more custom code which is outside of the scope of this post.

Apply the discounted price to the product

The easiest place to start applying the conditional discount is the Product page since we only have one product price to worry about.

We’ll be creating the snippet in charge of calculating product prices; this snippet will likely need some editing to suit your use case, so read the snippet titles carefully and make any changes necessary to follow the rules of your discount code.

Create a new snippet called calc-product-price.liquid and paste the code snippet that most closely resembles your discount code rules:

1) If the discount applies to the entire store and is a percentage type discount:

Edit the first line as needed, the above example is for a 20% discount.

2) If the discount applies only to a particular (or multiple) collections and is a percentage type discount:

Edit the first and second line as needed, the above example is for a 20% discount applied only to the collections within the pipe-delimited list (make sure to use collection handles).

The qty variable will make more sense a litter later.

Now head back to the product.liquid template/section and we can update the product price! In the template/section find where the price is getting output eg {{ product.price }}, and replace this with our new snippet:

Notice we pass in the product as a variable, this will become useful when the product object isn’t available on other pages.

Remember, this variable will automatically fall back to the regular price if the current logged in user isn’t a Trade Account or if the product isn’t in a discounted collection, so no need for an if statement.

If you’d like to conditionally show the original price, perhaps with a strikethrough, to indicate that the discount is being applied, add the following:

Most of the hard work was done in The Product section, so we can reuse the snippet that we created earlier.

Next we’ll need to find where the collection products are getting looped, we need to make sure to include the snippet inside the loop so that the price can be recalculated each time. In most themes the actual product info will be included to keep collection template clean — this will look a little different per theme, so check for something that looks like this:

In the above example, we need to look for a snippet called product-item.liquid. Inside the product item snippet, we can include our calculation snippet to render the trade price.


In the product-item.liquid snippet find where the price is getting output (eg: {{ product.price | money }}), and replace this with our calculation snippet:

Please note that the variable used is still product which allows us to use this shorthand syntax, if the collection products loop used a different variable name like prod, we’d have to update the snippet like so:

Once again, you can include the earlier snippet to show the original price here too.

Apply the updated price to the cart (again)

Now that the Product and Collection pages have been updated, it’s time to come back to the Cart page and apply the discounted prices and totals here.

We’ll need to apply the discount to each line item in the cart, keeping the quantity in mind too. Find the line that starts looping over the items in the cart, it should look something like:

Once you find the price, replace it with our calculation snippet, ensuring that we pass in the line item’s associated product, e.g:

Remember the qty variable I mentioned earlier? Before showing the trade price this time, we need to multiply it by the quantity of the item:

Our last step is to calculate the cart total price:

Next, in the cart.liquid template/section find where the cart total price is getting output (eg: {{ cart.total_price | money }}), and replace this with our new variable:

The Cart page should now reflect all the discounts that are offered to the Trade Account users, while regular users will continue to see the normal prices.

It may be useful for customers to know or be able to double check whether they have been given a Trade account. Using our trade-account-check.liquid snippet, we can output an extra line on the Account page:

And there you have it - wholesale functionality without the bugs, or the cost, of a Shopify app.

How to create Shopify wholesale accounts without an app

Unless you want the hassle of updating assets across multiple Shopify themes manually – not to mention all the issues that come along with it (and, believe me, you don’t) – then you’ll need a single repo for all stores.


But Shopify multi-stores and GitHub don't exactly play nicely together out of the box. Now that we’ve got the CLI and GH integration, it's a lot better. Not perfect, but with a little bit of dev work, it can turn out fine – for the most part.

Here’s how we’ve made managing multiple Shopify stores a whole lot easier. All it takes is a simple setup and a couple of changes to the theme management process.

The problem with the GitHub integration on Shopify is that things change on both sides. Apps inject things, assets are added, the list goes on. But the prime conflict culprits are JSON templates.


JSON templates are basically a flat file structure approach to the CMS. Every change you make to a JSON template is saved to the store files rather than a database. This is normally fine, and pretty handy most of the time because you know that any changes your client makes to the store customiser are automatically backed up to GitHub. Plus, it's super easy to then get those changes locally just by pulling the theme branch.


Where it gets tricky, however, is multi-stores running off the same theme. For instance, when both of those stores use the same file to load their contact page address, but they need to have different text, that's conflict territory. Not where we want to be.


So this is where things begin to get tricky. We want both stores to save their data to the repo, so everything is backed up, yet we want them all to run from the same theme so that when we add new features, it's sent to all sites and we don't have to copy code from one theme to the next. I've worked on sites with a repo per store, it's not fun!


Well, there's a solution that we're using at Series Eight and it's working pretty well for us so far. It's quite simple to do, too – just a little bit of setup on GitHub and some common practices when adding new features or working with Shopify themes.

First, you'll need to consider how your repo is structured. What we've found works best is working with a main branch, and then when new stores are needed, we create independent branches for those stores. For example:

Each of those branches is the live store theme connected via a GitHub integration. Now, clients can edit those stores' customisers individually and everything is backed-up. Problem one solved.

Now, imagine we're working on a new feature. We start by branching off the main branch. We'll do our thing then PR or merge our feature branch into the main branch, so that main is always in line with the latest codebase. From there, we can merge the main branch into each of those store-specific branches and our new feature is now on each of those branches too. Problem two solved - well, almost.

There are some small issues still, and doing this with one or two sites is fine. But what happens when there are five? Or 13? (Yeah, that's been a thing). That's a lot of merging...

Apps inject things. Random things. Lots of random things sometimes. Those apps are sometimes specific to one store, or use unique IDs. I'm not sure if there's anything clever you can do about this. With some apps/IDs, you can offload to CMS fields in the customiser (Header Scripts, Footer Scripts, GA ID, App Section embeds, etc.). Other times, a simple conditional will have to suffice.

Slight issue #2: Working with store-specific JSON templates.

Pretty rare, and super slight, but if you're trying to debug an issue with content-specific to one of those stores' JSON templates, you're not going to have access to that content on the main branch. You could branch off the store branch, but if you end up changing template code, you're going to want to merge back into the main branch to fix it on the other stores, too. There are probably a few ways to deal with this. The simplest way I've found is to just copy-paste the contents of the JSON file from the production theme file editor into the Shopify Development Theme file editor. This way, your "local" development environment can match any of the store's content and you don't have to worry about accidentally adding something on the main branch because it isn't part of your codebase/PR.

Take it from our people people

Top AI apps right now: design edition

4 ways to reduce technical debt during front-end dev

Why the last thing you should cut corners on this year is your branding

New year, new teamies

We’re up for Agency of the Year!

10 Figma plug-ins all designers should know about

2022 in numbers

Seasonal shipping: how to be Christmas and Black Friday-ready when it comes to fulfilment

How localised shipping can help drive conversions

How to create Shopify wholesale accounts without an app

How to manage multiple Shopify themes with a single GitHub repo

How to maximise subscription-based sales (at a time when everyone's feeling the pinch)

Let us take you further than you’ve ever been

Take it from our people people

Top AI apps right now: design edition

4 ways to reduce technical debt during front-end dev

Why the last thing you should cut corners on this year is your branding

New year, new teamies

We’re up for Agency of the Year!

10 Figma plug-ins all designers should know about

2022 in numbers

Seasonal shipping: how to be Christmas and Black Friday-ready when it comes to fulfilment

How localised shipping can help drive conversions

How to create Shopify wholesale accounts without an app

How to manage multiple Shopify themes with a single GitHub repo

How to maximise subscription-based sales (at a time when everyone's feeling the pinch)

Let us take you further than you’ve ever been SCHEDULE A CALL

Let us take you further than you’ve ever been