Dashboard Customization
Personalizing the affiliate dashboard experience
Overview
Refgrow allows you to customize the appearance and functionality of your affiliate dashboard to match your brand identity and meet your specific requirements. This guide covers all the customization options available in Refgrow.
Branding Options
Logo and Favicon
Upload your company logo and favicon to create a branded experience:
- Go to your program settings
- Navigate to the "Design" tab
- In the "Logo & Favicon" section:
- Upload your logo (recommended size: 200px × 50px)
- Upload your favicon (must be .ico format, 16px × 16px)
- Save your changes
Your logo will appear in the affiliate dashboard header, and your favicon will be displayed in the browser tab.
Color Scheme
Customize the dashboard's color scheme to match your brand:
- In the "Design" tab of your program settings
- Go to the "Colors" section
- Customize the following colors:
- Primary Color: Used for main buttons, links, and accents
- Secondary Color: Used for secondary elements and highlights
- Background Color: The main background color of the dashboard
- Text Color: The color of body text
- Heading Color: The color of headings and titles
- Use the color picker or enter hex color codes
- Preview your changes in real-time
- Save when satisfied
Typography
Select fonts that align with your brand identity:
- In the "Design" tab
- Go to the "Typography" section
- Choose from the available font families for:
- Heading Font: Used for titles and headings
- Body Font: Used for paragraphs and general text
- Adjust font sizes if needed
- Save your changes
Refgrow uses web-safe fonts and Google Fonts to ensure your dashboard looks consistent across all devices.
Layout Customization
Dashboard Sections
Choose which sections to display in the affiliate dashboard:
- Go to the "Layout" section in the "Design" tab
- Enable or disable dashboard sections:
- Overview: Summary of performance metrics
- Earnings: Detailed commission information
- Referrals: List of referral activities
- Marketing Materials: Promotional resources
- Payouts: Payment history and requests
- Settings: Affiliate account settings
- Drag and drop to reorder sections
- Save your layout configuration
Custom CSS
For advanced customization, add custom CSS to further style your dashboard:
- In the "Design" tab, locate the "Advanced Customization" section
- Enter your custom CSS in the provided editor
- Preview changes in real-time
- Save when satisfied
Example custom CSS:
.dashboard-header {
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.stat-card {
border-radius: 10px;
transition: transform 0.2s;
}
.stat-card:hover {
transform: translateY(-5px);
}
Content Customization
Welcome Message
Create a personalized welcome message for your affiliates:
- Go to the "Content" section in the "Design" tab
- Edit the "Welcome Message" field
- Use the rich text editor to format your message
- Insert variables like
{{affiliate.name}}
to personalize the message - Save your changes
This message will be displayed at the top of the affiliate dashboard.
Custom Pages
Create custom pages for additional information or resources:
- In the "Content" section, click "Add Custom Page"
- Enter a title for your page
- Create your content using the rich text editor
- Choose where to display the page link (sidebar, footer, or both)
- Set the page order
- Save the page
Custom pages are perfect for affiliate guidelines, FAQs, or promotional tips.
Email Templates
Customize the emails sent to affiliates:
- Go to the "Emails" section in your program settings
- Select the email template you want to customize:
- Welcome Email
- Password Reset
- Commission Notification
- Payout Confirmation
- Edit the subject line and email content
- Use variables to personalize emails
- Save your changes
All emails include your logo and follow your brand's color scheme.
Marketing Materials
Banner Ads
Upload banner ads for your affiliates to use:
- Go to the "Marketing" tab in your program settings
- In the "Banner Ads" section, click "Add New Banner"
- Upload your banner image (recommended sizes: 728×90, 300×250, 160×600)
- Add a description for the banner
- Set the banner status (active or inactive)
- Save the banner
Affiliates can copy the HTML code for these banners directly from their dashboard.
Text Links
Create pre-written text links for affiliates:
- In the "Marketing" tab, go to the "Text Links" section
- Click "Add New Text Link"
- Enter the link text
- Specify the destination URL
- Add a description
- Save the text link
The system will automatically append the affiliate's referral code to these links.
Downloadable Resources
Provide additional marketing materials:
- In the "Marketing" tab, go to the "Resources" section
- Click "Add New Resource"
- Upload your file (PDF, ZIP, etc.)
- Add a title and description
- Set a category for the resource
- Save the resource
These resources will be available for affiliates to download from their dashboard.
Domain Customization
Custom Domain
Use your own domain for the affiliate dashboard:
- Go to the "Settings" tab in your program settings
- Navigate to the "Domain" section
- Enter your custom domain (e.g., affiliates.yourcompany.com)
- Follow the DNS configuration instructions
- Verify your domain
- Save your settings
White Labeling
Remove Refgrow branding from the affiliate dashboard:
- In the "Settings" tab, find the "White Label" section
- Toggle the "Enable White Label" option
- Save your settings
This will remove all mentions of Refgrow from the affiliate dashboard, emails, and other user-facing elements.
Mobile Responsiveness
All Refgrow dashboards are fully responsive, ensuring a great experience for affiliates on mobile devices. Your customizations will automatically adapt to different screen sizes, with some layout adjustments to optimize for mobile viewing.
You can preview how your dashboard looks on different devices:
- In the "Design" tab, click the "Preview" button
- Use the device selector to switch between desktop, tablet, and mobile views
- Make any necessary adjustments to your design
Best Practices
Ensure your affiliate dashboard design aligns with your main website and other brand touchpoints for a seamless experience.
Choose color combinations that provide sufficient contrast for text readability, and avoid overly complex designs that can distract from important information.
Preview your customizations on multiple devices and browsers to ensure they look good everywhere, especially if you've added custom CSS.
Refresh your marketing materials periodically to keep affiliates engaged and provide them with current promotional content.
Next Steps
- Learn how to manage your programs
- Explore affiliate management features
- Set up webhooks for real-time notifications