User area / sign in and register form
- Marta Siewierska-Stańczak
Â
TABLE OF CONTENTS
Summary
User area and related forms are the parts in MageSuite that stick closely to Magento layout and styling. Inputs, tables, global messages, and buttons inherit their style from the theme design.
Demo
Create an account in the demo shop: https://demo.magesuite.io/en/customer/account Make some orders, and add your addresses and some products to the wishlist.
Dashboard sidebar
The sticky sidebar/menu actually is the only element that can be a bit more heavily customized:
Â
Dashboard
General styling for inputs, tables, and texts is applied on the main dashboard.
Please note that table rows are displayed as texts on mobiles.
Â
MageSuite dashboard scenarios
There is a possibility to apply darker background for the use area and keep elements as contrast boxes:
Dev hint: play with the following variables in dashboard.scss file:
// Values specific for shops with background
$dashboard_has-darker-background: false !default;
$dashboard_boxes-background: transparent !default;
$dashboard_hide-sections-separators: false !default;
$dashboard_hide-titles-separators: false !default;
// Set value if $dashboard_has-darker-background is set to true
$dashboard_boxes-inner-padding: 0 !default;
// For shops white white background it is also needed as it is part of spacing system.
// For shops with darker background value here can be smaller of higher
$dashboard_space-between-boxes: 2rem !default;
Login/register page
The login/register page displays 2 boxes: login form and register box.
https://demo.magesuite.io/en/customer/account/login
Live shops examples
URL | Screen |
|---|---|
 | |
 | |
 | |
  | |
 | |
 |
Â
Optional modules
Instant Purchase
check documentation: Instant purchase (optional)
This module extends the default instant-purchase functionality of Magento, providing the possibility to quickly reorder previously bought items and rebuy them with one click
Instant purchase (optional) | Frontend screens
With the module enabled, there is a modified order history table available in the user area:
Quick reorder
check documentation: QuickReorder (optional)
This module introduces an easier way of reordering the whole last order or a selection of products from the previous orders. Both functionalities are available for logged-in users.
The latest purchased products carousel is rendered at the top of the User Area pages (can be also moved to the bottom, or restricted to specific User Area pages). It reuses templates of CC headline and products-carousel components.
The quick reorder banner is a small, sticky bar at the top of the page - it does not appear in the user area, cart, and checkout but on all the other pages.
Â