Infigosoftware

We will begin by uploading our required resources to the CSS Override area of your storefront back-end.

Click on  Content Management

Click on CSS Override

Select resources to upload

Click on Upload

Your resources have now been uploaded to your storefront.Each has been assigned a link which can be directly copied to your Code Mirror Editors and directly access the resource.

Your resources are now available

Whilst not mandatory, it is possible to group CSS Override resources by Chameleon group.Specify which Chameleon groups to use by clicking the '+' icon.

CSS Override resources can also be Chameleon group based

Our first Chameleon group based change will be to update the Header logo based on the customer accessing our storefront.We will start by navigating to the Header Editable Content block.

Click on Editable Content

Click on Edit

The Editable Content tab shows the default content, seen by those sitting outside of any Chameleon group.We can define content for specific Chameleon groups by adding a tab for that group and modifying the contents.

Click on '+' icon to add a Chameleon group

Choose a Chameleon group

Click on Create

On our example storefront, the RedCo. logo is used on the Editable Content tab.We will first change this to show the parent company logo, Colourful Inc.

For ease of access, keep the CSS Override screen open on a separate browser tab. Click on  Content Management

Right click on CSS Override and open in a new tab

Copy the link of the required CSS Override content

Paste the link into the line of code controlling the Header image

Click on Save and Continue Edit

To view these changes, click on Public store

This logo is displaying as your Storefront Administrator account is not present in any of the Chameleon groups

As you are logged in as a Storefront Administrator, the Colourful Inc. logo should be applied

We will use this code as a basis for all Chameleon groups.

Copy all content from the Editable Content, Code Mirror Editor area

Click on RedCo Chameleon Group

Click on Code Mirror Editor from Body text editor

Paste code into text area

Copy the link to the relevant content from the CSS Override section

Paste the link into the relevant line of code

Uncheck Apply Default Styling

Repeat this process for other Chameleon groups.In our demonstration, these are Blue Co. and Green Co.

To view these changes, click on  Customers

Click on Customer Management

Impersonate a customer sitting within one of your Chameleon groups

The logo will update to match that Chameleon group

Next, we will update the content within the Homepage Banner.Our initial aim will be to update the graphics within the banner using resources uploaded to the CSS Override section.This process is virtually identical to the change in logo, consisting of:<ul><li>Locate the Editable Content block</li><li>Create a content tab for each Chameleon group</li><li>Copy and paste the code data from the original Editable Content tab into the new Chameleon group tabs</li><li>Copy relevant links from CSS Override section</li><li>Paste the links into the Chameleon groups to overwrite the relevant content</li><li>Verify changes by impersonating Chameleon group customers</li></ul>

Locate the Homepage Banner block and click on Edit

Select or add a Chameleon group tab

Copy and paste code content from the Editable Content tab to the Chameleon group tab

Repeat this process for the other Chameleon groups

Insert the relevant CSS Override content link into the code editor

To verify changes, click on  Customers

Impersonate a user sat within a Chameleon group

Your updated Banner imagery will now display

Finally, we will update a hyperlink on our Homepage Banner Editable Content block, to ensure the correct product category is reached based on the customer.We will be modifying the button labelled by default as "Start Shopping".

Click on a Chameleon group

For ease of access, navigate to the Categories section on a new browser tab.We can use the category section to identify the URL of the category pages on the front-end of our storefront.

On a new tab, click on  Catalogue

Click on Categories

Click on Manage Categories

Note the number that appears in the page URL when editing, this will be the category ID.Such as: "<a target="_blank" rel="noopener noreferrer nofollow" class="cursor-pointer" href="https://training.infigosoftware.com/demofordocument/Admin/Category/Edit/7">https://training.infigosoftware.com/demofordocument/Admin/Category/Edit/7</a>"The category ID for this product category is 7, which we can use to build our front-end URL.The correct URL will also appear if you view the category on the storefront front-end.

Select a category relevant to your Chameleon group users and click on Edit

Navigate to the Homepage Banner Editable Content block and select the Chameleon group relevant to that product category

By default, the button URL will consist of the storefront token %Store.URL%.This can remain, however we will amend our category ID onto the end of this URL.So, to link to product category 7 we will add "/c/7", where:<ul><li>c represents a category</li><li>7 represents the category ID.</li></ul>Repeat this process for your other Chameleon groups.

Edit the URL then click Save and Continue Edit

Impersonate a user within a Chameleon group to verify these changes

Click the button on your storefront with the updated URL

The relevant product category page will load

Next, we will look at how to upload custom CSS files on a Chameleon group basis. This allows designers to add custom skinning to a site based on the logged in user.To begin, navigate to the CSS Override area.

This icon allows us to define a new CSS Override area for each of our specified Chameleon groups.

Click on '+' to utilise a Chameleon group

The new Chameleon group tab will now appear and is ready to receive custom CSS files.

Select your custom CSS file from file upload menu

The custom CSS file being used for this example is incredibly basic, designed simply to demonstrate this functionality.Once applied, we will see two primary changes per Chameleon group. These are:<ul><li>The hover colour of any buttons on our storefront</li><li>The accent colour of any featured products on our home page</li></ul>Please note, custom CSS grants scope for much more sweeping changes than those shown in this example.

Custom CSS file

Admins can download the uploaded CSS file if required. Useful if the exact file being used requires tweaking or reviewing.

Click on Download the uploaded CSS file

We will repeat these steps for a second Chameleon group

Click on '+'

Click on BlueCo Chameleon Group

Select "Chameleon Demo Blue.css" from file upload menu

We will now impersonate customers from these two Chameleon groups, and see how these changes appear on our storefront.

Click on  Customers

Click on Impersonate

For the Red Chameleon group, highlights are now appearing as red in colour

Category highlight colours

For the Red Chameleon group, button hover colours are now appearing as red.

Hover over a button

This will end the impersonation of a particular user.

Click on Log Out

Click on (back to customer list)

Impersonate a user from the other Chameleon group with custom CSS

For the Blue Chameleon group, highlights are now appearing as blue in colour

For the Blue Chameleon group, button hover colours are now appearing as blue.

We can also control the content of email templates based on Chameleon group.

Navigate to Email Message Templates

Select an email template and click on Edit 

Email message templates will have a Default tab, showing the email content sent to those sitting outside of selected Chameleon groups.

Email template

Click on '+' to activate a Chameleon group on the selected email template

Click on a Chameleon Group

The Chameleon group is now available for selection, giving you a space to customise the email content for members of that group.

This tutorial will build on the knowledge learned in BG_023_Change your storefront appearance based on customer.In BG_023, we learned of Infigo's Chameleon functionality, allowing you to change the look and feel of your storefront based on the customer viewing it.This tutorial takes this one step further, with worked examples showing how to customise various areas of your storefront homepage using Chameleon. We will cover:<ul><li>Updating the header logo</li><li>Updating the homepage banner imagery</li><li>Updating links</li><li>Updating custom CSS</li><li>Updating email templates</li></ul>