The purpose of this document is to showcase various front-end scenarios and styling possibilities within MageSuite. It aims to assist graphic and UX designers in creating designs that align with MageSuite standards and capabilities. The document includes screens from different MageSuite configurations found in the theme-creativeshop, base Magesuite modules, and optional modules. Additionally, it provides examples from live shops built on Magesuite, illustrating combinations of components, functionalities, and easily attainable styling options.

Where to start?

Demo shop

Start by visiting the MageSuite Demo shop to explore its homepage, category pages, and product pages. Utilize the search function to find various products and experiment by adding different types to your cart. Proceed through the checkout process to experience the full user flow. Observe how the website adapts to both mobile and desktop views to gain insights into its design and functionality. This hands-on exploration will provide valuable insights into the Magesuite features and user experience.

Demo shop URL: https://demo.magesuite.io/

Basic concepts

Please check the basic concepts subchapter in order to learn about MageSuite layout and some requirements concerning svg icons or typography

Please keep in mind the below wanings when designing

If a specific functionality or layout is not depicted on any of the screens presented in the subchapters, it should be regarded as custom development or a more advanced customization requirement. In such cases, additional development work or customization beyond the scope of Magesuite or/and Magento may be necessary to achieve the desired outcome.

Within the documentation subchapters, there is a specific section dedicated to "Live Projects Customizations." This section includes tables showcasing screens from online shops that are built on the Magesuite platform. These screens demonstrate various functionalities, such as alternative scenarios within Magesuite, aesthetically pleasing styling choices, minor and straightforward customizations, as well as customizations accompanied by existing frontend documentation.

Please be aware that certain features implemented in online projects may be tailored exclusively to a specific project and may not be easily transferable to a new project. It is important to note that not all features showcased in Magesuite-based online shops can be readily implemented in another project.

User guide

User Manual

The user manual explains all current features of the MageSuite. It includes the functionalities of the MageSuite CMS "Content Constructor" and its components as well as numerous marketing and UX extensions for Magento 2.

Note for frontend developers

This documentation also holds value for frontend developers. Often, it includes insights into the development process, such as references to variables or settings pertinent to specific scenarios, along with links to MageSuite documentation. Take advantage of this resource to swiftly pinpoint code sections that need modification when working on designs aligned with this documentation.

Content of design guideline documentation

MageSuite Developer Documentation

Design guidelines