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.
