This guide will show you how to customise the design for your referral touchpoints using the theme editor.
Edit Controls
The edit controls enable the editing of the theme and the ability to push changes live.
The edit controls in the top right of the theme editor
Edit mode
This button must be switched on to make any edits to the theme. All edits are autosaved but not put live - If you were to close the page and return, all you need to do to see your edits is toggle the edit mode back on.
Publish button
Once your happy with your changes, clicking the publish button will push these live across all offers linked to the theme you edited.
Touchpoint Navigation
Depending on what offer you're previewing, the navigation will adjust to show you the touchpoints that are being used. Simply click the one you want to edit and the styling controls will show for that touchpoint.
The touchpoint navigation in the top left of the theme editor
Preview Controls
The preview controls change what your seeing in the theme editor so you can consider the design across different offers, journeys and viewports.
Preview offers
You can choose what offer to show in theme editor, as long as the theme has been assigned to it.
Selecting an offer from the list of offers assigned to the theme
Screen filters
Choose between key screens or all screens to display your designs on. You can further refine this by choosing between referrer or referee screens.
The screen filters at the top of the theme editor
Comment and View mode
Switching to comment mode allows you to click anywhere on the screens and leave a comment. This can be to request an amend from your design team or leave a note for your colleague to consider copy. Switching back to view mode will take your back to the touchpoint without any comments visible.
Device views
You can preview the touchpoint in mobile or desktop view. You can also leave comments separately on mobile or desktop so you can leave more specific feedback.
Styling Controls
Not all settings will be the same for each touchpoint as some are unique to each other. Some touchpoints will also have a reduced amount of styling options as they inherit the screen styling for consistency across your site.
The email touchpoint has no styling controls. This must be done via custom CSS and we recommend you request the Mention Me design team to style this for you.
Page/layout Styling
This controls the main container or iframe of the selected touchpoint. This will most commonly include background colour styling and master controls which cascade across the touchpoint.
Text Styling
You can style Headings, Body copy and terms and conditions from here. Most text formatting settings will be found here and where appropriate you can differentiate between mobile and desktop settings. Terms and conditions inherit most styling and therefore has limited settings.
Link Styling
By default all links will be underlined and in a contrasting colour in order to adhere to the latest accessibility criteria. This can be adjusted to suit your design system with the most common link styling settings.
Button styling
All buttons for the touchpoint can be styled here and you switch between them with the tab menu at the top of the panel. As well as the common button styling, the different button states can be styled here and you can also adjust how the button width sits in the touchpoint.
Input field styling
We allow for basic input field styling to match the default state of any brand.
Custom CSS
For further customisation you can add/edit css for all touchpoints on separate stylesheets. We recommend only editing this if you are competent in CSS and LESS CSS as custom css can potentially break parts of your journey.