Developing an advanced Shopify solution for WOLACO

The website we created for WOLACO consisted of both e-commerce development as well as creative web development, so I’ll use this blog post to explain the main problems we encountered during the production phase and the solutions we found for them.

Technologies we used

For Shopify development, we chose to go with Shopify’s own start kit called Slate. Their front-end team did a great job in creating Slate, it has a great community and issues and pull requests are handled fast. It comes packed with Webpack, ES6 support with Babel and SASS. All that is connected with a Shopify store via a CLI which also runs the local development and deployment of a theme.

Those elements made Slate the logical first step when we started creating the WOLACO theme. And one more thing – it enables multiple developers to work on the same shop. All you need to do is have a separate theme and git branch for every developer, and merge changes to the master theme.

Making things easy for Store owners

WOLACO store is both an e-commerce store and an area to showcase great creative content, so there are many different types of pages and templates, and some of them are really design and content-heavy. Shopify offers one of the best content management and customization experiences – that’s why we focused on making every part of the store customizable during our development phase. We achieved that by organising the theme with sections which also enabled the theme to be modular.

For sections, Shopify has a section schema settings JSON where you can define how much control over the section content will the section owner have in the Theme Editor.

Sections can also have advanced blocks of settings which give the owner the ability to create blocks of content that can also be different in regards to their type. This is useful for pages like the FAQ or for adding and removing slides from all kinds of sliders.

We used that idea to create an advanced About page template in which the owner can create different types of content sections, with different images showcase. We also enabled the owner to drag and drop them to change their order and create a specific kind of a dynamic section. The About us page has a unique design that’s different from other templates and the owner can change the page as he wants by choosing different modular blocks of sections.

Developing the product showcase and buying experience

One of the most important aspects of the new WOLACO theme is the way products are displayed on the page, as well as users’ entire buying experience from item selection to purchase. To streamline that experience, we developed a single product to be a module that isn’t dependent on anything.

This was not an easy job because every product displayed anywhere on the site must contain every image of every variation and combination in a slider. This means a user can choose the size and color, see the image of a chosen combination and add a product to cart without even opening the single product page.

To do it, we converted the standard Shopify select box for variations into size and color buttons, where color options are represented as colored boxes representing the color name. By changing colors, users change the preview image in the slider and see the exact color of the product they want to buy. If a variation is not available, the “Add to cart” label will change to let users know.

Users can buy products from the homepage, from featured products sections, they can even buy products from blog posts. To streamline the shopping process even more, we developed an Ajax cart which opens from the side and does not need a page refresh when users add a new product to the cart . With this Ajax cart, users can add items to the cart, update quantities and fetch information about the cart – all without refreshing the page which makes the buying experience faster and boosts conversion. Users have the option to go to cart or go directly to checkout, thus skipping the single product and cart page in the process. We also enabled them to checkout from every page on the website. As a lot of users browse these types of websites on mobile, the process works completely the same on all mobile devices.

Using custom fields in Shopify

By using the power of Shopify metafields, you can add custom fields to objects such as products, variants, collections, pages, blogs etc. See, sometimes you need more information or content from the objects than you initially have, or maybe you want to make a custom layout with separated information on, for example, a single product page. Since store owners must write or change those custom fields, we had to be sure that that experience is user-friendly – something like the ones that some WordPress custom field plugins offer.

That’s why we used Airfields, a custom fields editor plugin with great graphical user interface that’s located in the Shopify admin, and not on an external website. We used custom fields across the theme and increased theme flexibility while at the same time keeping it extremely easy to use. The best example of this can be found on single product pages – there was initially only one rich text editor for product description, but with custom fields we enabled more layout possibilities and organization between product information.

The owner can now add content with one or multiple columns, a sizing table, product photos and product videos – all thanks to custom fields. Also, with that kind of organization, the owner can control which fields will or will not be shown on mobile devices.

Since there is no “smart” way to add related content (products, blogs etc.) in Shopify out of the box, these custom fields we implemented now enable the owner to add relations between products or blog posts, which ultimately enables him to make more personalized related content and control which products will be shown.

Achieving packs of products in Shopify

One of the elements the client asked us to implement into the website was the ability for users to add bundles of products, or packs. But that is not supported in Shopify. I mean, there are some attempts to achieve this, either with plugins or custom implementations, but none of the solutions worked like we needed it to work or were not flexible enough to support our design. That’s why we created a custom, robust pack solution for WOLACO. We used custom templates, custom fields, Javascript and Shopify Ajax API, and ended with a custom collection template that displays every product in a collection as a step for creating a pack.

Since buying a complete bundle of products gives users a discount on the price, the products in bundles are duplicates of real products but with lower prices. We used custom fields to add a discount percentage, a description of the bundle and the price, so when users sum up the prices of duplicated products, they will get the price of the complete bundle.

If a variation of a chosen bundle product is not available, users will not be able to proceed and add the bundle to the cart until all variations are available. Only when all bundle requirements are satisfied will users see the “Add bundle to cart” button. If users remove one bundle product from the cart, all bundle products will be removed. Shop owners have the ability to add as many products to the bundle as the want.

Shopify for blogging?

Shopify has offered blog by default for many years now, but it was never recognized as a powerful platform for that, and it definitely does not offer the features that are offered by default on WordPress. But having a blog on Shopify has lots of benefits for conversion and SEO.

We actually managed to turn Shopify into an advanced blogging platform within the same admin as the shop, but it was not as simple or straightforward. For WOLACO, we needed to develop a blog with two main categories (Men and Women), and each of them needed to have 4 sub-categories. By default, this was not possible, but we managed to implement it.

We used Shopify categories to create the two main categories, and the trick to create sub-categories is to use tags. Then we looped through that tags to get posts only for a specific tag (in this case a fake sub-category) inside the main category. Also, by using custom templates we managed to have different blog listing layouts for each tag and each category. That was the case for us having different layouts for Men and Women categories, and normal and audio sub-categories. With custom fields, we are able to show products covered in the blog post inside of that blog post, and we can also use it to set related blog posts.

Performance optimizations for the Shopify theme

By using Slate, the new WOLACO theme already came with optimized assets like JavaScript, CSS and images. In addition to that, JavaScript is optimized with template and layout bundles, which ensures that only JavaScript that is needed is loaded on the page.

One of the big problems we encountered was a large amount of whitespace that was being generated in liquid. Every section and snippet generated lots of whitespace within the code, and every variable inside of them generated its own whitespace. It resulted in every page being more than double the size than it should have been, and our biggest page had about 21000 lines of code. Shopify offers whitespace control, and it works by simply adding a dash after the start and before the end of Liquid tags.

We added whitespace control to every include of section or snippet, to every variable call and every control flow tag. With that, our biggest page come down from 21000 to 9000 lines. This made the website run faster, but what really made the difference is caching and preloading pages with JavaScript. While users scroll and interact with the page, links that are hovered over are preloaded in the background, so when a user clicks on a link, it’s already loaded and page transition is instant.

Creative shopping experience

Having normal, eBay-like, eCommerce design from 20 years ago does not cut it anymore, especially if a client is selling lifestyle with their products. eCommerce websites are starting to transform in the last few years and are adapting to the new creative thing going on in website trends – that is why you can now often see shops on Awwwards or similar galleries. Shopify is a great platform for creating very creative shops, offers a high level of customization and clients love to use it because its very easy to operate.