Versions Compared

Old Version 3

changes.mady.by.user Marta Siewierska-Stańczak

Saved on

compared with

New Version 4

changes.mady.by.user Marta Siewierska-Stańczak

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

User area

Sidebar

The sticky sidebar/menu actually is the only element that can be a bit heavier 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:

...

Info

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

https://www.haar-shop.ch/en/customer/account/login

https://haka.com/de/customer/account/login

https://ipet.ch/customer/account/login/

https://www.micro-scooter.com/ch_de/customer/account/login/

https://www.sorgenfri-sylt.de/en_de/customer/account/login

https://www.titoloshop.com/eu_en/customer/account/login

Optional modules

Instant purchase

Info

check documentation: Instant purchase (optional)

...

With the module enabled, there is a modified order history table available in the user area:

...

Quick reorder

Info

check documentation: QuickReorder (optional)

...