Customize your Experience Space
Last updated
Last updated
Making your Experience Space an extension of your Brand identity is really important to us. To make you feel like home, we’ve designed the Experience Space to be fully customizable, following the design system we’ve crafted but also while providing your own design for some key components of the Experience Space.
From your Back-Office, click on the cogwheel located in the left corner of the page’s header to open the Organization Settings dropdown and then click on Customization link.
You can choose to override the default Experience Space theme by specifying your own values to our design system's CSS variables. You can also provide your own fonts and use them by updating the related font-family variables. You'll find the complete CSS Variables Cheatsheet afterwards.
Here is the default theme we’re using for the Experience Space. You don’t need to override each of those variables, you can choose which part of the Experience Space you want to customize.
The names of the variables are quite straightforward and follow the names of existing CSS properties.
Depending on your background color, we automatically handle a dark mode for you if you don’t go deep into customization. You’ll find our dark mode theme at the end.
We have 2 types of buttons, those we call Primary and those we call Secondary.
Those properties will be applied to all input components (input, textarea, select, etc…)
The color of the <a> tags in the Experience Space
The border-radius of the <img> tags in the Experience Space
You can customize the background color and border-radius of your user’s Membership Pass
You can customize the links of the Experience Space’s header element containing the navigation
We have several components looking like cards (Digital Asset, Challenges, Perks, etc…) that you can customize. Don't worry about mobile viewports when you provide width for card components, we take care of it.
Some card components can display tags, those are the properties you can customize
You can change the width of the Experience Space left panel.
It's possible to toggle the visibility of some sections of the Experience Space. It's also possible to change their order.
The nomenclature is --xps-section-<pageName>-<sectionName>-[visibility|order], meaning that putting ---xps-section-home-achievements-visibility to hidden will hide the achievements section on the home page.
Here are the applied variables if we detect the need to apply a dark mode based on your background color.
In addition to the design system personalization, you are also able to provide your own implementation of several components used on the Experience Space. This feature is quite advanced, therefore be sure to have some experience in web development or we suggest that you contact us if you need some help.
All the component customization's forms work the same way :
First, there's a toggle to enable / disable the customization. Don't worry, if you have created a custom component and chose to disable it, it won't be erased and you can simply toggle back to find your implementation.
Then, there's a JSON editor with randomly generated data. The goal here is to provide a way to easily represent which data is available in the component's context that you'll be able to use to create your custom component. You can modify the data within the JSON editor and it will be updated in real time in the preview section. You'll find a complete description of each schema afterwards.
Each custom component shares the same default context data:
user
nullable
Can be null if a user accesses a store or a standalone challenge page un-logged.
user.id
string (uuid)
user.email
string
user.membership.memberHandle
string
Represents the user's unique nickname
user.membership.memberId
number
Represents the user's ID number
user.membership.subscriptionDate
date
user.membership.imageUrl
string
Represents the membership pass image URL you've provided in the back-office
lang
enum
Can be any of those but standard one are fr, en and es.Provided to help you deal with translations.
isMobile
boolean
Will be true if on a mobile viewport. Provided to help you deal with responsiveness.
Here is an example of a custom component implementation for the Perk's cards.
You can provide your own custom component for Digital Asset cards. Digital Asset cards can be found in several places : in Challenges or Stores rewards list, in the Space home page or in the Space rewards page. Here are the context data dedicated to the Digital Asset custom component:
digitalAsset
Represents a Digital Asset reward
digitalAsset.title
string
digitalAsset.description
string
digitalAsset.imageUrl
string
digitalAsset.videoUrl
string - nullable
Provided if the media you provided for the Digital Asset is a video
digitalAsset.smartContractAddress
string - nullable
Provided if the Digital Asset is an NFT
digitalAsset.ownership
nullable
Provided only when the user owns the Digital Asset.
digitalAsset.ownership.id
string (uuid)
digitalAsset.ownership.tokenId
number
Represents the unique number for a given Digital Asset
digitalAsset.ownership.createdAt
date
You can provide your own custom component for Perk cards. Perk cards can be found in several place : in Challenges or Stores rewards' list, in the Space home page or in the Space rewards page. Here are the context data dedicated to the Perk custom component:
perk
Represents a Perk reward
perk.id
string (uuid)
perk.title
string
perk.description
string - nullable
perk.imageUrl
string - nullable
Provided if the media you provided for the Perk is an image
perk.videoUrl
string - nullable
Provided if the media you provided for the Perk is a video
perk.videoThumbnailUrl
string - nullable
Provided if the media you provided for the Perk is a video
perk.type
enum
perk.raffle
nullable
Provided if the perk is a raffle
perk.raffle.status
enum
perk.integration
nullable
Provided if the perk has been configured with an integration
perk.integration.type
enum
perk.access
nullable
Provided only when the user owns the Perk.
perk.access.id
string (uuid)
perk.usagesCount
number
Represents the number of time a perk has been used
perk.usagesLeft
number - nullable
Provided if there's a limit to the number of times a perk can be used
perk.canBeUsed
boolean
Will be true if the user can use it
You can provide your own custom component for Challenge cards. Challenges cards can be found in the Space home page or in the Space Challenges page. Here are the context data dedicated to the Challenge custom component:
challenge
Represents a campaign of type Challenge
challenge.id
string (uuid)
challenge.title
string
challenge.description
string
challenge.imageUrl
string - nullable
Provided if the media you provided for the Challenge is an image
challenge.videoUrl
string - nullable
Provided if the media you provided for the Challenge is a video
challenge.totalSupply
number - nullable
Provided if you chose to limit the number of rewards that can be claimed
challenge.availableSupply
number - nullable
Provided if you chose to limit the number of rewards that can be claimed
challenge.status
enum
challenge.steps
array
Represents the list of tasks to achieve to complete the Challenge
challenge.steps[].id
string (uuid)
challenge.steps[].title
string
challenge.steps[].description
string
challenge.steps[].icon
string (emoji)
challenge.steps[].isCompleted
boolean
Will be true if the user has completed the step
challenge.rewards
array
Represents the list of rewards obtainable for completing a Challenge. Will be empty if no rewards can be gained
challenge.rewards[].id
string (uuid)
challenge.rewards[].title
string
challenge.rewards[].description
string - nullable
challenge.rewards[].imageUrl
string - nullable
challenge.rewards[].videoUrl
string - nullable
challenge.rewards[].type
enum
challenge.participation
nullable
Provided only when the user has opted in to the Challenge
challenge.participation.completedAt
date - nullable
Provided when the user has completed the Challenge
You can provide your own custom component for the Membership Pass. It's only visible in the left panel of the Experience Space at the moment. There's no additional context data other than the default one, except that the user won't be nullable since the Membership Pass is only rendered in a logged in context.
Finally, the editor section coupled with the preview. Custom components can be built using template engine, the Javascript implementation of Liquid template engine made by Shopify. For CSS, simply provide a <style> tag in your component implementation. You can and you should reference variables from the design system.
The preview is updated in real time while you are updating the code in the editor. The preview's width will depend on the custom component css variable width value (i.e --xps-perk-card-width). The editor provides autocompletion for context data (exposed through the JSON editor) as well as data validation for context data.
