Introduction
Transform your customer's account page experience with our professionally designed CSS themes for the account page embed. These ready-to-use themes help you create a cohesive brand experience with just a simple copy and paste, while advanced customization options let you create unique designs that perfectly match your brand.
Walkthrough
Account themes using Custom CSS
These elegant CSS themes elevate your customer account experience with minimal effort. Simply copy and paste these themes for a professional look, or use them as inspiration to create your own custom design. For help with creating custom CSS, see our guide on Using CSS.
In your Rivo dashboard, navigate to Onsite > Account Embed
Scroll down to Advanced Settings
Copy your chosen theme below and paste the code into the Custom CSS field
Click Save to apply your changes
If changes don't appear immediately, go to Settings > Troubleshooting and click Sync Store
Premade CSS Themes
Choose from our collection of professionally designed themes below. Each theme is carefully crafted to work seamlessly with most Shopify themes and can be easily customized to match your brand colors.
Clean and Simple
A minimalist theme with subtle borders and clean typography that works well with any brand.
#rivo-loyalty-program-and-rewards { margin-top: 30px; padding: 30px 50px 20px 50px; margin-bottom: 30px; text-align: left; border: 1px solid #EDEDED;}h2#loyalty-program-header { display: inline; border-radius: 50px;}p#widget-click a { padding: 10px 40px 10px 40px; text-decoration: none; border-radius: 30px; font-size: 16px; color: white; font-weight: bold; background: #000;}p#points-balance { color: #000; border-radius: 10px; font-size: 65px; font-family: ui-sans-serif; line-height: 1em;}p#freeform-text { white-space: pre-wrap; color: #000;}#rivo-loyalty-program-and-rewards { animation: fade-in-move-down 0.7s;}@keyframes fade-in-move-down { 0% { opacity: 0; transform: translateY(-3rem); } 100% { opacity: 1; transform: translateY(0); }}
Bright and Blue
A playful theme with eye-catching colors and a fun box-shadow effect that makes your rewards program pop.
#rivo-loyalty-program-and-rewards { margin-top: 30px; padding: 40px; margin-bottom: 30px; background: #EDF6F7; border: 2px solid #000; border-radius: 20px; box-shadow: 5px 5px 0 #000;}p#widget-click a { color: #fff; padding: 10px 20px; text-decoration: none; border-radius: 30px; font-weight: bold; font-size: 16px; border: 2px solid #000; background: #78BDBE;}p#points-balance { display: inline; color: #000; font-size: 50px;}#rivo-loyalty-program-and-rewards { animation: fade-in-move-down 0.7s;}@keyframes fade-in-move-down { 0% { opacity: 0; transform: translateY(-3rem); } 100% { opacity: 1; transform: translateY(0); }}
Dark Mode
A striking dark theme with contrasting colors ideal for brands with a more sophisticated aesthetic.
#rivo-loyalty-program-and-rewards { margin-top: 30px; padding: 30px 50px 20px 50px; margin-bottom: 30px; background: #000; border-radius: 10px;}h2#loyalty-program-header { letter-spacing: 2px; padding: 5px 20px 5px 20px; display: inline; border-radius: 50px; font-size: 16px; background: #F9C408;}p#widget-click a { padding: 10px 40px 10px 40px; text-decoration: none; border-radius: 0px; font-size: 14px; color: #fff; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; border: 1px solid #fff; background: #000;}p#points-balance { display: inline; color: #fff; font-size: 36px;}p#freeform-text { white-space: pre-wrap; font-size: 14px; color: #fff;}#rivo-loyalty-program-and-rewards { animation: fade-in-move-down 0.7s;}@keyframes fade-in-move-down { 0% { opacity: 0; transform: translateY(-3rem); } 100% { opacity: 1; transform: translateY(0); }}
Mellow Yellow
A warm and friendly theme with bold typography that creates an inviting experience for your customers.
#rivo-loyalty-program-and-rewards { margin-top: 30px; margin-bottom: 30px; padding: 30px 50px 20px 50px; background: #FBEED1; text-align: left; border-radius: 6px;}h2#loyalty-program-header { display: inline; border-radius: 50px;}p#widget-click a { padding: 10px 40px 10px 40px; text-decoration: none; border-radius: 30px; font-size: 18px; color: #fff; font-weight: bold; background: #F9C408;}p#points-balance { color: #F9C408; border-radius: 10px; font-size: 65px; font-family: ui-sans-serif; line-height: 1em;}p#freeform-text { white-space: pre-wrap; color: #000; font-weight: 500;}#rivo-loyalty-program-and-rewards { animation: fade-in-move-down 0.7s;}@keyframes fade-in-move-down { 0% { opacity: 0; transform: translateY(-3rem); } 100% { opacity: 1; transform: translateY(0); }}
Gradient Modern
A contemporary theme featuring smooth gradients and modern styling that works well with fashion and lifestyle brands.
#rivo-loyalty-program-and-rewards { margin-top: 30px; margin-bottom: 30px; padding: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; color: white; box-shadow: 0 10px 30px rgba(0,0,0,0.1);}h2#loyalty-program-header { color: white; font-weight: 600; margin-bottom: 20px;}p#widget-click a { padding: 12px 30px; text-decoration: none; border-radius: 25px; font-size: 16px; color: #667eea; font-weight: bold; background: white; transition: all 0.3s ease;}p#widget-click a:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.2);}p#points-balance { color: white; font-size: 48px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.3);}p#freeform-text { white-space: pre-wrap; color: rgba(255,255,255,0.9); font-size: 16px;}#rivo-loyalty-program-and-rewards { animation: fade-in-scale 0.8s ease-out;}@keyframes fade-in-scale { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); }}
Card Elegant
A sophisticated card-style design with subtle shadows and elegant typography, perfect for premium brands.
#rivo-loyalty-program-and-rewards { margin: 30px 0; padding: 35px; background: #ffffff; border: 1px solid #e8e8e8; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); position: relative;}#rivo-loyalty-program-and-rewards::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #ff6b6b, #4ecdc4); border-radius: 12px 12px 0 0;}h2#loyalty-program-header { color: #2c3e50; font-weight: 500; letter-spacing: 0.5px; margin-bottom: 15px;}p#widget-click a { padding: 14px 28px; text-decoration: none; border-radius: 6px; font-size: 15px; color: white; font-weight: 500; background: #2c3e50; letter-spacing: 0.3px; transition: background 0.3s ease;}p#widget-click a:hover { background: #34495e;}p#points-balance { color: #2c3e50; font-size: 42px; font-weight: 300; margin: 10px 0;}p#freeform-text { white-space: pre-wrap; color: #7f8c8d; font-size: 15px; line-height: 1.6;}
Minimalist Border
A clean, minimal design with a subtle left border accent that integrates seamlessly with any theme.
#rivo-loyalty-program-and-rewards { margin: 30px 0; padding: 25px 30px; background: #fafafa; border-left: 5px solid #3498db; border-radius: 0 8px 8px 0;}h2#loyalty-program-header { color: #2c3e50; font-weight: 400; font-size: 20px; margin-bottom: 12px;}p#widget-click a { padding: 10px 24px; text-decoration: none; border-radius: 4px; font-size: 14px; color: #3498db; font-weight: 500; border: 2px solid #3498db; background: transparent; transition: all 0.3s ease;}p#widget-click a:hover { background: #3498db; color: white;}p#points-balance { color: #3498db; font-size: 36px; font-weight: 600; margin: 8px 0;}p#freeform-text { white-space: pre-wrap; color: #7f8c8d; font-size: 14px; margin-top: 10px;}
Complete Customization Guide
Understanding the structure of the account embed will help you create your own custom themes and make precise modifications to match your brand perfectly.
Key Elements to Style
The account embed consists of several key elements that you can style independently:
#rivo-loyalty-program-and-rewards- The main container for the entire embedh2#loyalty-program-header- The title of the loyalty program sectionp#points-balance- Displays the customer's points balancep#freeform-text- Optional custom message about your rewards programp#widget-click a- The button that opens the loyalty widget or redirects to your loyalty page.account-loyalty-wrapper- Wrapper div containing the points balance and action elements
Supported CSS Properties
You can use most standard CSS properties including:
Layout: margin, padding, display, position, width, height
Typography: font-family, font-size, font-weight, color, text-align, letter-spacing
Background: background-color, background-image, gradients
Borders: border, border-radius, box-shadow
Animations: transition, animation, transform
Modern CSS: gap, backdrop-filter, text-decoration-thickness
Custom Font Support
You can import custom fonts from trusted sources using @import rules:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');@import url('https://use.typekit.net/your-font-id.css');@import url('https://cloud.typography.com/css?family=Your+Font');#rivo-loyalty-program-and-rewards { font-family: 'Inter', sans-serif;}
⚠️ Font Import Security: For security reasons, font imports are only allowed from Google Fonts, Adobe Typekit, Typography.com, and Shopify CDN. Other font sources will be automatically removed.
Adding Smooth Animations
Add smooth transitions to make your account widget appear more polished:
#rivo-loyalty-program-and-rewards { animation: fade-in-move-down 0.7s;}@keyframes fade-in-move-down { 0% { opacity: 0; transform: translateY(-3rem); } 100% { opacity: 1; transform: translateY(0); }}
You can also add hover effects to interactive elements:
p#widget-click a { transition: all 0.3s ease;}p#widget-click a:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
Advanced Customization Settings
For merchants who need more control over where and how the account embed appears, Rivo offers several advanced customization options.
Custom Placement
By default, the account embed appears at the top of your customer account page. You can change this by specifying a custom CSS selector in the Advanced Settings section:
Default:
main .grid > div:first-childAfter main content:
main .customerBefore footer:
footerCustom container:
.my-custom-container
Insertion Methods
Choose how the embed is inserted relative to your selected element:
beforeend (default) - Inside the element, after its last child
afterend - After the element
beforebegin - Before the element
afterbegin - Inside the element, before its first child
Target Pages
Choose which customer account pages display the embed:
Accounts page (default) - Main customer account dashboard
Customer Addresses page - Address management page
Custom Redirect Links
By default, clicking the account embed button opens the loyalty widget. You can instead redirect customers to a custom page by setting a custom redirect path like:
/pages/loyalty-program/pages/rewards/collections/vip-rewards
Troubleshooting
If you're having trouble with your account embed, try these solutions in order:
Common Issues
CSS changes not appearing:
Make sure you've clicked Save after pasting your CSS
Go to Settings > Troubleshooting and click Sync Store
Clear your browser cache and refresh the customer account page
Try adding
!importantto your CSS rules if they're being overridden
Embed not appearing on account page:
Verify the account embed is enabled in Onsite > Account Embed
Check that you're logged in as a customer when viewing the account page
Ensure your Shopify theme is compatible with the default placement
Try using a different custom placement selector if the default doesn't work
Custom placement not working:
Inspect your account page HTML to find the correct CSS selector
Test your selector in browser developer tools first
Try different insertion methods (beforeend, afterend, etc.)
Use more specific selectors if elements aren't unique
CSS being removed or not working:
Check that you're only using allowed CSS properties and font sources
Remove any JavaScript or external links from your CSS
Validate your CSS syntax using an online CSS validator
Test with simpler CSS first, then add complexity gradually
Getting Additional Help
If you're still having issues after trying these solutions:
Contact our support team at [email protected]
Include screenshots of your account embed settings
Provide your store URL and describe the specific issue
Our technical team can help create custom CSS for complex requirements
Frequently Asked Questions
Can I modify these themes to match my brand colors?
Absolutely! Feel free to modify any color values in the CSS code to match your brand. Just replace the color codes (like #FFFFFF or #000) with your own brand colors. You can also adjust fonts, spacing, and other design elements.
Will these themes work with all Shopify themes?
These CSS themes are designed to work with most Shopify themes. If you encounter any display issues, you may need to adjust the CSS or use the custom placement options in the Advanced Settings to find a better location for the embed.
Can I use custom fonts in my CSS themes?
Yes! You can import fonts from Google Fonts, Adobe Typekit, Typography.com, and Shopify CDN using @import rules. Other font sources are blocked for security reasons, but these cover most professional font needs.
Why is some of my CSS being removed?
For security reasons, certain CSS properties and external links are automatically filtered out. This includes JavaScript, external images from untrusted sources, and potentially harmful CSS. Stick to standard styling properties and trusted font sources.
Can I change where the embed appears on the page?
Yes! Use the custom placement setting in Advanced Settings to specify a different CSS selector. You can also choose different insertion methods to control exactly where the embed appears relative to your chosen element.
Can I make the embed redirect to a custom page instead of opening the widget?
Yes! In the Advanced Settings, you can set a custom redirect path like "/pages/loyalty-program" to send customers to a dedicated rewards page instead of opening the popup widget.
Can someone help me customize the design?
Yes! Our technical team is happy to help create a custom design for your account embed. Just email us at [email protected] with your requirements and any specific design goals.
How do I preview my changes before making them live?
After saving your changes, visit your store's customer account page while logged in as a customer to see how the embed looks. You can make additional adjustments as needed. The changes are live immediately after saving.
Can I use the embed on other pages besides the account page?
The account embed is specifically designed for customer account pages and can appear on the main account page or the addresses page. For other pages, consider using the floating widget or other Rivo features.
What happens if I have both points and store credit enabled?
The embed will automatically display the appropriate balance based on your loyalty program settings. You can customize the text and styling for both points and credits using the same CSS selectors.