Introduction
To ensure a seamless fit with your brand, TrustWILL Loyalty offers extensive customization options for the widget launcher, including display settings, colors, fonts, layout, and overall styling across all devices.
Setting Widget Launcher Style
Customize how your widget launcher appears and behaves across different devices to match your store’s branding and layout.
1. Go to Brand Style > Widget launcher > Styles
2. Style launcher in the fields below:
Launcher display - Choose whether to show or hide the launcher on desktop and mobile devices.
📝 Note: If you hide the widget on specific devices, make sure to provide alternative ways for customers to access their loyalty program, such as through a dedicated page or account section.
Platform - Set different styles for the widget launcher based on device type (desktop or mobile).
Button - Customize the launcher’s button color and text color to match your brand.
Placement - Adjust how far the launcher sits from the edges of the screen.
Styles - Change the size and shape of the launcher to suit your design preference.
Display type - Decide how the launcher appears:
a. Display Method: Choose from Icon & Text, Icon only, or Text only.
b. Icon Options: Use a built-in icon or upload your own.
c. Text Translations: Edit the icon text for different languages.
Visibility - Select which pages the launcher should appear on to better target your audience.
3. Save changes.
4. Make sure to enable app embed on your store theme.
Advanced Customization with CSS
For more advanced styling, you can customize the Widget Launcher using Custom CSS.
CSS Code Snippets
If you're not familiar with writing CSS, you can use our pre-made code snippets. Simply copy and paste the snippet into the Custom CSS box to quickly apply style changes.
Available snippets include:
Change the style of the Launcher
.loloyal-launcher {
border: solid 2px red;
}Add a Google Font to the Launcher
/**
* @import Must be on the first line!
*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
.loloyal-launcher-text {
font-family: 'IBM Plex Sans' !important;
}Change the size of the pattern in the Launcher
.loloyal-launcher-icon {
width: 64px !important;
height: 64px !important;
}Modify the font of the Launcher
.loloyal-launcher-text {
font-family: fantasy;
}Change the size of the Launcher
.loloyal-launcher-box {
height: 128px;
width: 128px;
}
These ready-to-use snippets help you adjust the launcher’s appearance without needing to write CSS from scratch.
CSS Elements
You can also override the following CSS classes to create more customized styles:
Element | CSS Class |
Launcher |
|
Launcher Icon |
|
Launcher Size Box |
|
Launcher Text |
|
Tips
If your custom CSS is not applying, try adding
!importantto your CSS rules.Always verify your changes in preview mode, as the editor’s HTML structure may differ from the published version of your store.
You can also refer to the full CSS customization document for more examples and detailed instructions.