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.

Premade Complete CSS Themes for Your Popup

Advanced CSS tips & tricks for your Dedicated Page

Adding a custom style and font to your Dedicated Page with CSS

Adding custom CSS to your Loyalty emails

Touchpoint: Show a customer's referral link on the account page