Case studies
The project’s goal was to create a new online brand image for Shark restaurant, combining the fresh, modern spirit of the restaurant with a great user interface for the online shop. Here's how it turned out.
Shark is a famous restaurant in the center of Prato where you can enjoy trendy cocktails along with great fish dishes (there's a bit of everything, ranging from raw to poké and tartare).
All this while sitting in front of the Emperor's Castle, the perfect evening setting.
My brief was to build a customized engine for the site that brings out the restaurant's image and the new multi-product shop.
cms
Statamic
css
Tailwind CSS
js
Alpine Js
shop
Snipcart
animation
GSAP
tests
Cypress
automation
Zapier
deploy
Ploi
form
Getform
First of all: Snipcart is a headless engine for e-commerce.
You don't install it, you don't need a database, and you don't have to set it up on your server.
You just need to copy and paste a line of code, and it's immediately ready to use.
The classic e-commerce platforms require the site to be developed in a certain way or use a specific programming language (or templating): too many limits and too many forced choices.
This does not happen with Snipcart. The layout is customizable and the basic integration only requires a few HTML buttons (which pass variables, such as price and size, to Snipcart).
It's a highly flexible tool that allows you to do what you want, offering a variety of secure features.
Obviously, Snipcart is a "global" product, which means it needs to adapt to shops all over the world. It doesn't display "Italian" fields, such as tax code or VAT number, but it allows you to integrate them by developing custom code.
The template part is quite simple. So, if you've reached this page from Google, please note that you can find examples of how to add custom fields to the selling experience in the engine documentation.
.png)
Note that you can "extend" a section (in this case, "billing") without having to rewrite the whole block.
The homepage is enriched using an animation (made with GSAP) that overlays the photos with a description when the user scrolls. An original way to display a product overview.
This is not the typical e-commerce where all products have the same weight and are presented in a list.
The delivery page has clickable dishes with the option to order online. If you want, you can also download PDF menus. Everything in the layout can be easily reordered through the CMS.
For the blog, I chose the name "The Fin". The style recalls a marine seabed.
I also played with the use of light and shadow throughout.
Two footers change according to the pages. The reference to the "shark" is always present!
Same thing for article templates. The admin can choose two different styles.
The mobile menu features another animation and...I didn't forget the shark!
And then, there are many other interesting details:
The text on the site (on all pages) can be edited by the customer autonomously through the CMS.
In the menu, the separators between the items have been extrapolated from the "K" of the logo.
The titles of the single pages are colored with a gradient.
The form is headless (powered by Getform!)
With Zapier, instead, I've created automations based on the webhooks sent by Snipcart. So, for example, if the user chooses to subscribe to the newsletter (while placing an order), I can subscribe (or update) them on Mailchimp.
Have you enjoyed the project?
If you want to work together or wish to contact me for further information, you can write me at [email protected]
Current availability for new projects
© 2023, Francesco Mugnai
