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 voila!

💡 Check out our guide on the account page embed here

Account themes using Custom CSS

Need help adding some style to your account theme? We've got you covered! Just 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 Customizing CSS for helpful getting started resources.

💡 If you aren't seeing your changes refresh, click the Sync button button on the settings page.

Clean and simple

Copy the CSS below and paste it in the Custom CSS field.

#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

Copy the CSS below and paste it in the Custom CSS field.

#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

Copy the CSS below and paste it in the Custom CSS field.

#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

Copy the CSS below and paste it in the Custom CSS field.

#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);
  }
}

💡 Pro Tip: 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.

Customer Account Page Embed Widget

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