“Frodo” - UrbanPiper's new Meraki Web Template

Written By Ops UrbanPiper (Collaborator)

Updated at January 17th, 2022

On the outline the major components of our new template are

1 - Enhanced Tech stack

2 - Staying ahead with the latest design trends

3 - Making it easier to manage themes - DIY Atlas Editor for the brands

4 - Increased performance optimization

We have divided the complete post into two sections, Frodo Tech and Frodo Design.

Frodo Tech

our old themes were built back in 2016-17 with the technology stack which was suited to us at that time, but now in 2022 the old stack does not match our current expectations and has become a roadblock for the progress of Meraki. That’s why we have decided to completely revamp the technology stack with all the best technologies available.

  • Key highlights:
    • React Framework
    • Single Page Application
      • Fast and Responsive
      • Enhanced Caching capabilities
    • Followed the latest software development design patterns, which makes it easy to maintain and customize.
    • New and Improved website publishing and deployment framework

Details on some of the prominent features

Single Codebase for all the websites

In our older themes, we used to create a separate Github repository for hosting a merchant's website, which was a very tedious and time-consuming task. But the major problem was to maintain and update all the websites

But now with just the change in the configuration file, the whole website can be changed according to the merchant's branding and requirements, without creating any separate GH repo.

Component-based theme

Our previous templates were based on limited templates to fit all the requirements. But now we have acknowledged this problem and we are coming up with the Component-based theme in which every section of the website is a stand-alone component in itself, which gives us the flexibility to change any section of the website without affecting other parts of the website.

With the Atlas-Meraki DIY platform in place, we will be bringing multiple component options for a single section of the website, which will allow our customers to customize their website according to their tastes and requirements.
Example: In the same Frodo theme, customers can choose from multiple options of Item Cards.

BlurHash Implementation
Images are always considered the most expensive resource on any online ordering platform and that’s why they also take time to load. Until they are not loaded completely people generally show empty grey/white boxes in the image placeholders and that really looks bad! Believe me.
To solve this problem, we have implemented Blurhash, which replaces the boring grey/white boxes with beautiful BlurHash states. To know more check out these.

Labels customization
We have heard people complain about our rigidness for just changing the labels on the websites, but believe us, it was not the rigidness. It was really difficult to just update the labels in our older versions.
But now with our Atlas-Meraki setup, the customers will be able to update the labels directly from the dashboard.

Frodo Design

If we look at the general trends in the UI for Ordering websites, they have changed significantly. So we also decided to move ahead and give a complete facelift to our themes with a new design language and enhanced online ordering user experience.

In Frodo, we have improved every section of the theme, be it the iconography, the layout of the components, how the images are rendered, and many more.

Let me list down some of the prominent UI changes we have made in Frodo:

  • New and improved item cards

  • Improved item customization workflow
    • The added indicator on Item Card for customizable items.

  • A new way to select customizations

  • Multiple delivery stores workflows: In cases where the merchant has multiple delivery stores available for the user’s preferred sub-locality, we allow the user to choose a particular store based on their convenience/preferences.

  • Adaptive item images on item card: In older themes, the images used for items were not optimized for the mobile devices, the item images used to take most of the space on the mobile devices.

  • Menu Bar: Following the latest trends, we have introduced a menu bar in Frodo, which allows easier navigation to different sections of the websites.

  • Items Cart Button: Now the cart button is more prominent on the new theme, with subtotal and number of items added in the cart.

  • Cart Screen

  • Allows the users to review all the details for items added to the cart before going for checkout.

    • Items Added
    • Item customizations selected by the user
    • Quantity
    • Price
    • Bill Breakup
  • Provide an opportunity for the merchants to upsell their items using recommended and favorite items.

  • Wallet Transaction History: Now the users can have a complete view on the wallet transactions.

  • Favorites section: In the favorites section the user can view and manage the favorites items.

  • A better way of informing users of their actions on websites
    • Example: when the user changes the fulfillment type with items in the cart. 

For any further details, feel free to reach out to us at [email protected]

Was this article helpful?