00:00:14:12 - 00:00:15:11
This tutorial will

00:00:15:11 - 00:00:18:09
build on the knowledge
learned in the previous tutorial

00:00:18:15 - 00:00:20:29
which was BG 023

00:00:21:14 - 00:00:24:05
change your storefront appearance
based on customer.

00:00:25:25 - 00:00:27:21
So in that previous tutorial

00:00:27:21 - 00:00:32:08
we learned of Infigo's chameleon
functionality that allows you to change

00:00:32:08 - 00:00:36:09
the look and feel of your storefront
based on the customer that is viewing it.

00:00:37:25 - 00:00:39:28
This tutorial takes it one step further.

00:00:39:28 - 00:00:44:05
So with worked example
showing how to customize various areas

00:00:44:05 - 00:00:48:07
of your storefront homepage
using the community and functionality.

00:00:49:05 - 00:00:52:29
What we're going to cover in
this tutorial is updating the header logo,

00:00:53:27 - 00:00:58:14
updating the homepage banner imagery,
and updating some links on your home

00:00:58:14 - 00:01:01:01
page as well.

00:01:04:21 - 00:01:08:18
So we're going to begin
by uploading our required resources

00:01:08:18 - 00:01:13:21
to our CSS override area,
and that's in your storefront backend.

00:01:14:12 - 00:01:16:17
So that's content management

00:01:17:27 - 00:01:20:13
and CSS override.

00:01:23:10 - 00:01:25:20
You then select the resources
you wish to upload.

00:01:25:20 - 00:01:28:06
So we're ignoring the CSS file
section of this.

00:01:28:06 - 00:01:31:02
We're just jumping straight down
to uploaded resources.

00:01:31:20 - 00:01:35:17
Now you do have the option to actually
utilize chameleon groups here as well.

00:01:36:09 - 00:01:39:17
Or if you're not got too much content
you wanting to use, you can just upload it

00:01:39:18 - 00:01:41:27
to the default section.

00:01:43:13 - 00:01:45:23
I will do the latter
for this particular tutorial.

00:01:47:11 - 00:01:49:03
So if I go on

00:01:49:19 - 00:02:02:13
file, select,
I've got these resources here.

00:02:02:13 - 00:02:06:14
You should also have similar resources
in the file pack that you've

00:02:08:01 - 00:02:10:03
been able to obtain to do these tutorials

00:02:12:12 - 00:02:34:28
open and then upload.

00:02:35:25 - 00:02:38:25
The page will refresh
when those files are uploaded.

00:02:40:03 - 00:02:43:04
Each has been assigned a link
which can be directly copied,

00:02:43:04 - 00:02:44:12
so you'll see any of those.

00:02:44:12 - 00:02:46:14
Now has a link associated with it.

00:02:46:14 - 00:02:49:29
We can copy that
and we can use that in our Code

00:02:49:29 - 00:02:54:10
Mirror editors to directly access
that particular resource.

00:03:00:07 - 00:03:01:17
So our first Chameleon Group

00:03:01:17 - 00:03:04:12
based change
will be to update the header logo

00:03:05:15 - 00:03:07:18
and our storefronts
for go to our storefront.

00:03:08:03 - 00:03:11:12
And that's going to be based
on the customer

00:03:11:12 - 00:03:13:11
that's accessing our storefront.

00:03:13:11 - 00:03:17:20
So essentially we want this to change to
from red co to blue green

00:03:18:05 - 00:03:22:01
based on the user that's logging in.

00:03:24:01 - 00:03:27:00
So to do this, I'm
going to find the editable

00:03:27:00 - 00:03:29:14
content block that controls my header.

00:03:30:02 - 00:03:34:12
So that's within content management,

00:03:34:12 - 00:03:38:03
editable content.

00:03:38:03 - 00:03:40:05
And then we're going to scroll down
Section one

00:03:41:06 - 00:03:43:28
and look for the header.

00:03:49:17 - 00:03:51:13
Now our next step is to add

00:03:51:13 - 00:03:55:15
a new chameleon group
for each of the companies

00:03:55:15 - 00:03:58:15
that we want to be able to represent
and change the logo for.

00:03:59:15 - 00:04:02:22
So as a reminder from the previous
tutorial, we click on this icon

00:04:02:22 - 00:04:06:27
here to add a new tab
related to a particular chameleon group.

00:04:08:09 - 00:04:08:21
So if I

00:04:08:21 - 00:04:12:06
click on the post icon,
he shows me a list of our chameleon groups

00:04:12:06 - 00:04:15:27
that we've defined,
and I can add them one by one.

00:04:16:15 - 00:04:32:25
And there's a new tab appears
for each group that we add.

00:04:35:15 - 00:04:37:21
What I'm going to do to begin
with is change

00:04:37:21 - 00:04:40:29
the editable content
logo is being utilized.

00:04:41:10 - 00:04:44:11
Now the reason I want to do this
is that our three chameleon

00:04:44:11 - 00:04:46:28
groups represent
all three subsidiary companies

00:04:47:12 - 00:04:51:11
at the moment, editable content type,
which is the default tab

00:04:51:26 - 00:04:54:21
that anyone outside of those groups
will see.

00:04:55:05 - 00:04:59:25
That's currently using our red co logo.

00:05:00:24 - 00:05:03:03
So I do want to change that.

00:05:03:03 - 00:05:09:09
So I'm going to go to our CSS
override resources again, and I'm actually

00:05:09:09 - 00:05:13:28
going to open that open in a separate tab
just to make it easier for me.

00:05:14:12 - 00:05:18:22
So content management
and then open up CSS override

00:05:21:16 - 00:05:21:25
and I'm

00:05:21:25 - 00:05:24:27
going to put in the logo
of our parent company.

00:05:24:27 - 00:05:26:20
So Colourful Inc.

00:05:27:12 - 00:05:29:04
I just copy

00:05:29:29 - 00:05:32:00
the link that it's created for us

00:05:34:01 - 00:05:37:00
and then I'm going to paste
that into my code

00:05:37:00 - 00:05:39:07
to replace the current logo

00:05:39:07 - 00:05:47:20
image.

00:05:48:16 - 00:05:50:26
I can test that by saving that particular

00:05:51:16 - 00:05:54:14
content block
and refreshing our storefront

00:05:55:15 - 00:05:56:12
as I'm currently logged in

00:05:56:12 - 00:05:59:23
as an administrator, which sits outside
of our chameleon groups.

00:06:00:06 - 00:06:17:01
You can see our logo is updated,

00:06:17:01 - 00:06:19:29
so we're only going to be making
minor changes to our header.

00:06:20:00 - 00:06:26:01
So I'm just going to copy the content
from our editable content block

00:06:26:08 - 00:06:29:27
and tap into our subsequent
chameleon groups.

00:06:30:27 - 00:06:34:24
First off, we want it to be HTML,
so I'm going to switch to Code Mirror

00:06:34:24 - 00:06:40:10
Editor that allows me to actually
input HTML format code.

00:06:40:24 - 00:06:41:11
Paste

00:06:43:09 - 00:06:43:18
And then

00:06:43:18 - 00:06:46:19
this is the Red Code Chameleon Group,

00:06:46:19 - 00:06:48:27
so I'm going to copy the relevant content

00:06:48:27 - 00:06:51:20
for my CSS override

00:06:56:14 - 00:06:59:07
and paste it into my code.

00:06:59:13 - 00:07:01:15
Don't forget to save after each

00:07:03:00 - 00:07:06:08
change you make to these tabs
as if you switch to another tab,

00:07:06:08 - 00:07:10:09
it may lose that content.

00:07:10:09 - 00:07:13:17
And I'm going to repeat that process
for the other two

00:07:13:17 - 00:07:16:14
chameleon groups.

00:07:22:02 - 00:07:25:02
The next step is to check whether
these changes have been successful.

00:07:25:20 - 00:07:27:24
So I'm going to navigate to customers,

00:07:28:10 - 00:07:31:14
customer management, and impersonate users

00:07:31:14 - 00:07:34:07
who sits within those particular
chameleon groups.

00:07:35:22 - 00:07:39:09
I'll start off by going to one of our Blue

00:07:39:09 - 00:07:43:15
Co Department members,

00:07:43:15 - 00:07:46:28
and you can see that our logo has updated.

00:07:50:03 - 00:07:52:20
And just to verify,
I'll repeat the process with

00:07:53:27 - 00:07:55:07
a Green Co. member

00:07:59:04 - 00:07:59:29
and again, that's

00:07:59:29 - 00:08:08:07
been updated.

00:08:13:13 - 00:08:13:29
So next

00:08:13:29 - 00:08:16:19
we'll update the content
within the home page banner.

00:08:17:18 - 00:08:21:19
Our initial aim will be to update
the graphics within the banner

00:08:21:19 - 00:08:26:06
using some of the resources
we've awarded to the CSS override section.

00:08:27:00 - 00:08:29:15
This is just showing

00:08:29:22 - 00:08:32:08
a very basic GIF animation.

00:08:33:16 - 00:08:35:29
More likely
that you're going to want it as

00:08:35:29 - 00:08:38:21
something a little bit more complex,
higher quality.

00:08:39:02 - 00:08:43:28
But we'll just put some alternatives
to this in for now as well.

00:08:45:26 - 00:08:49:14
So this process is virtually identical
to the change in logo.

00:08:49:25 - 00:08:53:06
So this consists of locating the editable
content block

00:08:53:24 - 00:08:58:19
creates a content tab for each
chameleon groups.

00:08:58:23 - 00:09:02:06
Copy and paste the code
from the original editable content.

00:09:02:06 - 00:09:04:10
Tap into the new Chameleon Group Taps.

00:09:05:15 - 00:09:09:07
Copy the relevant links from the CSS
override section.

00:09:09:07 - 00:09:13:06
Paste the links into the chameleon groups
to overwrites the relevant content

00:09:14:04 - 00:09:16:21
and then verify those changes.

00:09:16:21 - 00:09:19:15
So we'll go through
putting this into one user now

00:09:20:05 - 00:09:24:09
and then the video will cut to all three
of those chameleon groups

00:09:24:19 - 00:09:33:04
being input.

00:09:34:24 - 00:09:37:19
So content management,

00:09:37:19 - 00:09:39:20
editable content.

00:09:40:10 - 00:09:42:27
This time we're going to navigate
to our home page banner,

00:09:42:27 - 00:09:48:22
which is in section two,
and we can see that

00:09:48:22 - 00:09:53:06
we already have our chameleon groups
defined on this particular content block

00:09:53:06 - 00:09:57:13
and that's because of the task
we completed in the previous

00:09:58:17 - 00:09:59:25
tutorial.

00:10:00:02 - 00:10:02:08
But the methodology for getting these
is exactly

00:10:02:08 - 00:10:04:10
the same.

00:10:09:06 - 00:10:10:26
All we're going to do

00:10:10:26 - 00:10:12:29
is locate the content we want

00:10:15:21 - 00:10:18:00
in our CSS overwrite section.

00:10:18:19 - 00:10:23:13
Copy it from here
and paste it into the relevant tab.

00:10:26:08 - 00:10:28:13
So we'll start off with our

00:10:29:06 - 00:10:32:01
editable content book.

00:10:32:02 - 00:10:34:04
Don't forget to save after each change

00:10:55:24 - 00:10:56:09
and then we'll go

00:10:56:09 - 00:11:01:10
ahead and complete the same process
for the other two chameleon groups.

00:11:02:13 - 00:11:06:02
As with the task
earlier on will confirm that

00:11:06:02 - 00:11:10:06
those have been successfully implemented.

00:11:10:06 - 00:11:13:15
Go back to our customer management

00:11:14:06 - 00:11:16:09
and impersonate users

00:11:16:09 - 00:11:21:22
from different departments,
different chameleon groups.

00:11:22:01 - 00:11:23:20
What we should see

00:11:23:28 - 00:11:26:13
is that the resulting image
on our homepage banner

00:11:26:23 - 00:11:36:13
updates as necessary.

00:11:42:15 - 00:11:46:03
The final change we're going to make here
is to update

00:11:46:03 - 00:11:49:06
a hyperlink on our homepage banner
so we find navigate

00:11:49:06 - 00:11:53:16
back to my storefront.

00:11:55:23 - 00:11:57:24
So hyperlink on our stuff page banner.

00:11:57:25 - 00:11:59:28
So this one here

00:12:00:19 - 00:12:02:10
to ensure the correct product

00:12:02:10 - 00:12:04:26
categories reached based on our customer.

00:12:05:20 - 00:12:11:26
So we'll be modifying the button
labeled as start shopping.

00:12:11:26 - 00:12:15:27
And what we want this to do, just to
confirm, depending on who logged in as

00:12:15:27 - 00:12:19:15
so let's say we're logged in
as a blue company team member

00:12:20:03 - 00:12:25:01
and when we click on Start Shopping,
we want to take the customer immediately

00:12:25:01 - 00:12:28:06
to the relevant product category
to show just those

00:12:28:06 - 00:12:31:13
particular products.

00:12:31:13 - 00:12:33:18
And again,
the process that we're going to follow

00:12:33:18 - 00:12:36:24
here is virtually identical
to the previous two tasks.

00:12:37:14 - 00:12:38:21
So if I go back to

00:12:41:26 - 00:12:44:15
our editable content tab

00:12:44:15 - 00:12:46:15
again, this is on the home page banner

00:12:48:01 - 00:12:55:15
and then we're

00:12:55:15 - 00:12:57:18
just going to look through the code

00:12:59:11 - 00:13:01:12
that we have written here.

00:13:01:20 - 00:13:04:27
This should be a fairly

00:13:05:06 - 00:13:09:18
visible section of that code which is
relating to that particular button.

00:13:09:18 - 00:13:14:12
So we remember the text on the button
was start shopping and then immediately

00:13:14:12 - 00:13:17:17
preceding that is the URL that that button
is currently using,

00:13:18:02 - 00:13:20:15
which at the moment is just the store
you are URL.

00:13:20:20 - 00:13:23:13
So it will just take you straight
back to the home page.

00:13:25:06 - 00:13:29:02
What we want to do is to change this link
for every chameleon group

00:13:29:06 - 00:13:33:13
to take it to a different category.

00:13:33:13 - 00:13:36:25
And the first thing we need to do to
to see that is to actually find

00:13:37:09 - 00:13:41:10
what the category ID is
and what the relevant you are URL is.

00:13:42:11 - 00:13:42:27
So on a

00:13:42:27 - 00:13:45:23
different tab, again, I'm
going to navigate to catalog

00:13:46:24 - 00:13:49:19
categories and manage categories

00:13:51:10 - 00:13:53:23
is the three or four categories

00:13:53:23 - 00:13:57:08
that we set up in a previous tutorial

00:13:57:08 - 00:14:00:12
on any of those I can click on edit

00:14:00:12 - 00:14:04:04
and then the category ID will
actually appear in the URL at this point.

00:14:04:26 - 00:14:07:29
Alternatively,
you can go on view product page,

00:14:07:29 - 00:14:11:19
which will take you directly
to the category page and it will show you

00:14:12:24 - 00:14:15:18
exactly the URL
that will take you to that page.

00:14:16:00 - 00:14:18:00
Now, don't worry
that I'm not seeing anything here

00:14:18:03 - 00:14:20:24
because we've got access
permissions activated

00:14:21:00 - 00:14:23:02
and I am viewing this as an administrator.

00:14:24:00 - 00:14:26:12
So we haven't got the access rights
at the moment.

00:14:27:18 - 00:14:28:10
That's fine.

00:14:28:10 - 00:14:43:26
So I'm just going to take the end of that
URL, go to my red

00:14:43:26 - 00:14:48:28
co group, and then just put that straight
on the end of the store.

00:14:49:06 - 00:14:50:04
URL token

00:14:53:26 - 00:14:56:11
and then save.

00:14:56:11 - 00:15:00:05
And I'm going to perform the same process
for Green Company and Blue

00:15:00:05 - 00:15:01:02
Company

00:15:05:00 - 00:15:08:13
with those in place and once again
going to go and test the changes

00:15:08:13 - 00:15:12:09
that we've made starting off
by logging in as an administrator.

00:15:12:09 - 00:15:14:26
So this should just take me directly
back to the home page

00:15:14:26 - 00:15:22:14
when I click this button,
then I'm going to check

00:15:22:15 - 00:15:27:03
by impersonating users
from different chameleon groups.

00:15:27:03 - 00:15:30:00
So I'll start off with our red user

00:15:41:10 - 00:15:43:11
and it's taking me directly
to the relevant category.

00:15:43:11 - 00:15:53:12
So when we're seeing red products,
I will try it with our blue

00:15:53:13 - 00:16:01:22
user as well.

00:16:03:24 - 00:16:08:06
going to look at how to upload custom
CSS files on a Chameleon Group

00:16:08:07 - 00:16:09:10
basis.

00:16:09:10 - 00:16:13:08
This allows designers to add custom
skinning to a site based on the logged in

00:16:13:08 - 00:16:14:02
user.

00:16:15:07 - 00:16:18:16
So to begin, we're going to navigate
to our CSS Override area.

00:16:19:04 - 00:16:22:03
So that's in the content management area.

00:16:22:14 - 00:16:25:28
And then CSS Override.

00:16:27:17 - 00:16:31:27
Now similar to what we've seen
in other areas of Infigo, we we have this

00:16:31:27 - 00:16:35:24
plus icon at the top of the screen
next to our default tab.

00:16:36:09 - 00:16:39:09
This allows us to specify
a particular area

00:16:39:18 - 00:16:42:13
per Chameleon group.

00:16:44:11 - 00:16:46:15
So if I click on this,
that gives me access

00:16:46:15 - 00:16:49:17
to all of the chameleon groups
that I have created.

00:16:50:21 - 00:16:52:19
I can select the group that I want

00:16:52:19 - 00:16:56:04
and click on Create,
and that makes a separate area

00:16:57:09 - 00:16:59:09
for that particular Chameleon group,

00:16:59:09 - 00:17:03:19
allowing me to upload custom resources
for that group and custom

00:17:03:19 - 00:17:06:13
CSS files.

00:17:11:28 - 00:17:12:19
So all we need to do

00:17:12:19 - 00:17:16:04
to load our custom resources
and custom files

00:17:16:17 - 00:17:19:00
is to say, choose an associated file

00:17:21:09 - 00:17:23:21
and then hit upload.

00:17:24:11 - 00:17:26:07
What you'll find
is that you also have the ability

00:17:26:07 - 00:17:29:12
to download
the currently uploaded CSS file.

00:17:29:12 - 00:17:32:18
So if at some point in the future
you need to review what's currently

00:17:32:18 - 00:17:36:12
being utilized or make some amends,
you can just directly download it

00:17:36:20 - 00:17:39:22
from your CSS Override area
for that particular

00:17:39:22 - 00:17:40:17
Chameleon group.

00:17:43:08 - 00:17:46:01
And before we do
anything else, I'm just going to repeat

00:17:46:01 - 00:17:55:28
that step for a second Chameleon group.

00:18:01:11 - 00:18:02:12
Okay.

00:18:02:12 - 00:18:06:00
Now, these CSS file
loaded here is incredibly simple.

00:18:07:03 - 00:18:10:16
It's just designed
simply to demonstrate this functionality.

00:18:11:02 - 00:18:13:15
So if we just take
a look at what that contains.

00:18:15:02 - 00:18:17:13
As you
can see, it's quite basic once applied.

00:18:17:24 - 00:18:21:02
And when we're actually viewing
our storefronts as different users

00:18:21:02 - 00:18:25:26
in those different chameleon groups,
we're going to see two primary changes.

00:18:25:26 - 00:18:29:05
And this is the hover of any buttons
on our storefront

00:18:30:06 - 00:18:33:24
control
by this section here and the accent color

00:18:33:24 - 00:18:36:17
for any featured products
which are on our home page.

00:18:37:12 - 00:18:40:15
Just control by this section here
and all that.

00:18:40:15 - 00:18:44:22
I've got different between
the two different CSS files I’ve uploaded.

00:18:45:03 - 00:18:48:29
This has been written in a way where I can
just control the color of those changes.

00:18:48:29 - 00:18:53:06
So the hover color and the accent color
by changing

00:18:53:26 - 00:18:57:04
the word of the color
that I'm utilizing here.

00:18:57:06 - 00:19:00:13
So that's the only change
that's been made.

00:19:02:11 - 00:19:04:23
Please note that custom CSS grants scope

00:19:04:23 - 00:19:07:24
for much more sweeping changes
than what we can see here.

00:19:08:03 - 00:19:16:01
This is just a very basic example.

00:19:20:12 - 00:19:20:20
Okay.

00:19:20:22 - 00:19:22:00
And that's all that we need to do.

00:19:22:00 - 00:19:25:03
So let's take a look at our storefront.

00:19:25:04 - 00:19:28:18
Whilst impersonating customers
within those Chameleon groups

00:19:28:18 - 00:19:31:21
and we'll see what
those changes have done.

00:19:31:21 - 00:19:35:29
So if I go to our customer management
screen,

00:19:35:29 - 00:19:41:14
we're going to locate some relevant users
and then impersonate those users.

00:19:41:14 - 00:19:44:19
So I'll start off with our red user.

00:19:44:19 - 00:19:47:15
We can see that if I hover over the button
highlights in red

00:19:48:17 - 00:19:52:21
and I have accents on my featured
categories of feature products

00:19:53:09 - 00:20:01:13
which are also red, I'm
going to log out of there

00:20:02:05 - 00:20:04:17
and do the same with a customer

00:20:04:17 - 00:20:12:16
in my blue department.

00:20:12:16 - 00:20:15:15
And you can see that if I hover
over the button now highlighted in blue

00:20:17:10 - 00:20:20:04
and our accent colors

00:20:20:11 - 00:20:21:06
on the categories

00:20:22:16 - 00:20:23:17
are now appearing in

00:20:23:17 - 00:20:26:17
blue rather than in red.

00:20:26:17 - 00:20:29:06
So that's a very simple example
of what those changes

00:20:29:06 - 00:20:43:19
can accomplish.

00:20:43:23 - 00:20:45:11
The final thing
we're going to look at here,

00:20:45:11 - 00:20:50:00
we can also control the content of email
templates based on Chameleon Group.

00:20:50:22 - 00:20:53:19
So if I look
for my email message templates

00:20:56:02 - 00:20:59:00
now we go through what
these are in a different tutorial,

00:20:59:07 - 00:21:02:29
but it essentially allows us
to customize the emails that get

00:21:02:29 - 00:21:07:03
sent out to our customers
or to various members of our team,

00:21:07:22 - 00:21:10:03
which are triggered as various things
happen

00:21:10:12 - 00:21:13:07
in the ordering and fulfillment process.

00:21:14:20 - 00:21:16:27
All we're doing in here
is we're going to select

00:21:17:09 - 00:21:20:01
one of our templates.

00:21:20:01 - 00:21:23:06
So let's go to order paid, for example,

00:21:23:06 - 00:21:29:00
and then hit edit over on the right hand
side of that entry.

00:21:29:00 - 00:21:34:14
And what you can see here is a fairly
similar and familiar interface.

00:21:34:24 - 00:21:39:03
So we've got our default option here,
which is going to be used for anyone

00:21:39:03 - 00:21:42:18
sitting outside of our Chameleon in groups
that haven't been specified.

00:21:43:13 - 00:21:46:22
However,
if we want to customize this content

00:21:46:22 - 00:21:50:06
for particular users
within particular chameleon groups,

00:21:50:21 - 00:21:54:24
then we can just hit this
plus icon here which will allow us to

00:21:55:29 - 00:21:57:01
add a new tab

00:21:57:01 - 00:22:00:25
for a particular Chameleon group

00:22:00:29 - 00:22:02:04
and modify the content

00:22:02:04 - 00:22:10:18
appropriately.