Shopify-based online shop integrated with external product management system

Our client specializes in rehabilitation technology and modern products for wound care, incontinence, and daily aid for the elderly and disabled people. The company guarantees fast availability and manufacturer neutrality of its products and offers its customers detailed expert advice on how to pick the best suitable option from the vast selection of merchandise.

Aspired to diversify its business and add an option to order products online, the company reached out to EffectiveSoft with the request to create outstanding e-commerce experience for its customers.

The main client’s requirements at the start of the project were as follows:

• High site loading speed and enhanced SEO capabilities;
• Integration with the third-party product management system (Dev-Flowhub) to sync the product catalog on the site with inventory maintained in Dev-Flowhub;
• Three levels of product category taxonomy to facilitate the product search for customers;
• Self-selection tool – a configurator form, where customers enter their information and the system offers matching products (e.g., adult diapers of a specific size, absorbency level, etc.);
• Integration of the different payment methods;
• Discounts that are applied to a specific list of products based on the type of customers’ health insurance policy;
• Purchases by subscription, so customers can get the selected products delivered; to them on a regular basis automatically.

The front-end and back-end developers and the UI/UX specialist at EffectiveSoft created an e-commerce web application with a custom design from scratch. The solution consists of a Shopify-based online shop connected with an external system responsible for warehouse management, product data management, discount program, and subscriptions – Dev-Flowhub.

Website

UI/UX was built per requirements with a focus on neat navigation clear for the elderly and people with disabilities.

We also added the self-configurator tool that helps customers define the size and types of required products without the need to browse the whole product range.

To deliver content to customers faster and ensure better search engine rankings, the team used a server-side rendering (SSR) method implemented with Next.js framework.

Shopify integration

The online store was integrated with the Shopify platform using the Shopify Storefront API. Thanks to this integration, site visitors can:

• Manage their account (register in the system, change their personal information in the account, specify shipping address(es));
• View lists of categories and products;
• Pay for their online purchases using different payment methods.

Since the Shopify Storefront API relies on GraphQL, we used Apollo Client, a client manager for GraphQL queries, mutations, and data states.

Dev-Flowhub integration

To overcome Shopify’s limitations, we connected the website with the Dev-Flowhub using Shopify Admin API to provide:

• Several levels of product category taxonomy;
• Subscription for a number of regular deliveries of selected products;
• Automatic discount calculation and ability to upload the documents confirming the health insurance policy.

Admin UI customization

We redesigned the Dev-Flowhub admin panel to allow company employees to:

• Neatly organize all the data about the products available online Track orders, their statuses, and subscriptions;
• Check the expiration date of health insurance, and the list of partnering insurance companies;
• Upload and update the product catalog of the online shop using Dev-Flowhub.