BG_023_Changing your storefront appearance based on customer
In this tutorial, we will introduce Infigo's Chameleon functionality.
The Chameleon module allows you to change the look and feel of your storefronts based on which user is signed in, what pages they are on, the URL they are using, and more.
Using Chameleon, you are able to give different users different versions of the following configurable areas:
Message Templates
Editable Content
CSS Override.
This will allow you to give different users an entirely different view of the same storefront, especially when paired with Access Permissions.
Please note that Chameleon is a paid module. If you would like to inquire about purchasing Chameleon, please contact greg.young@infigo.net
Infigosoftware
1. Click on Configuration
After purchasing Chameleon, you will need to raise a support ticket for user access to the module.
Once you have access you need to enable the module.
2. Click on Settings
3. Click on General Settings
4. Check Enable Chameleon
5. Click on Save
6. Click on Content Management
Next, we need to create or manage a Chameleon Group.
7. Click on Chameleon
8. Click on Add New Chameleon Group
In order to create variations of the editable areas listed earlier in this tutorial, you will need to create one or more Chameleon Groups.
Each group will have its own alternative version of the editable area, and you are able to configure up to 10 different groups, meaning you can have up to 10 alternatives to each editable area.
However, please note that an excessive amount of Chameleon Groups can be difficult to manage. It may also result in slower site speeds when a large amount of groups are configured, so please try to limit the number of groups you have.
9. Type a Chameleon Group name
For this example, type "RedCo Chameleon Group".
10. Check Enabled
This ensures this Chameleon group is active.
11. Click on Insert
12. Click the '+' icon to access additional configuration settings.
13. Click on Add New Chameleon Configuration
To determine whether a user falls into a Chameleon Group or not, you must create rules against each Chameleon Group. Each rule is effectively a set of conditions to be met, and if a user meets all conditions for any of the rules you create, then they will be considered part of that Chameleon Group.
Note: If a user meets one or more rules for separate groups, then they will be considered part of the group which they meet the most rules for. If a user meets an equal number of rules for two or more groups, then this is considered an invalid configuration as your groups should have rules unique enough to prevent this from occurring.
To create rule for a Chameleon group, simply expand the group and click Add New Chameleon Configuration. This will add a new record which you will have to name, enable and save (by clicking insert).
14. Type "RedCo Department"
15. Check Enabled
Infigosoftware
16. Click on Insert
17. Click on Configuration
18. Click on RedCoDepartment from Department
There are multiple fields which can be used to determine whether or not a user should fall into this Chameleon group.
In order for a user to meet the rule's requirements, they must pass every configured field's test. For example, if you configured both Department and Customer Role then the user will need to both be in the configured department and have the configured role assigned.
For our example, we will assign one of our configured departments.
Here is a summary of the fields in the Chameleon Configuration window:
Enabled - Whether or not this Chameleon rule is active.
Order -The display order of the Chameleon rules in admin. The lower this number, the sooner the rule appears in the list.
UrlPattern -You can enter a regular expression in this field that will be used to check the URL. If the user's current URL path matches the expression, they will meet this field's requirement.
Department - If the user is in the department selected from the dropdown, they will meet this field's requirement.
Customer role - If the user has the customer role selected from the dropdown, they will meet this field's requirement.
Category - If the user is currently browsing the category set for this field, they will meet this field's requirement.
Product group - If the user is on the landing page of a product that is part of the configured group, they will meet this field's requirement.
Product tag - If the user is on the landing page of a product that has the configured product tag assigned, they will meet this field's requirement.
Valid from - This allows you to set a start date for the Chameleon group. So long as this date is not in the future, this field's requirement will be met.
Valid to - This allows you to set an end date for the Chameleon group. So long as this date is not in the past, this field's requirement will be met.
19. Click on Save
20. Repeat these steps to set up two more Chameleon groups
Set up Chameleon groups for BlueCo and GreenCo
21. Click on Content Management
Now that Chameleon is enabled and you have one or more groups configured, you can configure what's known as Context Variants for each group. A Context Variant is simply that group's version of that editable item.
The areas you can configure Context Variants for are:
CSS Override
Editable Content
Message Templates
Next, we will utilise our Chameleon groups on one of the Editable Content blocks.
Infigosoftware
22. Click on Editable Content
23. Navigate to the Homepage banner and click on Edit
24. The code currently applied to the Homepage Banner will be shown
25. Click on the '+' icon to create new versions of this Editable Content based for Chameleon groups
26. Select the Chameleon group to use
Infigosoftware
27. Click on Create
28. Click on the newly added Chameleon group
29. If needed, click on Code Mirror Editor from Body text editor
This switches between the Rich Editor and Code Mirror Editor, allowing you to type custom code.
30. Copy the code present in the Editable Content tab into the new Chameleon group
You can write your own custom code in the new Chameleon group, there is no requirement for it to match the Editable Content tab.
For this example, we will only make minor changes between Chameleon groups.
31. For this tutorial, we will modify the welcome message per Chameleon group
32. Click Save and Continue Edit
33. Add the two other Chameleon groups and modify the welcome messages
Modify the welcome messages in the three Chameleon groups and the Editable Content tab to read one of the following:
Welcome to Colourful Inc. %Customer.FullName%
Welcome to Red Co. %Customer.FullName%
Welcome to Blue Co. %Customer.FullName%
Welcome to Green Co. %Customer.FullName%
Remember to click Save and Continue Edit after changing each tab or your changes will not be implemented.
34. Click on Customers
We will now view our frontend storefront whilst impersonating various customers to assess these changes.
35. Click on Customer Management
36. Click on Public store
Infigosoftware
37. Viewing as your Storefront Administrator (not in any department) will show the Editable Content message
38. Click on Impersonate
39. Your welcome message will update to suit the impersonated customer
This same methodology can be used to fully customise your storefront.