Sometimes during Magento 2 webstore development you need to create a custom homepage for one of the stores. In the following article I’m going to break down in details the whole process from creating a template to assigning CMS page as a homepage for the current store. But first things first.
Probably, you already know Monin for their syrups, gourmet sauces, fruit purees and smoothie mixes. It’s an international company with great renommee. And we are happy that they hired us to make their North American website.
As a client, they were really understanding and kind. Although this project was difficult and challenging, we enjoyed every moment of the cooperation with this company. And now, after we finished this project, we would like to point out the most important stages and let you know about features that were implemented. The website is developed on Magento® Enterprise Edition. It allowed us to use the whole functionality of this platform.
There are 3 main parts on the Homepage:
- Carousel with product categories
- Video blog
All these parts can be configured through admin panel. In footer we added Newsletter subscription where a customer can choose (s)he wants to subscribe to Home, Business or to both newsletters. At the bottom, you can see a Merchandising Kit Sign up section. Merchandisers can order an advertisement kit for Hotels, Restaurants, Cafes etc.
In Product section there is the list of available categories and subcategories. On the same page a user can use filters to sort product in order to select what (s)he wants. We have implemented 2 modes for Subcategories page: Grid and Slider. For Slider mode we applied lazy load images. It helps to increase page loading speed: images are loaded before they appear. Also in this mode you can add product to cart, open Product page or check recipes with this product.
In Recipes there is a special category called “Seasonal”. In this category are listed all seasonal recipes for special occasions (Halloween, Christmas etc). There is also an archive where a user can check Recipes that were popular in previous seasons. In Recipes you can find a special page called “Video Library”. Here users can find video guides. All dynamic content can be edited from Admin panel using Advanced Content Manager. Alongside with gallery description, options and other standard functionality, there are “Related Recipes” and “You might also like” sections. They were added with the help of Magento® EE rules. These sections are made in the form of a carousel.
On Product Page a user can add a review and evaluate the product purchased. In Product section there is a special category for Promotions. This category contains Holiday discounts and Special offers. In recipes section there is the list of all sub-categories and filters to sort the recipes. They can be sorted by Product Type, Flavor, Beverage Type and Color. In recipes subcategory, users can select between 2 modes: Grid and List. Here we have implemented Ajax Filters, Sorting by Name and Rating as well as Pagination. All recipes are made as Grouped products with Associated products. You can purchase all necessary products to cook something or to make a drink according to a recipe. On Recipe page a user can find the list of ingredients for the recipe. “Shop the flavor” button allows adding all necessary ingredients to cart. There is also the instruction of how to make a cocktail or something else. You can print it or save it in PDF format. On Recipe page there are “Related Recipes” and “You might also like” blocks (they are made as carousel based on Magento® EE rules) and Video block. This page also contains the “Review” section where a customer can evaluate the product and leave a feedback.
Resources pages are a great source of inspiration for Monin industry partners. On Resources pages they can find useful tips, techniques, recipes, new trends etc. Here we created dynamic and static pages that can be edited using Advanced content manager.
Users can find the information about the company in such sections as “History”, “Social responsibility”, “In the News”, “Monin Americas”. Here we implemented dynamic and static pages that can be edited using Advanced content manager.
Blog section contains articles and recipes written by Monin beverage and culinary experts. It is possible write and edit posts from Admin panel. On every blog post there is the link to the page of the author and to the general page of culinary team. It is possible to add comments and if an article is made as a recipe, there is a possibility to print it.
We developed mobile version of the website and on this screenshot you can check how it looks:
For this website we used more than 50 different modules and we customized so they would fit the design. These are some of the modules that we used:
Cart: Headworks Ajax Cart pro
Filters: Amasty Shop by
Ajax filters: Amasty Layered Navigation
Login by Facebook: BelVG Facebook Connect and Like Free
Blog and Tips and Techniques page: IWD Blog
Store Location: IWD Store Locator
We would like to thank Monin for this project and are looking forward to continue our cooperation with this company. BelVG team hope that this website will work smoothly and will be a really performing tool for their promotion.