Store themes

Block based theme builder framework with high end store designs

Client

Stylehub Ecommerce Ltd.

Roles

Product design, UI/UX, Website design, Frontend development

Technologies

HTML, CSS (SASS), JS, jQuery, React.js, Node.js (Gulp), PHP, Twig, Figma, Adobe Creative Suite

Summary

Stylehub aimed to be the first, truly global ecommerce platform designed for the needs of fashion, design and lifestyle brands, providing an all-in-one tool without the need for plugins, apps or add-ons, with built-in multi-language and multi-currency capabilities.

When I joined the team in 2018, one of my responsibilities was to design an initial store theme collection for the platform. To make this process more efficient, I ended up developing a whole theme builder framework. I also came up with Stylehub's visual identity, and took part in the design, development and refactoring of Stylehub's React based admin interface.

Challenge

Creating starter store themes for an emerging ecommerce platform was an exciting task that required careful consideration of various factors, and it grew into quite a project over time.

The main challenge was to quickly design and develop around a dozen unique themes that catered to diverse industries while providing plenty of customization options, and to devise a way to structure and describe these themes, so that they could be easily consumed by Stylehub's React based website builder that was in development at the very same time.

Apart from the time pressure, another significant challenge was maintainability, especially with Stylehub's rapid development cycle. With new store features coming out every single week, I had to find a way to keep multiple themes up to date and reliable.

Building blocks

Before getting started, I examined dozens of online stores created for high-end brands. I was mainly interested in header and footer layouts, navigational styles and conventions; what kind of useful, versatile and popular content block types exist, how they can be grouped, abstracted and customized; the best ways to display product information and images; and last but not least checkout flows on all major ecommerce platforms VS custom solutions.

During my research I gained a valuable insight into the world of fashion ecommerce, and was able to compile a list of essential building blocks and customization options every single store theme should have. I'm very happy to say that during my time at Stylehub, we received very few requests from customers about blocks they were missing from our themes.

Header

10+ different responsive header layouts with megamenu capabilities.

Footer

10+ different responsive footer layouts, from simple one liners to multiple columns.

Hero

Multiple hero sections with optional overlay text and carousels.

Text

Multiple text blocks, 1-4 columns. Optional headings and buttons.

Images

Images, 1-4 column wide. Optional overlay text. Pre-built image compositions with 3-4 items.

Images with text

Image with text block with adjustable width ratios and reversible column orders.

Images with text below

Images with text below. 1-4 columns. The foundation of many other blocks.

Video

Video block with optional autoplay and adjustable aspect ratio. Handles 3rd party services such as Facebook, Vimeo and YouTube.

Product list

3 different filter layouts, adjustable columns and multiple pagination styles including infinite scroll. Available in carousel as well. Filters open in sidebar on mobile.

Product details

5+ different product detail block layouts with additional display options.

Multiple newsletter form layouts including modals that appear based on adjustable rules.

Social

Multiple blocks, including social icons and Instagram feeds.

Testimonials

Basic client testimonials.

Brands

Just a simple list for brands.

Maps

Multiple map / store locator blocks with different layouts and optional text.

FAQ

3 different FAQ layouts with optional accordion settings.

Contact

Multiple contact form layouts.

Blog

Several blog layouts with multiple blog post header styles.

Cart

Cart block with optional sidebar version available.

Checkout

Custom multi-step checkout block.

Store themes - Stylehub's website builder

Stylehub's website builder in action. The theme's structure and customization options are defined in a JSON manifest file.

Editor concept

Once we had our building blocks, we needed to make them come alive in our website builder. As a startup we had a limited amount of time, so we had to find the right balance between development complexity and usability. I believe we came up with a simple, but powerful system.

On Stylehub, each store consists of multiple pages. Each page has a pre-defined layout, which typically means what kind of navigation they have (eg. reduced navigation for checkout pages), and they can host multiple content blocks. Blocks can be re-used and nested, opening up a world of possibilities for theme designers and store owners alike.

Themes are essentially built using Twig template snippets, while layouts, pages, and blocks are described using JSON manifest files. The same applies to customization options, which can be either global, like the primary button color, or block-based, such as text orientation. These options typically function by either adding a specific utility class to an HTML element or modifying the value of a CSS variable.

Theme builder

To be able to work efficiently with multiple different themes at the same time, I built a modular framework that is quite similar to Bootstrap in a way that I'm using pre-built CSS and JS components to create mobile friendly, grid based templates.

I wanted to use the same HTML markup for each theme and still be able to achieve a radically different look, so during development I defined over 1000 SCSS variables that can be used to adjust every little design detail. A less intimidating selection of around 70 essential customization options is also available in Stylehub's website builder.

The themes also share a common JS engine that I wrote myself. It can handle complex navigations with megamenus, sidebars, popups, lazy loading, 3rd party video, maps, zoom sliders, product filters, custom microinteractions and much more.

The final piece of the puzzle is a PHP and Twig based development tool that can be used to test every single theme from start to end, as if we were in a real, functioning online store. With this tool we can easily create layouts and pages, define various types of content and switch between different header and footer navigations.

All this makes it a lot quicker, and much more enjoyable to develop a new theme from scratch, and it also increases maintainability and reliability in an enviroment where the product is rapidly changing.

This illustration shows the stacking order of elements (navigation, sidebars, modals) in Stylehub's store themes.

Theme features

Responsive, SEO friendly design

Grid based layout designed to look great on mobile phones, tablets and giant 4K screens as well. Semantic HTML markup with optimized image source sets.

Bespoke JS library

Self-developed, optimized theme engine that handles everything, including complex navigation with megamenus, sidebars, popups, lazy loading, 3rd party video, maps, zoom sliders, product filters, custom microinteractions etc.

100% functional

Includes all necessary ecommerce features, such as product listings with filters, detailed product pages, content pages, a shopping cart, checkout functionality, account section and even a blog.

10+ header and footer varieties

Choose one of the 10+ pre-built, popular header and footer layout types for your store. Desktop menus can be customized to open on hover or click.

Flexible navigation

Users can add links, dropdowns and build complex megamenus. All menus adapt perfectly to mobile devices.

50+ content blocks

50+ fully customizable content block types — hero carousels, text, images, video, maps, newsletter signup and contact forms, store locators, FAQs, social feeds, brand logos, testimonials.

70+ customization options

Themes can be customized to any brand seamlessly with dozens of global customization options. Users can set colors, sizes and other styles for all essential store elements.

Customizable product lists

Set the layout of product list pages. Toggle filters. Use pagination or infinite loading. Customize product thumbnails to show a 2nd picture on hover or an Add to cart button.

Customizable product pages

Choose from multiple product image gallery layouts. Customize the appearance of product details. Toggle Wishlist button.

Custom checkout

User-friendly checkout flow. Design settings are applied to the checkout process as well, providing customers with a seamless experience from start to end.

Sidebars and popups

Carts and filters can be opened in sidebars. Built-in, customizable popup mechanism for lead generation using sign up forms.

Custom interactions

Themes feature custom micro interactions, UI elements and animations for additional polish and usability.

Announcement bar

Users can communicate deals or other important information with the built in announcement bar.

Cookie consent

Each theme comes with a built in cookie consent bar as well, with customizable text and colors.

Starter themes

In the following section you will find some of the starter themes I designed for Stylehub using the theme builder. Thanks to the framework, I was able to create an initial offering within a reasonable timeframe, there were many different styles for our customers to choose from, and by using shared components and a shared engine maintenance and adding new features became a lot more efficient as well.