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.
