Skip to main content
All CollectionsOnsiteAccount Embed
Premade CSS themes for your Account Page Embed
Premade CSS themes for your Account Page Embed

Need a fresh look for your Shopify customer account page? Well look no further!

Laurence Leech avatar
Written by Laurence Leech
Updated over 10 months ago

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.

  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

Clean and Simple CSS theme

#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

Bright and Blue CSS theme

#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

Dark Mode CSS theme

#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

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.

Did this answer your question?