Introduction
We've created some CSS themes for your customer account page embed. These couldn't be simpler to use, just copy & paste, save, and voilà!
✨ The Account Embed is available on the Scale and Plus plans. See pricing →
Walkthrough
Account themes using Custom CSS
You can copy and paste these CSS themes below for a fresh new look to your customer account. Or if you're more of a self-starter, try it out on your own to customize the widget. See our guide on Using CSS for helpful getting-started resources.
Go to Onsite > Account Embed
Scroll down to Advanced Settings
Copy the theme and paste the code into the Custom CSS field
If you don't see the changes right away, go to Settings > Troubleshooting and click Sync Store.
💡 Pro Tip: Check out our guide on the Account Page embed here
Clean and simple
#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
#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
#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
#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);
}
}
Additional effects
Add a smooth transition to the account widget by adding this CSS:
#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);
}
}
Common questions
Can someone help me customize the design?
Yes! Email our technical team at [email protected] and we'll be happy to spruce it up.