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

Show me more

L&D is a big deal round here. Every other week, each S8 teamie gets a full day to focus on personal growth. Here’s why we think dedicated L&D days are the way to go.

It’s easy to talk the talk when we say we’re creating a culture of continuous learning. But L&D days really do help us do just that. Personal development isn’t put on the back burner or forgotten about until annual reviews roll around – it’s front of mind for all of us. We’re building better habits when it comes to learning new things, challenging ourselves and expanding our skill sets. And that can only be a great thing, right?

Because L&D shouldn’t be an afterthought

L&D shouldn’t be left for ad-hoc downtime. By putting two full days in the diary every month, we give ourselves a realistic amount of time needed to study, practice and learn. But most of all – we make our L&D more purposeful. Having that dedicated time makes setting (and smashing) SMART objectives way easier than if we were picking up the odd hour here and there. And seeing progress only spurs us on.

Back in the day, we’d spend the last four hours of the week on L&D (RIP 50/50 Fridays). But nowadays, each of us gets a whole day set aside in our schedule instead. We switch our Slack statuses to ‘Do not disturb’ for the day, say no to things that aren’t urgent, and generally just get our heads down. Try it – you’ll be amazed at what you can get done with a whole day of focus time.

L&D isn’t just reserved for junior teamies, or those who have the luxury of a little more time on their hands. Project managers, designers, copywriters, developers – we should all be allowed to learn new stuff. No matter how busy you are or whatever your personal goals may be, we all get the time we need to develop in our way. And the more we can learn from each other in the long run, the better our work will be.

Why we dedicate two days a month to L&D

More from the journal

In the design world, it feels like UX gets talked about a lot in terms of rules and best practices. But UI, not so much. So when we recently got to talking about our top UI design tips, we couldn’t not share.

It all started with one simple question:

UI design tips: a thread

Back to the journal

Shopify’s latest seasonal updates have dropped. Worth the wait? We certainly think so. Here’s our round-up of the best feature updates from 

Simplify even the most complex catalogues

 feature will rescue us all from hours of admin. By mapping predefined variants to specific categories, managing and creating products in even the most complex catalogues just became super simple.

For example, name a new product "Wool sweater" and Shopify will automatically suggest the category of "Clothing" > “Shirts & Tops”. And once you’ve got the category down, all you need to do is fill in the recommended attributes. You can even upload photos of the same product in two different colours. Shopify will identify both and list them separately under the "Colour" attribute. Because it’s smart like that.

. You’ll only be able to use it if you’re on Shopify Plus – but, it makes the shopping experience even more seamless. Instead of hopping between separate PDPs to browse different colours, materials and dimensions of the same product, your users can see it all in one place.

But that’s not all. You can now give each variant its own unique URL, title, description and media gallery. A big tick in the SEO strategy box.

. Not only does it give you built-in product search functionality, it enables you to filter and sort collections of any size. Plus – you get a powerful recommendation engine, too.

But Shopify is now making its search feature even more versatile. By combining the classic keyword matching with semantic search, your customers can now search for products using natural language, like: "Red dress for a wedding" or "Something warm to wear in the winter". Told you it was clever.

Shopify is always finding new ways to customise the checkout experience. This latest update has meant us developers can now tinker with the 

 feature is continuously gaining new APIs, updated cart validation functions and more customisable UI elements, which means even more personalised checkout experiences aren’t far off.

For us, performance is always a biggie. We’re continuously testing and analysing everything from site speed to user journeys, so we were stoked to see that Shopify is making it even easier to keep an eye on performance.

, you can now monitor the performance of your storefront with real users' data and get insights on how to improve things. A great tool to make sure that your customers are always getting the best experience possible.

Picture this: you hired a professional photographer, rented a location and shot all your products from every angle. Weeks later, you realise you need to tweak an image or remove the background.

Well, the days of digging out the photographer’s details or finding a new date for a reshoot are over. With Shopify’s new 

, you’ll be able to make minor image edits on the fly. We can’t say for sure how great the results will be, but we’re keen to see how well it tackles simple tweaks.

Shopify Winter Editions 2024: our top picks

Join us

Recently, the S8 crew grew by two… Emmas. Both are based in the UK. Both are super talented. And both are here to tell us a bit more about what makes them, them.

I’m Emma B, S8’s newest PM 👋 My job consists of many things like scheduling our amazingly talented designers and developers, making sure projects are running on track, and being there for all of our client's needs.

I’m originally from the Lake District, so I was lucky enough to grow up surrounded by beautiful mountains and lakes. I now live in Harrogate, so spend a lot of my spare time exploring Yorkshire with my partner and our dog Panda. She’s a sassy miniature sausage dog and she really keeps us on our toes!

I spent a lot of my working life in London, working for companies such as Burberry and Universal Music. It was great to see how these huge corporations work from the inside. Plus, a big perk of working in music is you get to go to free gigs and events.

I love to travel and have recently got back from a trip to Japan. I had wanted to go for years so it was a huge bucket list moment. We also love Southern California (Santa Barbara is our happy place) so we try and go back every few years if we can.

Emma G, UX/UI Designer + Webflow Developer

I’m Emma – the newest member of the Design team 👋

My day-to-day role is all about using my knowledge of user experience and design best practices to create interactive wireframe prototypes and UI design concepts. Then, we’ll keep refining our ideas until we have something both we and our clients love.

I was born and raised in Yorkshire, migrating in the last few years from York to Leeds where I’m currently based. I live with my eccentric little Persian cat in an old Edwardian period home which I’ve spent the last few years renovating back to its former glory.

I’m an avid hobby collector and love learning new things and skills. When I’m not doing the odd DIY job around my house, I’m usually found figure skating, playing pool with friends, horse-riding or listening to a good podcast.

Introducing…Emma²

From projects to pets, you can bet there’s an S8 Slack channel for it. We use Slack for everything from general chit-chat to client comms – and we’re always searching for ways we can use it better.

Here are 6 tips for getting the best out of Slack and making everyday work a breeze.

It’s great to be in the know. But choosing what you get notified about and when is key. We’re pretty considerate when it comes to channel shoutouts, so we’ll notify teams (i.e. @designers, @pmz and @devs) for team-specific things – and only hit @here for the super important stuff. Some of us choose to only get notified during working hours, while others have set up alerts for specific keywords. But we aren’t afraid to mute channels or pause notifications if we need some focus time.

The ultimate to-do list tool. Hit the ‘Save for later’ icon on any messages or requests that you can't take action on right away and they’ll be stored in your Later list. You’ll then be able to organise items into ‘In progress’, ‘Archived’ and ‘Complete’ – plus, you can even set up custom reminders if you need nudging on anything time-specific.

Connecting your tools and apps to Slack means less juggling and jumping between things. We’ve synced up Slack with our most-used platforms and tools, including ClickUp, Figma, and Google, to make sure we’re immediately notified of any new tasks, comments, or requests. But our other favourite apps include Polly (for polls) and Timetastic (for time off).

Who doesn’t love a keyboard shortcut? Turns out Slack has a keyboard shortcut for pretty much anything. To check out all the shortcuts and familiarise yourself with the ones you’ll need, just hit Cmd + / (MAC) or Ctrl + / (Windows/Linux) in Slack.

Huddles are already great for ad hoc catch-ups. While the average booked-in meeting is 30 minutes, most Huddles tend to last around 10 – which already means a big tick in the productivity box. But you can use the Huddle Thread to drop in key action points, useful notes and more – then follow up afterwards or even ‘Save for later’ if you want to refer back to your notes during focus time.

We’ve recently set up Workflows to help fast-track the onboarding of new teamies. In a couple of clicks, new Slack users are added to all the social, project and team channels they need to be in – rather than waiting to be invited manually. Plus, we’ve created a built-in employee handbook in Canvas format so we can quickly access handy links and policies around things like booking holiday (yay!).

Our top Slack hacks for productivity

If there’s one annual conference we carve out time in our diaries for, it’s 

. Because there’s nothing we love more than nerding out with other devs about what’s new in the world of the web.

Here are our top takeaways from this year’s talks courtesy of Lead Developer, Alistair.

'Web standards: does anyone actually care?' by Michael R. Lorek

Michael R. Lorek kicked off the day with a talk about Web Standards, why they’re important and the state of the web currently as they relate to Web Standards. A perfect talk for this conference given it’s run by London Web Standards!

The key message Michael was getting at was that it’s really important to publish high-quality work on the web, and some of the things we need to consider as web developers to do so. He mentioned that HTML and CSS validation and testing the security of sites using pen-testing methods are really important for security and are very rarely done within the industry.

I definitely agree that for security and code maintainability, validation is really important. One argument he used was that it was also important for SEO. However he then went on to show that basically none of the top 1,000 sites have valid HTML – so you could argue that it doesn’t make much of an impact on SEO!

'It all means nothing in the end' by Amy Hupe

Amy Hupe is known best for her work on design systems and documentation, but her talk at SotB23 was on burnout and finding value and meaning in your work. It was absolutely fantastic, really making us think about how to work best in the tech industry whilst also caring for ourselves, our emotions and self-worth. It was also one of the funniest conference talks I’ve seen, perhaps only beaten by a previous talk of hers!

The inspiration of the talk was that Amy found she really didn’t care about her work. She had burnt out, lost the passion and drive for design systems and the tech industry, and was struggling with the fact her self-worth was somewhat tied up in her work. That’s a feeling that I’ve also felt before, when I’ve pushed with all I had to get a project over the line and then felt like sitting at a computer is the last thing I care for.

The best thing about this talk was the key points that Amy made about how best to structure the relationship we have with our job to keep ourselves validated and motivated whilst also enjoying and thriving in our work:

Having times where you’re not fully invested in your work is fine, but if you work a full-time job it’s not a solution for happiness.

We all have a “core perspective” that shapes how we see and interact with the world. Amy defines that as a combination of your skills, experience and values. By identifying that perspective and aligning it with our work it will help us be motivated, productive, feel successful and, most importantly, happy.

Goals we make should align with our core perspective, but also should be achievable. Setting up impossible goals is a great way to disappoint ourselves. In Amy’s own words: “**** Moonshots”

It’s important to feel validated and successful, and we come to rely on certain structures to achieve that. Within big organisations, that may be promotion trees. On social media, the number of likes. By relying only on those structures, you risk losing your main source of validation so it’s key that you can also validate yourself based on the goals you’ve achieved also.

Amy gave us all a lot to think about, and it was an absolutely brilliant talk. It’s only been a couple of weeks but already I’m feeling better about the changes I’ve made to how I make goals, aligning my work alongside my core perspective, and making sure that both within and outside of work I’m enjoying how I spend my time!

'Accessibility is easy… except for when it isn’t' by Ian Lloyd

I always love an accessibility talk. State of the Browser always has at least one each year and they’re fantastic. And this year was no exception. Ian Lloyd gave a fantastic overview of some easy and really tricky accessibility points, featuring lots of examples, some serious stuff and also some great laughs. I loved that format – it makes me think I should put more jokes, memes and references in my talks…!

At the beginning, Ian covered some simple accessibility issues that most of the audience were familiar with, things like image alternative text, using headings and buttons etc. We then had a run through of “Accessibility Horror”, with some awful examples of developers getting it completely wrong in silly ways!

That was the “Accessibility Is Easy” bit done!

The “Except for When It Isn’t” for the rest of the talk was absolutely fascinating, and really went into the details of how you can make really complex UIs accessible. When it comes to accessibility, I know my stuff and do audits and such, but it was really evident how much experience Ian has – fixing some UIs I wouldn’t even know where to start with! It was extremely interesting to see how he went about working out interfaces that don’t match common patterns, like tab controls within a table, a theatre seat picker, multi-select menus or the “DiaMenuClosure” he showed.

Really inspiring and balanced, so it offered some new information to everyone in the audience — something very tricky at a conference with a fair few accessibility experts attending!

'Stop using JS for that: moving features to CSS and HTML' by Kilian Valkhof

I was really looking forward to Kilian’s talk because he has a really interesting insight on browsers and development. He develops the web browser 

, which is designed to make it easier for developers to debug and test the websites they build. That gives him a really interesting perspective on the industry, seeing what tools developers are using and what they’re testing, whilst also having insight into what makes a browser tick. This talk wasn’t about Polypane though, it was about HTML, CSS and how they can take the place of JavaScript.

It was a really good review of some of the new-ish features of HTML and CSS that have had support for a few years, but aren’t always being used in favour of JavaScript replacements. Browser vendors listen to developers and have been implementing features like accordions, input suggestions, smooth scrolling and dialogs, all in HTML and CSS. I’d recommend watching the recording to see them all, Kilian does a great job of demonstrating!

Two tips he mentioned that I found really interesting in particular was how the CSS appearance:none works to make replaced-elements styleable (I never knew what it did), and to use outline-color:transparent on a focus outline for free support for forced-colors mode!

This was a thematic masterpiece, with an ocean-themed talk on Progressive Web Apps with sea graphics and Attenborough-style narration throughout! Diego gave a really interesting overview about PWAs, their history, how they work and what the future holds for them.

It was looking at some of the future directions and options that really caught my attention, including some of the really challenging issues with implementing them. We want users to be able to easily see a site is installable, but don’t want spam popups like we have with web push notifications. We want to offer lots of new capabilities but how should we restrict them?

Although some of those decisions, challenges and options are really tricky and I don’t have an answer for them, Diego’s talk brought them to my attention and made me think. It also reassured me that even if I don’t know what the answer is for PWAs, the web community is wary and mindful of getting it right.

'Cache rules everything' by Harry Roberts

Harry has done some fantastic web performance talks and this is no exception. He went in-depth and focused on the HTTP cache, how to set it up correctly and some of the pitfalls and mistakes people commonly make. We were asked to put our hands up if we knew caching headers in-depth — I raised my hand and oh boy I was proven wrong!

Once again check out the recording as it really goes into the exact details of how caching works, what headers to keep or remove, how to come up with caching strategies and how caching works on public and private resources. It really was a complete and fantastic explanation of something that seems simple but really isn’t!

'Speedy dev insights' by Chris Ferdinandi

Chris put together three short pre-recorded videos that were played between longer talks, giving a bit of a demo and some tips on a range of development stuff.

The first was building a custom Web Component, which are web-native ways to build custom components in JS. I’ve found Web Components can be a bit tricky to learn, but Chris made them look easy!

 two was on data binding using Proxies, which is super cool! In our websites we use Proxies through Alpine but it was really cool seeing how you can also work with them directly!

The final insight was a rapid-fire run through of 13 smaller tips, really delivering on the “Speedy” promise! There were some great tips in there that you could use in day-to-day development. Unfortunately, he then went and spoiled all the good favour he’d gathered from the audience by trolling us and mispronouncing GIF. What a shame!

'Exploring the potential of the Web Speech API in karaoke' by Ana Rodrigues

As the end of the day approaches at a conference, and the attendees start looking forward to the afterparty and dinner, it can be a bit tricky to keep everyone engaged. Ana had absolutely no problem with that however, with a brilliantly entertaining, fun, and interesting talk on karaoke in the web browser!

The Web Speech API is a new in-built browser feature that allows developers to receive audio input and easily turn it into text, without need for a third-party service. Ana decided to build a karaoke machine using web technologies and added the Web Speech API to score her singing!

It was great fun and a really good walkthrough of how she built it and how the Web Speech API works! It was also really impressive for her demonstrating the karaoke machine by singing, during her first conference talk!

That final talk got everyone excited and energised again, just in time to go to the pub for the afterparty!

What we learned at State of the Browser 2023

Last weekend, we all downed tools and gathered in Prague for our annual team retreat. Four days, 24 teamies, and more merch than you can shake a schnitzel at. Here’s the full round-up of what went down at this year’s S8 (+P9 👀) team retreat.

Our base for the week was Prague’s Mama Shelter: once a luxury communist hotel, now home to vintage cartoon reels, a restaurant DJ and foosball. The Cyprus crew (who arrived the night before) and the other early arrivals got stuck into some Georgian dining and castle-touring. But it wasn’t long before we were all united (some of us for the first time ever) over drinks in the bar that evening.

The next day was all about Czech culture. Coffee shops, beer halls, and chimney cakes – all while soaking up the last of the autumn sunshine. That evening, we learned about the history of the old town, the new old town, and the old new town during a city tour with a night watchman. Our favourite fact? Once upon a time, the city’s residents were told to drink three litres of beer a day to stay healthy. They even used beer to put out fires (but we have a feeling a few were started on purpose).

Day three kicked off with escape rooms, where we divided and conquered everything from zombies to dark magic. We only found out afterwards that those who escaped first got to watch the remaining teams struggle. But one thing we were all 100% certain of was that “our room was the hardest”. After testing our teamwork skills, our resident photographers Bruno, Biel and Nate got snap-happy at Studio 71: a quirky basement studio and backdrop for our all-new team photos.

On the final evening, we all headed to the Medieval tavern, 

, for a traditional five-course feast in a setting that was straight out of a movie set. Think sword fighting, fire shows, and more Czech food and beer than we could manage. And for the final nightcap? A visit to one of Prague’s best absinthe bars, of course.

It’s not often we all get together. So every time we do, it’s pretty special. Shout out to Ellie, this year’s t-shirt and sweatshirt designer, and Sam and Jack – the merch mules who got it there safely. Big up Biel, for his ability to make any BTS photo look incredible, and also the trip’s official after-party planner, Rachael. But a special mention to Fran and Mario – for letting us put our out-of-offices on for four fun-filled days so we could hang out IRL.

S8 (+P9) team trip 2023: Prague

How to give better design feedback from a web design perspective

. But this time, we’re talking branding. Because great feedback means fewer delays and a new visual identity that everyone’s stoked about. Let’s go.

Branding tells a story – of who you are, where you’ve been and where you’re headed. The best brand identities have depth, character and meaning. It will look the way it does for a reason. And if that rationale isn’t immediately clear, then just ask. Your designer should be able to talk you through any exploration work, previous iterations, and how they reached the endpoint. If you feel they’ve swayed off track, then gaining a better understanding of the bigger picture can help set them straight.

We can’t emphasise this enough. Your brand is a many-faceted thing, so think about every single detail. Colours, typography, spacing, illustration – even photography style. It all comes together to create something that’s uniquely you. Take the time to say what you like, don’t like and why. And that goes for every single element. This will help get rid of any guesswork and prevent delays further down the line.

A brand refresh should stand the test of time, and this will always be top of your designer’s mind throughout the rebranding process. But it’s also worth considering this at every feedback stage, too. Does it align with your overall company strategy? Have you thought about swag placement, app designs, or any other assets you have in the pipeline? Your brand will naturally evolve, so you can afford to make small refinements. But you still want it to work for the long term.

The great thing about design is that it’s subjective. And when you’re going through something as big as a brand refresh, the more opinions you can gather from stakeholders, the better. Just be sure to resolve any conflicting comments before you share them with your designer. Plus, keep everything to Figma. It’s more efficient that way.

Designers can do amazing things, but they can’t do the impossible. Be conscious of contradictory feedback. Plus, be aware of accessibility, too. Your designer designs with users in mind, so if it doesn’t meet the minimum accessibility requirements, it simply won’t work. And finally, you might love the look of a competitor, but you aren’t them. So instead of asking to imitate their brand, focus on celebrating yours. The results will be way more inspiring.

Client-agency 101: How to give great design feedback (branding edition)

Providing feedback is part and parcel of working with an agency. But knowing how to give great feedback as a client matters more than you think. Fewer delays and pushed deadlines, less back and forth, and most importantly – the finished result you were hoping for. Here’s how you do it.

Say what you do like, what you don’t like, and always expand if you can. For example, instead of saying ‘I don’t like this, can we try something else?’ try ‘I like this style of font, but can we see it in a different colour?’ Or ‘I don’t think this photography style works. It feels too old school for our brand’ rather than ‘This image isn’t for me’. It’s this kind of detail that will help your designer nail it the next time round.

Provide everything, everywhere, all at once

Take the time to review the entire design so you can submit all your feedback at once. And the same goes for any other stakeholders who plan on providing feedback. Receiving everything at the same time, rather than in multiple rounds, helps us action amends more efficiently and minimises any hold-ups.

If the reasoning behind some design decisions isn’t clear, then ask for clarity. Your designer will have done everything for a reason. So if it will make providing feedback easier, then ask about previous iterations, design exploration, or just how it aligns with your brand mission, values and purpose.

Figma is great for giving feedback. Comment on specific elements, tag team members, and store all your thoughts and ideas in one place. Thinking of it as your central source of feedback means comments don’t get lost in Slack channels, inboxes, or Trello boards. It also lets your designer respond to you directly in threads if they need clarification.

Give guidance, but let your designer design

Screenshots, animation examples – even photography styles. If there’s inspiration that you feel will help the design process, then it’s always going to be useful. But still be open-minded enough to let your designer take the lead. They’ll know what works and what doesn’t and will have a clear overall vision for the project. So it’s important that feedback doesn’t impact creative freedom.

Client-agency 101: How to give great web design feedback

Here at S8, annual leave is a biggie. Everyone gets 28 days to cash in whenever they like. Plus, local bank holidays, a long Christmas shutdown, and extra days for our team retreat. Here’s why we think more time OOO is the way to go.

As a fully remote agency, WFH is all we know. But when you work from home, it’s even more important to get that work-life balance down. Your workplace doubles as a place for downtime. And although we’re big on flexible working – and choosing when, where and how we work best – it’s still important to step away from the desk and fully disconnect. Because with regular breathers come fewer burnouts and big productivity boosts.

Different locations mean different bank holidays

The fact we’re based in different countries means we all benefit from different bank holiday dates. Although we all get roughly the same number (except for lucky Biel in Barca), having that extra annual leave means we can celebrate our home country’s traditions the way we want to. Tag extra days onto already long weekends, travel to meet family during big festivities like Easter, or (if you’re based in the UK) turn the month of May into one big holiday.

A bigger holiday allowance means more flexibility when it comes to taking time off. Instead of weighing up whether to take time off at Christmas or squeeze in a last-minute summer getaway (especially if you’re holding out for great British weather) – you can do both. Plus, more holiday to spend means more time to really disconnect (or just get over the jetlag) and come back to your desk fully refreshed on Monday.

We all know that weird period between Christmas and New Year. You have no idea what day it is – or what the heck you should be doing. But in our book, the last thing on our minds should be work. That’s why we give ourselves two wonderful weeks to switch off, hit reset, and simply celebrate the holidays however we want to. It’s the best way to reflect on the year and come back with a brand-new focus for the year ahead.

Because there’s a whole world out there

We love what we do – partly because of what it enables us to do. Visit new places, experience new things, tackle house renovations, or just go hard on our hobbies. Those extra days of annual leave mean we can take time out for what’s really important. Plus, it means more travel/foodie/DIY tips for the rest of us.

Why our holiday allowance is hefty

Shopify's Summer '23 Editions is here – and there’s some pretty major announcements on the development front. Our Lead Dev, Alistair, outlines the biggest and best of this latest feature drop.

Bundles have always been something that is annoying to do on Shopify. We could build the functionality ourselves, but it took a surprisingly large amount of work. The alternative? Pay for a third-party app which adds additional dependencies and complexity to the site.

Now Shopify has implemented its own 'official' bundle system. It's only 'fixed' bundles at the moment, which means store owners need to specify exactly which products are in the bundle. But we're hoping that 'flexible' bundles — where a customer can pick which products they'd like — are added soon!

This one is huge! We've been working with subscriptions apps for a long time and the addition of an official integration will really shake the scene. Subscriptions are a core part of loads of businesses and we're all really excited to see how this could streamline and simplify subscription management.

The official app looks pretty simple compared to the big apps – and for a really well-optimised or custom setup, they'll still be the best option for a long time at least. But, for simple setups, Shopify’s new app looks ideal and will definitely open up subscriptions to more stores.

'Duplicating' a store has previously been pretty hard. We actually built our own internal tools to make it easier to spin up a staging store or to create a new store for a multi-currency setup.

Now when you create a new store, you have the option to copy your product catalogue, files and themes to the new store. Super handy for development and if you need multiple stores that are similar!

This is a really interesting and easy way to sell products from other brands in your store  – or, become a supplier yourself. You can choose a product from another company, add it to your store, and when someone purchases it, they handle the order, shipping and process for you!

Most exciting for me though is that you can do both! I love the idea of a group of stores with similar products 'teaming up' as suppliers and retailers to give customers the best possible purchasing experience.

So this might sound like the most boring sounding feature to come out of this Editions, but it's actually got us developers jumping for joy.

The previous limit of 100 variants sounds high, but it’s actually easily reached. I once built a clothing store that sold a specific jumper in Loose and Slim fit, in 6 different sizes and 10 different colours. That’s 120 variants.

So, the upcoming increase to 250 variants will make it much easier to build products with lots of options.

Customising content across B2B and Markets

Only a few weeks ago, a couple of our developers were wishing for this exact feature! Clearly someone at Shopify somehow got the message!

Shopify has added a 'context switcher' to the theme customiser, allowing store owners to change the content of the site depending on the customer’s Market (based on their location) or if they're a B2B/Wholesaler. You had a bit of control previously using Localisation, but it was pretty difficult to use, particularly with sections and blocks. Now if you need to change the content, images, products on display or anything else in the customiser per country or currency, it's as simple as going to that dropdown.

It'll be interesting to dig into how this feels to use, as it looks like it might be pretty easy to get confused about which context you're editing. Hopefully it's really clear and Shopify adds features to sync changes to make it easier to manage.

During the Shopify Editions Winter '23, I voiced our concerns about the deprecation of checkout.liquid and how Checkout Extensions didn't have all the functionality we needed. This is a definite step in the right direction from Shopify, giving a clear route forward for upsells and recommendations on the checkout page which were uncertain until now.

Similar to upsells, there were features we'd been relying on checkout.liquid for that there were no clear replacements for. Shopify has made it easier for developers to add or change the validation rules within the checkout. A regular request we get for the checkout is preventing users from shipping to PO boxes. Until now, the best we could do was add a warning banner above the address input for all users –  but still allow orders to PO boxes anyway. With these new validation rules, we can prevent checking out with a PO box and give the user more direct feedback that their address is invalid.

The editor experience on Shopify has been a constant bugbear of ours. It's not bad, but when you have a large site with lots of flexible JSON templates and sections, it can get really confusing. On some of those projects we've even gone to the extent of creating a 'cheatsheet' of screenshots of each section to help.

From a first look, Section previews looks like it will make managing sections a lot easier. There hasn't been much detail over how it actually works, is it automatically-generated? Or do we upload screenshots when we make our sections like we have to with other CMSs? It'll be interesting to see when it rolls out.

Flex sections look like they could be a huge addition, allowing editors to drag+drop blocks in a page more easily. The real proof will be when we can see how it's implemented – plus, how useful it is for third-party themes that aren't based on Dawn.

Sidekick seems really powerful and a great time-saver – particularly for store admins that just want to get the information they need and move on. In terms of finding information about your store and Shopify, it seems super handy.

Like many AI tools however, make sure you keep an eye on its output. We've seen Sidekick returning information about Shopify that is completely incorrect, and breaking themes when instructed to make code changes. Hopefully these will be ironed out, but it's worth being a little cautious with this one!

Shopify Flow is an automation tool that allows you to automate actions in your store with simple If-This-Then-That style rules. It's been available for a long time on Shopify Plus, but now it's available on all plans. Nice!

Metaobjects were the big star of Editions Winter ‘23, and we've been loving them since their release. Metaobjects make it so much easier to build advanced CMS setups that are still really easy to manage and edit. During our first development call after their announcement, we talked about our disappointment that they could only be used on existing pages and products, not be given their own URLs and Templates.

Once again Shopify listened! Metaobjects can now have their own URLs, allowing us to take that same advanced CMS setup onto the frontend of the site like many other full-on CMSs. Previously for a site with an event system, we'd be building that part on a different platform or by re-using blogs. But now we can build that system right into metaobjects in a way that makes more sense, works better for SEO and is so much easier to manage!

I'm really excited about this feature and looking forward to seeing what our team can do with it!

Klaviyo is a standard recommendation for our stores, providing really helpful and advanced email+SMS flows. We use them to help engage with customers and do effective email marketing. It’s the bread and butter of our sister agency Parallel 9.

That's why we're really interested in Shopify stepping up their digital marketing game with Marketing Tools, providing flows and templates that might just rival Klaviyo's at some point. They currently seem a little simple. But, for smaller stores with less complex marketing needs, they could do the job and keep everything nicely within the Shopify platform. Definitely one we've got our eye on!

Shopify Summer ‘23 Editions: first impressions and best additions

We’re rounding off our 5-part accessibility in design series with 

: how best to approach movement and animation on your website – and what not to do if you want to make sure it passes the WCAG’s AA accessibility testing.

First up, is motion bad for accessibility?

Believe it or not, a video background is actually a lot more accessible than a static image. Why? Because the motion allows users with accessibility needs to clearly differentiate the static content from the moving content – and that, friends, makes it much more legible.

You see this kind of format on common streaming services such as Netflix, Prime Video, Disney+, ITVX and iPlayer. The sites play trailers in the background of the hero – sometimes with shadows and overlays to help the text stand out more. For a refresher on colour contrasts and backgrounds, visit our 

How to make your movement and motion accessible

On the average website, motion makes up 20% of the user experience. It’s known to  increase interactions and sales on some sites, but that doesn’t mean everything should move. Overdoing it can result in really bad drop-offs and just frustrate users – so approach it with caution.

Guidance from the WCAG states that anything with motion on a website, whether it be a simple transition, video content or a gif, should never flash more than three times. Not only is it pretty distracting, but too much flashing can be harmful to users with accessibility needs.

Some accessible users might experience anxiety as well as vision impairments. This is why it’s so important not to bombard your users by causing everything to move at once. Time things intelligently – and don’t trigger anything too crazy at a point where they might be reading some important copy.

Accessibility in design - Motion

In this blog series, we’re unpacking all the vital areas of accessibility in design. It’s been a legal requirement since 2017 for websites to meet the AA criteria outlined by W3C – the global community that believes in a web for all of us – on anything.

 – something that’s super important not just from an accessibility standpoint, but for general usability, too.

We all know how important first impressions are. But put this in the context of a user’s first interaction with your brand, and the stakes just got higher. And that just goes for those that don’t have accessibility needs.

The snap decisions that a user makes could be the difference between them trusting, buying or even engaging with you or not. And when you strip away all the other elements of your brand and are left with just the plain-text format of a screen reader, you can see why it’s so essential for your content to be structured as intelligently and logically as possible.

Let’s take product descriptions, for example. The goal is to draw your readers in, build trust, and encourage them to convert. Do we talk about features first? Or should we start with product names? Navigating a page with a screen reader means your content will be presented in the order it’s positioned, so it’s important to get it right.

If they’re using a screen reader, the user will see the name of the product first. This means they may not know what they’re looking at.

A screen reader would tell this user what the product is before talking about its features. Visually, it feels much more desirable to non-accessible users, too.

Your path to purchase should be suitable for all users – both the skimmers and the in-depth readers. And the fact that this is your primary CTA should also be reflected in your content hierarchy.

But we’re not just talking preheadings, headings, and sections on the page. Your button hierarchy is important, too. Think about users that could be browsing through your site and trying to quickly find a contact or “buy” button – only to find all the CTAs look the same.

As a general rule of thumb, make sure no two CTAs in the same port follow the same styling. This makes navigating your content, and committing to a call to action, much easier for the user.

Accessibility in design - Content hierarchy

If you’ve already been following our accessibility in design series, you’ll know that we’ve so far covered colour testing, typography and legibility. And if you’re new here; welcome.

This time round, we’re chatting about the impact of 

 on accessibility. As many as 20% of audiences worldwide require some kind of accessibility in the digital world – and so we’ll talk you through how we make sure our UI elements meet the W3C’s minimum AA standards.

Why are sizing, spacing and states important for accessibility?

Short answer: all three are key to usability. The spacing, sizing and overall alignment of your UI elements play a huge part in how your users interact with elements and differentiate between page content.

States are the visual representations we use to communicate the status of a component or interactive element.

States allows all users to navigate through your website without the use of a mouse and only a keyboard. If you’ve ever tabbed your way through a website, the visual representation you see to demonstrate the element you are on is a focus state.

And when it comes to accessibility, you may have users that simply don’t have access to a mouse – or, you could have audiences that aren’t able to use a mouse at all. That’s why states matter.

Here are some examples of elements and their states.

The holy grail of grid systems. In web design, the sizing and spacing of every UI element should be in increments of 8px. Why? Because not only will your designs convert seamlessly to rems (for development), but it makes designing for different screen sizes super simple. Every viewport is an increment of 8px, so every element within a page follows the same rule and gives you the best responsive results.

A couple of tips when it comes to spacing.

2022 in numbers

20+ go-lives

11 rebrands

8 new teamies

2 awards

1 internal rebrand

And a team trip to Ericeira

Why we dedicate two days a month to L&D

4 ways to reduce technical debt during front-end dev

Let us take you further than you’ve ever been

2022 in numbers

20+ go-lives

11 rebrands

8 new teamies

2 awards

1 internal rebrand

And a team trip to Ericeira

Why we dedicate two days a month to L&D

4 ways to reduce technical debt during front-end dev

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

Let us take you further than you’ve ever been