Headless Shopify Store and Custom Ruby on Rails App Development

Challenges 

Bidding sites are a popular way to buy and sell many products. As Bids grew, they started to face the Shopify limitations; they needed a website that reflected their progression, both inside and out. When Bids came to us, they wanted to fix some bugs on the existing storefront and immediately start building a new one with unlimited scalability. 

The primary issue was that the existing system ran into the frontend limits and Shopify API. As the application used sorting of collections by default, its client could not launch other auctions. When the number of products grew up to several thousand, the system speed was poor, making it impossible to close more than 8 auctions per minute. 

Plus, since the auction directory is a collection, it was impossible to add the same item in a few auctions simultaneously. The client also needed to integrate an automated inventory management system and a multi-level marketing program to deploy a successful multi-channel marketing strategy.

Solutions

Overcoming Shopify Limits 

Due to the Shopify limits, there was a need to upgrade to Shopify Plus. As soon as it was decided, we had started selecting the tech stack for the project. Jamstack architecture is a popular approach for headless solutions that leverages static rendering at the client-side. Despite that Jamstack excels at technical SEO for statically generated pages, it did not fit our project since each lot closes every 30 seconds. So for better SEO performance, we could not use a serverless architecture and needed a server-side rendering.

For the frontend, we used server-side rendered React, which is excellent for SEO. SSR allows users to see the content directly without waiting for React to run first, and Google does not have to use Javascript to render the content. Nodejs is a very convenient platform for hosting and running a web server for a React application. But as Ruby on Rails powered the existing app, we dug a little deeper and decided to follow the current stack and keep Rails to allow server-side rendering of our frontend. By taking control over the backend, we removed limitations and boosted SEO. 

Multi-Level Marketing (MLM) programs

For the Multi-level marketing (MLM) strategy, we picked and integrated tapfiliate.com affiliate tracking software, so the client could continually encourage hundreds or thousands of members worldwide to recruit new distributors. Tapfiliate integrates seamlessly with Shopify through its API.  It is easy to become an affiliate; you can simply share the referral links on social media.

Inventory Management

As their online business was growing, keeping track of all orders and stock levels became more difficult. Managing auction data manually using Excel was time demanding and limited. Moreover, the client wanted to turn this e-commerce into a marketplace for attracting third-party sellers. Following the client's requirements to solve the task, we picked a Shopify inventory management app with automated workflows. The app allows set up auction-time and generates purchase orders automatically, saving from running out of stock. Now all the data is easily managed in one place. 

Checkout Customization

Shopify Plus is packed full of powerful features and gives stores the freedom to customize the checkout and optimize the design according to specific needs. We customized the cart and checkout pages that customers could add to the cart items from different directories. For example, with Shopify, the client could only pay for the auction. Now it is possible to add to the same basket items from 'Auction' and 'Buy Now' directories. 

Web Design and Additional Functionality

The client wanted to keep the existing store web design, so we implemented it and made it responsive using Bootstrap. Also, we fixed some bugs and made minor changes to improve UI/UX.

Methodology

We used Jira and Bitbucket to manage project tasks between the developer teams so that the client could see the development process, track the progress, and test the completed features. 

Results 

We might not be at the finish line yet, but Bids is already sprinting in the direction of their goals. As a result of the first phase, Bids.com has seen an increase of 70% in conversion rate thanks to the correct approaches and improved system stability. During the second phase, we moved to headless architecture. We are in the third phase and continue to work with their team to turn this e-commerce into a marketplace. On the way, our team continuously makes improvements to the website, A/B testing different versions, and features to get the highest conversion rate.

At VT Labs we are a full-cycle software development company specialising in eCommerce. Whether you’re looking to develop a product from scratch, platform migration, revamp your existing product, design an app, or do UX testing, we’re your one-stop shop.