Custom app with color swatching features for Shopify-based ecommerce store

Client

An upmarket retailer of men’s clothing based in the US

Industry

Ecommerce

Services

Product Development, QA

Tech

Shopify, Node.js, PHP, GraphQL

Challenge

A premium men’s clothing retailer in the US has launched a Shopify-based ecommerce store to cater to online customers’ needs. They wanted to customize the platform by integrating color swatches for products available in different variants so that their clientele easily choose the color they like. The retailer came to ITRex for the discovery phase and an ecommerce solution that will deliver trendy experiences.

Specifically, our team took on the following challenges:

●

Build a custom app for the Shopify platform where customizations are quite tricky to provide functionality that available Shopify apps are missing

●

Make swatch generation an automatic one-step process requiring the upload only of a product image

●

Create a UX for the app in close cooperation with Shopify developers, taking into account Shopify-related technical restrictions

●

Develop design to make the app look like a default Shopify admin panel

Solution

●

An incredibly user-friendly custom app on Node.js/PHP integrated with Shopify and hosted on Pivotal.io

●

Automatic creation of stylish square swatches from a sample of a product image which can be moved within the image and get cropped on “Submit”

●

Display of a product in different color variants on the same product page as customers click on swatches, with no page reload

●

Integrated with Shopify API and Shopify CSS to set a connection for installation

●

Improved product search in GraphQL, similar to Shopify’s native search, allowing admins to search for a product using matching characters, rather than a complete product name

●

All images are optimized for a uniform size and orientation in one swoop upon upload

●

A UI similar to that of Shopify’s default admin panel with simple yet powerful UI elements

●

Swatch integration into the image gallery, product pages and the catalog page, making it super easy to install the app on any other theme

Impact

●

Swatch creation and update has become an effortless and extremely straightforward process for admins

●

A new customer experience replacing a conventional color dropdown has improved conversion rates as customers can now find the color they want in substantially fewer clicks

●

The ability to preview products in different color variants in a blink of an eye has also improved customer experience