Just like any web project, coming up with ideas and features is one of the most enjoyable parts of the process. For developing Shopify themes from scratch, you may enjoy the ideation and design process. Speaking as someone who has built a whole Shopify theme from scratch, I can say that the process can be painstaking. Everything from setting up your environment for development to designing the interface can be a struggle. So, I made a list of lessons that I learned from creating a Shopify theme from scratch.
This one is obvious. Don’t leave too much to the imagination because a developer’s job is to convert a design into code. It sounds simple, but the difficulty can range. Remember, some of the best online stores have very simple designs, and some Shopify themes are variations of existing themes. So, always have a reference, especially if you don’t have a designer.
Go to your developer tools in your browser and see what a website did. Don’t be afraid of taking ideas from another website. If you’re new to development, this may not seem obvious but no one would care where you got an idea from. Unless they have a license on their code, you should not feel obligated to recreate the assets yourself. Save yourself the time and build on the work of others.
Not only do these libraries save you the trouble of creating utility code for your theme, but they also save you the trouble of coming up with a design system. Bootstrap, Tailwind, and the other libraries do most of the work to provide a consistent, professional look and feel for your designs. I strongly recommend using and building on their existing utility code. I’ve used Bootstrap for plenty of projects. They have a very direct and easy-to-understand system that looks nice for any project when used the right way. If you plan to use its components fresh out the box with no styling, you need to change that game plan. The most effective use for bootstrap is in fact in its utility code.
Several teams created very elegant solutions to common problems in creating website interactivity. For example, Splide, a lightweight carousel, can help build a carousel for a theme in a matter of minutes. Gsap helps developers create awesome animations, and the list goes on. Overall, there are many javascript libraries that can streamline the theme development process.
If you want your theme to have predictive search, you need to use the Predictive Search API. Now, there is a repository on Shopify's Github that has all the code to get you all those features and more. The team who built the now deprecated Slater CLI tool made a library of code for Shopify’s APIs. The code significantly streamlines the development of code that interacts with the Shopify APIs.