Customizing the Account Widget Appearance
The Account Widget is a powerful tool that allows your customers to manage their accounts, view orders, and interact with your loyalty program directly on your storefront. To ensure it seamlessly integrates with your brand, Rivo provides extensive customization options for colors, fonts, layout, and styling.
💡 Pro Tip: Use the Preview button in the Account Widget settings to see your changes in real-time before publishing them to your customers.
Accessing Account Widget Appearance Settings
To customize your Account Widget appearance:
From your Rivo Dashboard, navigate to Programs > Retain
Click on Account Widget Settings
Scroll down to the Design Settings section
Here you'll find comprehensive options to customize every aspect of your widget's appearance to match your brand perfectly.
Color Customization
The Account Widget offers extensive color customization options to ensure perfect brand alignment. All color settings include an intuitive color picker for easy selection.
Primary Color Settings
Primary Color: This is the main accent color used throughout the widget for buttons, links, and interactive elements. Choose a color that matches your brand's primary color palette.
Slideout Background: Controls the main background color of the widget panel. A clean, neutral color typically works best for readability.
Text Color Settings
Heading Font Color: Sets the color for all section headings and titles within the widget
Body Primary Font Color: Controls the main text color for content and descriptions
Body Secondary Font Color: Used for secondary text, subtitles, and less prominent information
Interface Element Colors
Border Color: Defines the color of borders around sections, cards, and input fields
Subdued Color: Used for background areas that need to be visually separated but not prominent
Icon Color: Controls the color of all icons throughout the widget interface
Advanced Color Settings
Click Edit next to "Advanced Settings" to access additional color options:
Notification Background & Font: Customize the appearance of toast notifications that appear when customers perform actions
Favorite Color: Sets the color for the favorite/heart icon when customers save products to their favorites
📝 Note: Changes to color settings are applied immediately when you save. Use the Preview function to test how colors look with your actual store content.
Font Size Customization
Fine-tune the typography of your Account Widget to ensure optimal readability and brand consistency across all text elements.
General Font Settings
Default Font Size: Sets the base font size for most text content throughout the widget (default: 16px)
Input Font Size: Controls the text size within form fields and input boxes (default: 16px)
Heading and Title Fonts
Section Title Font Size: Used for main section headings like "Your Orders" or "Profile" (default: 18px)
Logged Out Title Font Size: Controls the size of the main title when customers aren't signed in (default: 24px)
Logged Out Subtitle Font Size: Sets the size for subtitle text on the login screen
Product Display Fonts
Product Image Title Font Size: Controls product name text size in product grids (default: 13px)
Product Image Subtitle Font Size: Sets the size for product price and secondary information (default: 13px)
Footer and Legal Text
Terms and Conditions Font Size: Controls the size of legal text and footer information (default: 12px)
Footer Font Size: Sets the size for navigation footer text (default: 14px)
💡 Pro Tip: Keep font sizes consistent with your website's typography. Typically, 14-16px works well for body text, while headings can range from 18-24px depending on hierarchy.
Layout and Positioning
Configure how and where the Account Widget appears on your storefront to provide the best user experience across all devices.
Desktop Positioning
Desktop Placement: Choose whether the widget launcher appears on the left or right side of the screen
Desktop Sidebar Position: Controls which side the widget panel slides out from (left or right)
Desktop Side Spacing: Sets the distance from the edge of the screen (default: 20px)
Desktop Bottom Spacing: Controls the distance from the bottom of the screen (default: 20px)
Mobile Positioning
Mobile Side Spacing: Sets the distance from screen edges on mobile devices (default: 20px)
Mobile Bottom Spacing: Controls the distance from the bottom on mobile (default: 20px)
Content Layout Settings
Featured Content Image Height: Sets the height for featured content images in pixels
Featured Content Image Position: Choose from Center, Top, or Bottom positioning for featured images
Logged Out Title Margin Bottom: Controls spacing below the main title on login screens
📝 Note: Consider your website's existing layout when positioning the widget. Ensure it doesn't conflict with other floating elements like chat widgets or promotional banners.
Shape and Style Configuration
Customize the visual style of various widget elements to match your brand's design language.
Container Shapes
Container Shape: Choose between "rounded" or "square" corners for the main widget container
Cards Shape: Sets the corner style for individual content cards within the widget
Buttons Shape: Controls whether buttons have rounded or square corners
Inputs Shape: Sets the corner style for form fields and input boxes
Launcher Configuration
Launcher Shape: Choose between "circle" or other shapes for the widget launcher button
Input Border Radius: Fine-tune the corner roundness with specific pixel values
Button Styling
For advanced theme integration, you can specify custom CSS classes:
Primary Button Class Names: Add your theme's primary button classes (e.g., "button button--primary")
Secondary Button Class Names: Add your theme's secondary button classes (e.g., "button button--secondary")
Advanced CSS Customization
For complete control over your widget's appearance, Rivo provides a custom CSS field where you can add any additional styling.
Using Custom CSS
Navigate to Advanced Settings in your Account Widget configuration
Scroll down to the Custom CSS field
Add your custom CSS rules to override default styling or add new visual elements
Save your changes and use the Preview function to test your customizations
CSS Best Practices
Use specific selectors to target widget elements without affecting your main site
Test your CSS across different devices and screen sizes
Keep custom CSS minimal and focused on specific adjustments
Document your custom CSS for future reference and maintenance
💡 Pro Tip: If you're not comfortable with CSS, start with the built-in customization options first. They cover most common styling needs without requiring code knowledge.
Theme Integration with CSS Variables
Rivo automatically generates CSS variables based on your widget settings, making it easy to create seamless integration with your existing theme.
Available CSS Variables
The widget automatically creates CSS variables for all your customization settings, including:
--rivo-aw-primary-color: Your primary brand color--rivo-aw-background-color: Widget background color--rivo-aw-heading-font-color: Heading text color--rivo-aw-body-primary-font-color: Main text color--rivo-aw-border-color: Border and divider color
Using CSS Variables in Your Theme
You can reference these variables in your theme's CSS to maintain consistency:
.my-custom-element {
background-color: var(--rivo-aw-primary-color);
color: var(--rivo-aw-body-primary-font-color);
border: 1px solid var(--rivo-aw-border-color);
}
Dynamic Positioning Variables
The system also provides positioning variables that automatically adjust based on your layout settings:
--rivo-aw-desktop-sidebar-leftand--rivo-aw-desktop-sidebar-right: Automatically set based on your sidebar position choice--rivo-aw-toast-offset-leftand--rivo-aw-toast-offset-right: Ensure notifications appear in the correct position
📝 Note: CSS variables are automatically updated whenever you change your widget settings, ensuring your theme integration stays consistent.
Logo and Branding
Add your brand logo to the Account Widget for complete brand consistency.
Adding Your Logo
In the Advanced Settings section, find the Logo SVG field
Paste your logo's SVG code into the text area
Save your changes to apply the logo to your widget
💡 Pro Tip: SVG logos work best as they scale perfectly across all device sizes and maintain crisp quality. If you only have a PNG or JPG logo, consider converting it to SVG for optimal results.
Testing and Preview
Always test your appearance customizations before making them live to ensure the best customer experience.
Using the Preview Function
After making any appearance changes, click Save to apply your settings
Click the Preview button in the top-right corner of the settings page
This opens your storefront with the widget enabled for testing
Test the widget on both desktop and mobile devices
Testing Checklist
✅ Colors match your brand and provide good contrast for readability
✅ Font sizes are appropriate and readable on all devices
✅ Widget positioning doesn't conflict with other site elements
✅ All interactive elements (buttons, links) are clearly visible
✅ Custom CSS doesn't break the widget functionality
✅ Logo displays correctly and is appropriately sized
📝 Note: Remember to test with actual customer accounts to ensure all features work correctly with your appearance customizations.
Troubleshooting Common Issues
Colors Not Displaying Correctly
Ensure you've saved your changes after selecting colors
Clear your browser cache and refresh the page
Check that custom CSS isn't overriding your color selections
Font Sizes Too Small or Large
Test font sizes on actual devices, not just browser developer tools
Consider your target audience's accessibility needs
Ensure font sizes work well with your existing website typography
Widget Positioning Issues
Check for conflicts with other floating elements on your site
Adjust spacing values to accommodate your site's layout
Test positioning on various screen sizes and orientations
With these comprehensive appearance customization options, you can create an Account Widget that seamlessly integrates with your brand while providing an excellent customer experience. Remember to test all changes thoroughly and make adjustments based on customer feedback and usage patterns.