Mode
We were approached by Mode with designs that they needed to be developed on Shopify. We created a custom theme with micro-animations, color-fades and transparent videos while still maintaining a good page speed and adding dynamic editing features.
Drag
Building a Shopify theme that performs well can be quite a challenge, especially when utilizing high-quality assets and numerous animations. Through the implementation of some clever techniques, we were able to achieve a balance between maintaining a good page speed and incorporating the desired assets and animations without any compromises on design or concept.
The client wanted to showcase transparent video sequences on their website, which is unfortunately not achievable with video files. Together with the client we found a clever solution by using sprite sheets instead. The reason we chose sprites instead of gifs is that they maintain the quality of assets, which was a requirement throughout the project.
In game development, spritesheets are image files that contain multiple frames of animation for a character or object. By using spritesheets, developers can reduce the number of image files needed to create an animation, which leads to faster load times and smoother gameplay. We recognized the benefits of incorporating spritesheets and implemented them to enhance the overall performance and user experience of the page.
The client wanted to showcase transparent video sequences on their website, which is unfortunately not achievable with video files. Together with the client we found a clever solution by using sprite sheets instead. The reason we chose sprites instead of gifs is that they maintain the quality of assets, which was a requirement throughout the project.
In game development, spritesheets are image files that contain multiple frames of animation for a character or object. By using spritesheets, developers can reduce the number of image files needed to create an animation, which leads to faster load times and smoother gameplay. We recognized the benefits of incorporating spritesheets and implemented them to enhance the overall performance and user experience of the page.
Mirco-animations aren't just limited to desktop devices, they also work smoothly on mobile. Our team makes it a priority to fine-tune every little detail on each page we create, guaranteeing a cohesive experience across various screen sizes. We believe that paying attention to the small details is essential in delivering a high quality product.
The custom Shopify theme we built allows the client to add color options to each product and has a system that dynamically changes the global brand colors based on the user's product selection.
Not only can the client add a color scheme for each product, but they can also modify the global color settings and the colors of specific sections. This provides them with complete authority over their website's branding, allowing them to maintain a consistent brand image throughout the site.
Mirco-animations aren't just limited to desktop devices, they also work smoothly on mobile. Our team makes it a priority to fine-tune every little detail on each page we create, guaranteeing a cohesive experience across various screen sizes. We believe that paying attention to the small details is essential in delivering a high quality product.
The custom Shopify theme we built allows the client to add color options to each product and has a system that dynamically changes the global brand colors based on the user's product selection.
Not only can the client add a color scheme for each product, but they can also modify the global color settings and the colors of specific sections. This provides them with complete authority over their website's branding, allowing them to maintain a consistent brand image throughout the site.
Shopify
Javascript
Notion
Zapier
Rebecca Balogh
Management
Development
Design
We use cookies so that you have a better experience, you can read more in our cookie policy.