Shopify Headless eCommerce Storefront for Greek Flavours

Solutions

In close collaboration with Greek Flavours, we built a headless ecommerce storefront on Advanced Shopify.

What we did: 

  • Discovery Phase 

  • Build Advanced Shopify Store 

  • Custom Frontend with React

  • Headless CMS with Prismic, Gatsby, and Shopify 

  • Multi-languages with Custom Translation App 

  • Shopify Multi-Currency 

  • Data Migration from Magento to Shopify 

  • Optimized for Conversions and SEO 

  • Integration Zendesk and Klavio 

  • Addition Features 

  • UX Improvements

Getting to Work

The development process began with an initial discovery period. We always believe that this is a fundamentally important start to bringing any app to market. This early work involves scoping conversations to understand our client's full list of requirements and goals, creating wireframes, choosing technology stack and architecture. We ran the discovery phase over six weeks. From this point, we were able to shape a clear project timeline and solve problems that the client experienced with Magento.

Moving Forward

The client wanted to go headless, so to do that, we chose the Advanced Shopify plan. After the website switched over to Advanced Shopify, we were delighted to enter ''phase two''.

Going Headless

We built a headless Shopify platform to enable Greek Flavours to scale the business internationally. Headless Shopify e-commerce allows for multilingual and multi-currency stores from the simplicity of a single backend. And that’s really useful. But Greek Flavours didn’t just need a store that caters to a number of languages and currencies. They required an impressive user experience and no compromise on speed. Headless e-commerce has it all covered. We removed Shopify limitations and made it possible to display one content differently on desktop and mobile with headless. We made a separate front-end for desktop and mobile devices; however, it was added in CMS once without duplicates.

Redesign

We redesigned the Greek Flavours website from top to bottom - homepage, product page, cart page, collection, top menu, footer, the blog with recipes, contact page according to the existing design guidelines. We created wireframes adjusted to the new dimensions. With existing branding guidelines in place, we created bespoke icons for the website. Also, we suggested and implemented a sticky top menu for both mobile and desktop sites giving the customer the ability to navigate seamlessly through the website.

Homepage

As well as a great-looking store, we focused on making it easy for customers to buy. We developed a seamless customer journey on the homepage and also focused on the user's experience throughout the rest of the site too. We used the menu and homepage structure to explain to the customer what the benefits of the products were. Upsell and recommended products feature unobtrusively across other areas of the site, including non-product pages such as blog posts.

Collection Page

The collection pages were essential pieces of the project—the information needed to be easy to get at and digest. We could keep it all clean and uncluttered with an intuitive top menu and embedded filters options on the pages.

Product Page

The ‘bestsellers from this category’ and ‘from the same producer’ sections on the product page encourage further purchases and help increase average order value. Customers can select additional items easily on the product page and add them to the cart with one click. Also, we included product descriptions and information on the product page to improve the user experience.

Cart Page

Checkout Page

Blog Page

Together with Greek Flavours, we evolved the design of the recipes page and the output of products on the page.

Login Page

Shopify Multi-Currency 

Shopify payments don't work in Greece, so we needed a custom solution to overcome Shopify limitations. We suggested using Prismic, allowing Greek Flavours to process currency and fix conversion rates independently.

Multi-languages with Custom Translation App 

As Greek Flavours sells products to different countries, they needed to localize their product pages into other languages - Greek, Italian, French, and German on top of the English one. They needed custom metafields for product titles, descriptions, meta titles, and meta descriptions. So we built a Shopify custom app for translation that gives the required language according to the location and handles translation smoothly. Also, we added a language switcher.

Zendesk and Klaviyo Integration 

We integrated Klaviyo email automation, so they could continually communicate relevant content to their customers in a timely manner. Also, we made Zendesk integration - the omnichannel customer service and engagement platform for better customer experiences.

Methodology

We used a waterfall methodology for the development process. One of our developers collaborated with a QA engineer and a project manager. The PM was in contact with the client, provided regular status updates, and transferred requirements to the developer. For process tools, we used ClickUp and Git.

Results 

Over 6 months, we migrated Greek Flavours’ extensive website to a headless Shopify platform that gives extraordinary results. We built a robust headless eCommerce storefront with Shopify, React, Node, Gatsby, and Prismic CMS. Smooth scrolling, multilingual, multi-currency, high-quality images, and no compromise on speed.

WANT TO GO HEADLESS WITH SHOPIFY?

Let's talk

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.