"i only speak liquid" #25: Thinking in terms of Sections and Blocks

Hey all 👋!

Welcome to 'i_only_speak_liquid' by Storetasker, where active Shopify developers like me (Billy) share learnings we face daily. This is my 1st edition! 

PS: I'm a developer on Storetasker; Apply here if you want to join Storetasker's gated network of vetted Shopify developers. 

What I've been thinking about

In both my agency work and in freelancing, a common message I receive from clients goes along the lines of ‘we are having this problem… Can you install this app for us…’

Clients often come from a non-technical background and are usually looking for the quickest, and cheapest solution to fix their issue. This definitely isn’t wrong, the Shopify App Store is full of so many amazing apps that are critical in most businesses and can quickly allow you to roll out new features. However, as I work on more and more projects, I am seeing so many opportunities for developers to build custom solutions - I would like to propose a new way of thinking, and it’s the idea of thinking in terms of Sections and Blocks.

With the rollout of ‘Sections Everywhere’, Sections have become an integral part of every Shopify store’s customization and allow you to reuse ‘modules of content’ across the whole website, this is a concept most merchants are aware of and usually have a decent understanding of how they can use them to update their store.

I’ve worked on planning out features for some of the biggest brands on the Shopify platform and in doing so, I’ve learned to take the idea and break it down into its most simplistic form. This usually starts with just seeing if the new feature needs to be added to an already existing area on the site through a snippet or block, or does it actually need to be its own standalone section. If it’s the latter, it’s usually going to have more settings and require some more planning. 

From this point, I’d then make the decision on whether we need to use blocks or not. Blocks are very helpful when there are many pieces of different information that we need to store and utilize within a section, for example, if we just need to have a heading and paragraph of text, these would be perfect as section settings, especially because we know exactly how many pieces of information we need to store. However, if we wanted to store many images for a carousel but we’re not sure how many and the client also wants to add different links and headings, blocks quickly become a much better solution.

You’re probably thinking ‘We know this already’ and ‘How is this thinking going to change the way I build projects’, so I want to go through so more advanced examples I’ve come across in the past and show how these brands may have actually built the feature, these are also often the ones that clients end up using apps for.

Mega Navs

Mega navs are something I work on a lot for clients and from speaking with other developers, I know that we all run into the same problems when working with Shopify’s very basic navigation setup, it definitely requires some creative thinking to be able to add all the custom features clients ask for. 

You can see that Gymshark has featured content spots under each main category within the navigation, you might be thinking ‘How have they managed to add the images, text, link, and new tag all within the navigation setup’. There definitely are ways you could do this within the navigation setup, for example having the link title field contain the image URL, text, and new tag, e.g. [image_url_here]New Releases[badge_new] and then using Liquid to grab all this information and format it in the correct way, however, that’s quite messy and I can guarantee the client will forget how this works after a while.

Another approach that I’ve actually recently used on a big project was to have blocks set up under the header section that has a Parent Link Title to allow you to link the featured content within the block to the actual link in the navigation. This is a much more intuitive approach for the client and allows you to create as many block settings as you need for all the additional customizations, as well as provide detailed labels for each setting.

Bundle Builders

I recently worked on a bundle builder that was very similar to the one on Represent Clothing’s site. We originally explored different apps that were available, not only did a lot of them not have the specific features we needed but they also lacked the styling customization that would be needed to make it fit in with the rest of the site - This is a huge problem because as you work with brands who care a lot more about their brand aesthetic, you need to ensure that every piece of work you do matches their brand guidelines - So we actually began exploring how we could build it from scratch, implement all the features that were required and have a completely custom design that was very unique compared to their competitors. 

We created a new section that had blocks for each stage of the builder, these acted as the categories and each block would have a set amount of product settings so that the client can choose which products are displayed under that specific collection.

Product Quizzes

When you have a selection of products and customers choose them based on subjective opinions, it can often be quite difficult to ensure that they are shown the right product - Product quizzes are a great way to find out information about your customer and provide them a tailored experience to suggest a product that meets their needs. From a first look you might think that it would be very difficult to build one using only Liquid and Javascript, however, I actually just finished working on one and was really happy with the solution we went with.

We were able to use blocks for each stage of the quiz, so each one would have a setting for the question text and then a set number of answers. The answers would have a setting for the text that is displayed and the value that we would use in the code.

So as the customer is choosing an answer to each question, you can just update the front end to display the content from the next block. You’ll still need some kind of logic in the code to ensure that the right products are recommended, we chose to go with a point system where each answer value has a value attached to it, and through a config table, we could match products to the specific amount of points.

There are many more examples I’ve run into in the past but these are 3 quite common ones I notice regularly. You may have read through all of this article and still think that you need an app for your specific use case, and that’s totally fine! But this is definitely something to keep in mind for when you’re working with an app that just isn’t meeting all your needs, it’s worth breaking down the problem and exploring ways you can build a solution. Even if clients have restricted budgets, they’re often very open to paying the one-off development cost instead of the monthly payments for an app when you break how much it will actually cost long term. 

3 links you can't miss

1. Shopify Examples - This is an amazing resource that curates some of the best Shopify stores and lets you filter by very common features. I’ve used it many times when I’m not working with a designer to help guide me in the right direction. Plus it’s also great to see some sites you’ve worked on be featured as well.

2. Balance - If you’re anything like me, you’ve gone through many different methods of tracking time. Balance is definitely one to look into.

3. Bento Link in Bio - Despite being developers, we’ve definitely all gone through times where we try to build our personal sites and then end up getting side-tracked. If you’re currently going through this, here’s a really nice link in bio service that you can use in the meantime and it uses the popular Bento Grid style design

One app I like

I’ve worked with quite a few different product option apps and I really enjoy working with Mageworx’s Advanced Product Options. I’ve recommended it to quite a few different clients after they found huge bugs with other similar apps and the number of 5-star reviews speak for itself.

You can very quickly get it set up on stores and begin adding additional options to allow merchants to provide custom products to their customers.

One learning as a freelancer

When you’re early into your career, it’s definitely a good idea to explore many different opportunities and learn as much as possible. But once you start getting more advanced, I’ve found that it’s actually really good to narrow down the type of projects you work on. This will allow you to become a specialist in that specific area and provide better work for your clients. There have also been many times I’ve worked on projects that I’m definitely capable of completing but they end up taking a lot more time than expected because they aren’t my forte, whereas I could have stuck to when I enjoy most and made more in the time it took me. 

You might also be familiar with the quote ‘Riches are in the niches', this is definitely something I’ve found to be true and you’ll often have a lot more clients reaching out if you specialize in a specific area. 

Speak in 2 weeks!

Billy (linkedin)