Solutions
In close collaboration with Greek Flavours, we built a headless commerce 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 Klaviyo
Addition Features
UX Improvements
Getting to Work
The development process began with an initial discovery period. We believe 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, and choosing the 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 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 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, and 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 mobile and desktop sites, allowing the customer 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 focused on the user's experience throughout the rest of the site. We used the menu and homepage structure to explain to the customer the benefits of the products. Upsell and recommended products feature unobtrusively across other site areas, 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 filter 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's 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 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 promptly. 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 contacted the client, provided regular status updates, and transferred requirements to the developer. For process tools, we used Click Up and Git.
