Welcome to Blugento

Summary:
1. What is Blugento?
2. How to access Design Customizer.
3. Styling options.
a. Basic Mode
b. Advance Mode.
4. Images
5. Layout Options

1. What Is Blugento?
Blugento is a new on demand eCommerce solution based on Magento and the
best components for successful business. With Blugento we have paired the best
technical basis with an extraordinary service layer for setup and coaching. This
puts you back in control of your business.
In other words, Blugento is the solution that will help, both new and old
Magento users, with customizing their shops with ease.
General website styling(including colors, fonts and other features), commonly
used images and layout options are now one click away.

2. How to access Design Customizer.

After installing Blugento, the Design customizer should be easily found
following the next steps:
a. Access the website admin area (usually found at www.example.com/admin)
The admin area looks like this

b. After accessing the Admin panel, go to the system tab (the drop-down opens
with a mouse hover action)

c. When you have the System tab opened, click on the Customise Design option

d. After clicking the mentioned option, you will be redirected to the Design
Customizer page in the Styling tab

This is where all the magic starts to happen.

3. Styling options.
a. Basic mode
The Styling options in basic mode have 2 tabs containing the most basic settings
regarding the website styling.

The General Tab has the 5 Primary Colors that will influence all other color
settings that inherit the primary colors.

I will change all the primary colors to see what the impact is in Front-End.
In the following picture we can see that everything that inherits the primary
colors that we changed has a different color:

The Header and Footer tab have basic styling functionality changes for the
header, footer and navigation. For example text and background colors are the
most basic things that someone would want to change for these sections.
This is an example of changes made in the admin section that we can see on
front-end.

b. Advanced mode - (http://puu.sh/lnzNx/11f3981119.png)

To switch to advanced mode, you have to click the "Switch to advanced mode"
button from the far right of the screen.

The Styling options in Advanced mode has 7 tabs containing more in-depth
settings regarding the website styling.

The first Tab is related to the Product listing/category pages.

The second Tab is related to all the options you can change for the Product page
(all types of products).
The third Tab is related to all the changes you can make for the Cart and
Checkout steps.
The forth Tab contains all the changes that can be made in the My Account
section.
The General Tab contains all the options from Basic mode + more advanced
changes.
The sixth Tab is related to more complex changes that can be made for Header
and Footer.
The last tab is currently Empty and more options will be added soon.

4.

Images

The Images section of the Design Customizer currently allows the user to
change certain images that are present on the store.

Note that every setting can be reverted to a default state by ticking the "Reset to
default" box and clicking on save.

For now, we allow the user to change the following images:

a. website logo (for mobile, desktop and e-mails);
In the next image, we changed the logo for the desktop view

b. the general page background (that applies to all the website pages)
The page background requires 2 settings to be able to see the changes in Front
end.
First, you have to upload a background image in the Images tab like we did in
the next picture.

The next step requires to go to the Layout Options tab and Enable the Page
Background Image.

After doing all these steps, you can see that we have a background on our
website.

c. footer marketing images

d. wishlist and compare icons

e. cart icon (both normal state and mouse hover state)

More options will probably be introduced in the near future or as requested by

our clients.

5. Layout

Options

This is the section where we change the aspect of the website in terms of layout.
Starting from basic things like choosing to have a background image and
removing certain options from the website to completely change the Navigation
Layout, product image size and number, images zoom options and many others.
The layout options are still work in progress but in the near future we will have
a number of "Standard" layouts from which the client will be able to chose.
But the main idea is to allow the clients to personalize how their website looks
without putting too much effort into it.
a. The first Option from this tab is the Debug Mode which will not be available
for clients. It is there currently just for the development process.

b. The second option is for Background image. We already discussed this option
in the Images section, point b. - these options are connected so please review
what was already mentioned.
c. The Navigation Layout influences the aspect of the Main navigation of the
website. Currently it has 9 options to chose from: No Navigation, Top
Navigation - Mega Menu, Top Navigation - Dropdown, Left Navigation, Left
Navigation - Mega Menu, Left Navigation - Push Down, Left Navigation - Drop
Down, Top Single Button - Mega menu and Top Single Button - Left Mega
Menu

We will give 3 examples just so you see how the changes in admin influence
the aspect of the website on Front-End.
1. Top Navigation - Mega Menu (this is what we currently use as "default")

2. Left Navigation - Push Down

!!!IMPORTANT!!! - all the layout options that are on the Left will leave the
Homepage without a navigation. Too see the changes you have to access a
category (for example http://bgblud2.cloudapp.net/en/women.html)

3. Top Single Button - Left Mega Menu

d. Product Page - Gallery Orientation, Product Page - Number of Images

Displayed in Gallery, Product Page - Main Image Size (relative to page width)
We will modify all these settings at once because we can see the changes on the
product page.

1. "Default" settings for the above mentioned options

2. After making some changes, we can see how they reflect in Front-End

e. The minicart layout has 4 settings: Counter-Dropdown, Counter & grandtotal

- Dropdown, Counter & grandtotal - cart link, Counter & grandtotal - checkout
link.
We will give 2 examples in the following rows.
1. The "Default" view is Counter - Dropdown as you can see in the next image

The difference between this setting and the Counter & grandtotal - Dropdown is
that on the second one we will also see a grand total next to the minicart icon.
2. Counter & grandtotal - Checkout link

The difference between this setting and the Counter & grandtotal - cart link is
that on the second one the client is sent to the CART and not in the
CHECKOUT step.

f. The Preloader status has 2 options: Enabled and disabled.

When it is set to Enabled, all the pages have an animated loader that looks like
the one in the picture below. When it's disabled, there will be no animation just
a standard loading of the page.

g. The next 3 settings are related to items that can be enabled or disabled from
the cart: Cart Clear Button, Cart Product Unit Price and Cart Product Thumbnail
1. The default values for these 3 settings are: Enabled. Which means that these
options are active on Front-end.

2. When disabling all of the settings, we will have the following result.

h. Checkout Billing and Shipping layout (they both have 2 settings - Dropdown
and Cards).
NOTE: to see these settings you have to be logged in and have at least 1
address saved in your account.
1. The default Magento setting is "Dropdown" as shown in the picture below.

2. The other setting is to make all the user's saved addresses to be displayed as
cards, as shown in the picture below.

i. Product Image Action - it influences the different ways how a user can interact
with a product image (in terms of Zooming).
This setting has 8 options but we will present only 2 of them, just to give
examples of how the interaction can be changed.
1. Cloud Zoom Outer.

2. Modal Popup with Zoomed Image

The other 6 settings have other interaction and I invite you to try all of them and
see how that influences the Front-end.

THANK YOU FOR YOUR TIME !