Shopify has been gaining popularity in an incredible way since its introduction way back in 2006. With it launching new products left and right, such as Shopify POS and a renewed, native, focus on wholesale, Shopify is becoming an increasingly viable option for much more than just e-commerce companies.

We likely don’t have to tell anyone reading this why Shopify has been gaining popularity at this rate. Examples are easy to come by in the real world, inevitable even. It’s likely to be at least a consideration for any merchant that’s setting up a new webshop.

So merchants love it, but do the developers? A look behind the curtains can initially seem to reveal some major challenges. However, after more careful consideration, embracing Shopify’s peculiarities allow for an efficient and relatively carefree setup.

We might have to get a bit techy throughout the article, however we aim to give any reader a basic understanding of how we approach our Shopify Tech stack, as well as giving developers a solid starting point.

Server

The main peculiarity developing in Shopify has is the server setup. Everything is always hosted by Shopify, including local development environments. As a full service company, we are very used to configuring and maintaining our own servers, so working with what we’re given here can be very different.

Because even local development hosting is done by Shopify themselves, we develop Shopify themes using Shopify-cli. This connects our local developing environment with a “real” Shopify webshop. Everything related to the database is then managed by Shopify but the templating code is delivered by us. All of the code is mirrored in a repository of course.

From our local environment, we can deploy to any Shopify store the connected partner account has access to. This allows for quick switching and deployment between development, staging and production environments.

Packaging and packages

As mentioned our local shopify environments are hosted using Shopify-cli. The `shopify theme serve` command hosts the environment. This takes files that adhere to Shopify’s very strict directory structure and effectively hosts them on a temporary server, only available to the developer that ran the command.

As mentioned the directory structure that is hosted is very strict. For example: no subdirectories are allowed, templating is done in `.liquid` files, styling trough bare `.css` files, `.js` should already be compiled and minimised. On first consideration, this doesn’t strictly fit our usual way of working, but after careful consideration we found a way to make it work.

To streamline development as well as improve the products, we elect to build a layer around the bare Shopify directory structure. We care a lot about our code quality, so we need linting and formatting using Prettier and Eslint. We choose Tailwind to style websites. If we really have to write CSS, we want to write SASS instead, and so much more.

To manage all these packages, we use Yarn. It makes it easy to keep everything up to date and synchronised between environments. And to tie everything together, we’re using Webpack. Just a warning, we’re going to get nerdy now:

As an example: instead of just deploying to a Shopify store using `Shopify theme deploy`, we’re using a Yarn command (`yarn deploy`) to first lint all our code, auto fix problems, compile all vue, sass and tailwind preferences, tree-shake javascript, purge css and compile everything to a separate directory that matches Shopify’s theme structure. And in one command, Webpack takes this directory, and gives it to Shopify to host, like nothing happened.

Conclusion

By embracing Shopify’s restrictions, and working with them, instead of against them, we aim to provide an experience that streamlines the product we deliver, as well as the developer experience. After all, a happy developer is an efficient developer.

We’re not about to choose suboptimal technologies to base our products on to meet the demands of an e-commerce platform, but we are about to combine the best technologies around in combination with every advantage the best e-commerce platform in the world has to offer to create jaw-dropping digital products.

Read more about our work and get in contact with us on owow.io/shopify!

In today’s rapidly evolving retail landscape, where online shopping has become the norm, businesses are constantly seeking ways to stay ahead of the competition and deliver exceptional customer experiences.

One strategy that has gained significant momentum is omnichannel commerce. This approach is user centric whereas the similar sounding approach, multichannel commerce, focuses more on the product.

With an omnichannel strategy you create a seamless experience for the user, all the way from exploring a brand or product till the customer care after ordering. It includes physical and digital channels like websites, mobile apps, brick and mortar stores, social media, POS and more.

Let’s look the advantages of this upcoming strategy

Bridging the gap between online and offline

As consumer behavior continues to shift, a growing number of buyers now conduct online research before making purchases. According to recent studies, approximately 44% of B2C buyers and 58% of B2B buyers frequently research products online before visiting physical stores. Furthermore, even when shoppers are inside a store, they often turn to online resources to continue their product exploration. By embracing omnichannel commerce, businesses can bridge the gap between their online and offline presence, offering customers a consistent experience across multiple channels.

With services like Shopify POS proving themselves all around the world. The line between On- and Offline has become thinner than ever. Now that many customers complete purchases with businesses on more than one channel, centralizing these channels on the business end of these transactions can simplify and accelerate menial tasks. Things like keeping track of customer loyalty, keeping track of stock and integrating with your bookkeeping software can be centralized through a centralized platform, allowing you more time to focus on your core business.

Let’s take Disney as an example, a company that absolutely nailed down the omnichannel experience and with that, manages to bridge the gap between on- and offline. The journey of your Disney visits starts in their app or at their website, where you can not only book your ticket but also explore the park and plan what you want to do when you’re there. Features that help to get you excitement up forehand and let you imagine what the actual visit will be like. When you enter the park the real bridging begins. The app shows you how to go where and lets you book the restaurant you want to go to and at the same time Disney makes use of a “magic band” that allows you to pay, get park and fast lane access, open your room and link your ride’s photos directly to your app, ready for purchase.

Enhanced customer experience

Omnichannel commerce eliminates the silos that traditionally exist between different shopping channels, such as in-store, social media, mobile, email, web, phone, and live chat. By seamlessly integrating these channels, businesses can provide customers with a cohesive and personalized experience throughout their buying journey. For instance, customers may research a product online, visit a physical store to see it in person, and then make the final purchase online with a discount code from an ad on social media. This flexibility and interconnectedness contribute to higher customer satisfaction and loyalty.

Another example to paint the picture better is Timberland. The brand is mastering both the bridge building and the improved user experience. In their stores they combine the offline and online world using near-field-communication (NFR) technology. With a tablet in your hand, you can get all the information available on a product that’s NFR equipped, add it to your wishlist and email it to yourself. This way a user can view a product before ordering it at their own time, putting the fear retailers have for physical browsing and online buying to their advantage and serving the user at the same time. And with the wishlist in their email, the brand stays close to their user, with higher chances of conversion.

Increased customer spending

Another compelling reason to embrace omnichannel commerce is the potential for increased customer spending. Research has shown that omnichannel shoppers tend to spend more compared to those who engage with only one channel. According to a study, omnichannel customers exhibit a 13% increase in in-store spending. The convenience and flexibility of being able to seamlessly switch between online and physical channels empower customers to make purchases whenever and wherever they choose. This increased spending power can significantly impact a business’s bottom line.

Customer loyalty and repeat purchases

In addition to spending more, omnichannel customers also demonstrate higher levels of loyalty. The same study mentioned above revealed that within six months after an omnichannel shopping experience, customers logged 23% more repeat shopping trips to the retailer’s stores. By providing a seamless experience across multiple touchpoints, businesses can cultivate stronger relationships with their customers and encourage long-term loyalty. This not only leads to higher customer retention rates but also generates positive word-of-mouth and brand advocacy.

Sephora did a great job keeping their customers engaged during COVID, using VR tutorials and virtual tutorials. After opening up again, they helped limit the choice for their visitors by using AR fitting rooms and Color IQ to help them match their lipstick or foundation color. Bringing the number of options down from 560 to the perfect one for each consumer. And as the Jam project already showed us, less options for the user tends to lead to a higher conversion.

Conclusion

In the age of digital transformation, businesses must adapt and meet customer expectations in order to thrive. Omnichannel commerce has emerged as a powerful strategy to deliver seamless customer experiences, bridge the gap between physical and online channels, and drive business growth. By embracing this approach, companies can attract and retain customers, increase sales, and establish a strong competitive advantage in the marketplace. As consumer behavior continues to evolve, businesses that prioritize omnichannel commerce will be well-positioned to succeed in the digital era.