A Figma design was provided for all pages of the store. It included a mix of sections that already existed in the Prestige theme, sections that needed small tweaks and some that needed to be built completely from scratch. Below are some of the standout parts of the project:
Header
The header needed a large overhaul to fit in the colour and size selection options that Noma Noma wanted. This was to give customers an easy and visual way to navigate and explore the store.
Variant Selection
The variant selection was changed to take customers to a new page for the selected variant, as all the variants were sold as separate products, with 30 in total.
Factory Section
A section was needed to show the different factories that the bottles are produced in, as Noma Noma pride themselves on sustainabilty and transparency. The section was built from scratch, with a slider to swipe between the factories and custom accordions where the content and images could be changed from the theme editor.
Emission Data Section
Similar to the factory section mentioned above, the emission data section was added to the Sustainability page to be transparent and open about the emissions caused by producing each size of bottle. This section includes a table layout on desktop and a slider on mobile. Both layouts have videos of the bottles rotating, which help to make the display engaging, rather than just text.
Incrementing Number
This section shows a number increasing from 0 to 1,825, to indicate the number of plastic bottles that a Noma Noma bottle owner would save by their estimates. There is also an info icon which can be clicked to show an overlay with how the estimate was arrived at.
Footer
The footer remained mostly the same from the original theme but needed to be tweaked to allow an extra column to show the social icons, which was built from scratch. There were also a number of styling changes applied to arrive at the final result.
