Introduction
Loloyal's widget panel is fully customizable to match your brand's unique style and identity. This guide walks you through customizing colors, text, shapes, fonts, and layout options to create a seamless experience for your customers.
Customize Theme Colors
Choose the best colors to fit your brand! From this screen, you can select a theme template or customize the color of the banner, program icons, the launcher & signup buttons, and even text & links.
1. From Loloyal dashboard, go to Brand Style > Widget Panel > Styles > Theme.
2. Select a theme template, or click Customize to create your own.
3. Adjust the colors using the palette, or enter specific hex codes for precise branding.
4. Preview your changes in the live preview on the right.
5. Save your changes.
💡 Pro Tip: For a cohesive look, consider matching your header background color to your brand's primary color and using complementary colors for buttons and links.
Available Color Options
Here's a breakdown of all color settings and where they appear in your widget:
Header Background: The background color of the top banner area
Header Text: The color of text that appears in the header/banner
Button Background: The background color of action buttons
Button Text: The color of text on buttons
Link Color: The color of clickable links throughout the widget
Icon Color: The color of icons displayed in the widget
Adjusting Widget Corners and Shape
Give your Loyalty widget a fresh look to match your website's brand and theme style. Using the shape settings, you can customize the edges of the widget panel, section blocks, and buttons. Circle, Rounded, and Square are the three shape options you can choose from to match your brand’s aesthetic.
💡 Pro Tip: For a modern look, try using rounded corners for buttons and sections. For a more classic or traditional look, square corners might be more appropriate.
Adjusting Panel Order and Section Visibility
Rearrange the order of panels and decide section visibility within your loyalty widget to highlight the most important features for your customers.
From the dashboard, go to Brand Style > Widget Panel > Styles > Visibility.
Drag and drop the panels to reorder them based on your preferences.
Available panels may include Account Card, VIP Tiers, Points, Referrals, Languages, and more depending on the features you've enabled.
To hide a section from the widget, simply toggle off the corresponding switch.
Click Save to apply your changes.
💡 Pro Tip: Place your most important or popular features at the top for better customer engagement.
📝 Note: If your store supports only one language, we recommend disabling the Languages section. This can help improve loading speed and simplify the user experience. To do this, go to Widget Panel > Styles > Visibility, and toggle off the Languages option.
Customize Widget Banner Text
Rename or edit your Rewards Program title here. This is the Header text and the caption on the widget's banner.
From your dashboard, go to Brand Style > Widget Panel > Texts > Branding title.
Enter your preferred branding title text.
Click Save to apply your changes.
📝 Note: If your title and caption are too long, the text may end up truncated with an ellipsis (...) on the live version of the widget. The character limit before truncation is 19 for the Title and 35 for the caption.
Customize Additional Texts on the Widget
Please refer to Configure Multi-Language.
Setting Primary and Secondary Fonts
Add an extra level of customization to your widget by choosing the primary and secondary fonts for your brand and design preferences.
From the dashboard, go to Brand Style > Widget Panel > Texts > Fonts.
Use the dropdown menu to select the Primary Font and Secondary Font.
Save your changes.
Tip: Use custom CSS to apply fonts that aren't available in our font dropdown menu.
📝 Note: Primary fonts are used for titles and headers, while secondary fonts are used for button text, links, descriptions, and paragraphs.
Upload Custom Images to Widget
Enhance your widget's visual appeal and strengthen your brand identity by adding a custom banner, store logo, and personalized icons for points and rewards.
From the dashboard, go to Brand Style > Widget Panel > Images.
Upload your own banner image or select one from the available options under Brand Style > Widget Panel > Styles > Theme.
Choose or upload custom icons for Ways to Earn and Ways to Redeem.
Use the live preview to see how your banner and icons will appear in the widget.
Click Save to apply your changes.
📝 Note: For optimal display, use an image that matches the widget width with a height that works well with your content. Images that are too tall might push important content below the initial view.
Configure Widget Branding
Configuring Widget branding ensures a seamless, on-brand experience for your customers.
Steps:
Navigate to Brand Style > Widget panel > Branding.
Upload a branding icon, enter a branding title, and embed a jump link.
Click Save.
