Introduction

We've designed some stylish CSS themes for your embedded customer account page. Implementation is a breeze - just copy, paste, save, and you're all set!

Walkthrough

Account themes using Custom CSS

Below, you'll find CSS themes ready for copying and pasting to give your customer account a makeover. Feeling adventurous? Feel free to tweak the widget yourself for a custom look. See our guide on Using CSS for helpful getting-started resources.

1. Go to Onsite > Account Embed
2. Scroll down to Advanced Settings
3. Copy the theme and paste the code into the Custom CSS field
4. 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

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

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

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

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

To add a sleek transition effect to the account widget, simply include this CSS code:

Common questions

Can someone help me customize the design?

Absolutely! Reach out to our tech support team via email, and we'll gladly give it a polish for you.