Introduction

There are countless opportunities to style your Dedicated Page aligned with your branding. In this document, we share some best-case practices — feel free to copy the code snippets and change the styling to yours. We're using the following pages as references:

Explore some of our best Loyalty Pages →

✨ Dedicated Page is available on the Scale and Plus plans. See pricing →

Banner

Aligning the hero content in the center

.hero {
  height: auto !important;
  padding: 100px 100px;
  align-items: center;
}

Aligning the hero buttons in the center

.hero-buttons {
   align-self: center;
}

Add text before the title

.hero-title:before {
  content: 'sign up and earn 100 welcome points';
  display: block;
  font-size: 18px;
  text-transform: uppercase;
}

Page sections

Adding space to the top of the sections

.page-section {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

Explainer section

Adding a circle around the step number in the explainer section.

.step-number {
  display: flex;
  align-items: center !important;
  background: #7C2265;
  color: white !important;
  border-radius: 50%;
  width: 70px !important;
  height: 70px !important;
  justify-content: center !important;
  margin: auto;
  margin-bottom: 20px !important;
}

📝 Note

The text color (color) can be set in the builder.
You can play with the width and height to increase/decrease the padding

Adding a background effect around the step number

.step-number {
  width: fit-content !important;
  background: linear-gradient(0deg,#F8E9F2,#F8E9F2 45%,rgba(255,0,255,0) 46%); /* replace by the colors you want */
}

.step-number {
  margin-left: auto;
  margin-right: auto;
  padding: 0 10px;
  font-family: ubuntu-mono, sans-serif !important;
}

Adding a hover effect to the step card

.col-4:hover {
  background-color: #F5F5EB;
  border-radius: 6px;
  transform: scale(1.02);
}


@media only screen and (max-width: 700px) {
 .col-4 {
   padding: 0 0px;
 }

Adding SVG elements to the title

Replace the image URL

.title:after {
  content: "";
  background-image: url("https://d3afjz4ck0dmfv.cloudfront.net/underline-yallah-coffee_1_2.png") !important;
  background-size: contain;
  background-repeat: no-repeat;
  height: 1rem;
  margin-top: 20px;
}

Cards and icons

Cards

Styling the cards vertically

.item-box {
  flex-direction: column; /* MOVE THE ICONS TO THE TOP */
  border: none !important;
  text-align-last: center !important;
  text-align: -webkit-center !important;
  height: 220px;
  padding: 20px 0px !important;
  background: white;
}

Aligning the cards in the same row (maximum of 5 cards)

.page-section.ways-to-earn .content {
   max-width: 1400px;
}

Defining the font size for the text inside the cards

.card-title {
  font-size: 25px;
}

.card-description {
   font-size: 20px;
   padding-top: 10px;
}

Adding hovering effects to the actionable cards

.action-cards .item-box:hover:not(.unhoverable) {
  background: #f9ac76 !important;
  color: white !important;
  border: none !important;
  transform: scale(1.02);
}

Centering the content of the cards

.item-box {
  justify-content: center;
}

.item-box .content {
  margin-right: 0 !important;
  text-align: -webkit-center;
}

Styling the VIP Tiers Cards and centering the content

To view the progress bar in the cards, go to Explainer > Logged in (member). If the content is not aligned vertically, here's a quick way to fix it.

#vip_tier .item-box {
  height: 300px;
  display: flex !important;
  flex-direction: column;
  justify-content: start;
}

Icons

Resizing the icons

.custom-icon {
  height: 70px !important;
  width: 70px !important;
}

Change the color of the icons

This only works for the icons added by default in the Rivo app. If you're adding custom icons, you won't be able to change their color.

svg.svg-icon, img.custom-icon {
  fill: rgb(0, 171, 132) !important;
}
 
path {
  fill: rgb(0, 171, 132) !important;
}

Buttons

Change the background and font colors in the builder. Use the code to style the border, center the text, etc.

Add basic styling to the buttons

.btn, button.btn.btn-primary.modal-login-btn.btn-lg:hover, .btn.btn-lg {
  border: 1px solid #c7c7c8 !important;
  max-width: fit-content !important;
  height: fit-content !important;
  padding: 15px 30px !important;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
}

Add a different style to the secondary button

.secondary {
   border: 1px solid #F8E9F2 !important;
}

Add hover effects

.btn:hover {
  background: #F8E9F2 !important; 
  transform: scale(1.02);
}

Rewards table

To view the table in the page editor, go to Explainer > Logged in (member).

Styling the rewards table

thead { 
  color: #7C2265 !important;
  background: #F8E9F2;
  letter-spacing: 0.08em !important;
  font-size: 17px;
  padding: 20px !important;
}

.table th {
  border-bottom: 2px solid #7C2265;
  padding: .6rem .4rem;
}

Referral link

Styling the box with the code

.form-input {
  border: 2px solid #7C2265;
  height: 50px;
}

input#home_referral_url {
  font-size: 17px;
}

Styling the copy button

.copy-coupon .browser-loy-button {
  border-radius: 0;
  color: #F8E9F2;
}

.copy-coupon .browser-loy-button:hover {
  background-color: #F8E9F2;
  border-radius: 0;
}

Modal

When you preview the page, you can click on any of the actionable cards to view the modal. At the moment, it's not possible to preview it in the app builder.

Style the closing button in the modal

.btn.btn-clear {
  padding: 0 !important;
}


a.btn.btn-clear.float-right { 
 background: transparent !important; 
 border: 0 !important; 
}

Styling the modal title

.login-modal-title {
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .1em;
  font-size:18px;
  color: #7C2265 !important;
}

Styling the link text inside the model (reads: "Sign in")

.modal-container a {
 color: #7C2265 !important;
 text-decoration: underline;
}

Styling the modal container

.modal-container {
  border-radius:0; 
  min-height: 300px;
}

Mobile responsiveness

Before you publish your page, test it on mobile to make sure it's responsive and looks as you wish.

Merge all the media queries shared throughout this doc into one to have a clean code.

Here are a few media queries that you'll need based on the designs we shared above.

Custom sections

In your Shopify admin, go to Themes > Customize > Edit Code and search for page.rivo-loyalty.liquid. Then, add any custom code below <div id="rivo-page-wrapper" style="min-height:800px;"></div>.

Referral section

You can replace the current referral section with the one you like more. Here's a 2-column example with text and image.

<div class="page-section" id="section-referrals">
  <div class="columns-faqs">
    <div class="content-left">
      <h2 class="section-title">Share your love for coffee</h2>
      <h3 class="section-subtitle">Give $5, Get $5</h3>
      <p class="text">Refer a friend and you both get $5 towards your next purchase*</p>
      <p class="text-highlight">*offer valid for new customers only</p>
      <a href="https://yallahcoffee.co.uk/account/login?checkout_url=https://yallahcoffee.co.uk/pages/loyalty-program" class="btn btn-referral">Refer Now</a>
    </div>
     <div class="content-right">
       <img src="https://cdn.shopify.com/s/files/1/1498/5720/files/CRCC-page-tile2.jpg?v=1635252575" alt="Yallah Coffee Referrals">
     </div>
  </div>


/* STYLE YOUR SECTION */

<style>
.section {
  padding: 75px 0;
}
  
.columns-faqs {
  display: flex;
  margin: 0 auto;
}

@media (max-width: 800px) {
  .section {
  padding: 75px 20px;
}
  .columns {
    flex-direction: column;
  }
  .content-left {
    padding: 0 !important;
  }
  .content-right {
    padding-top: 50px;
  } 
}

.content-left, .content-right {
  flex: 1;
  text-align: center;
  align-self: center;
}

.content-left {
  padding: 0 75px;
}

.section-title {    
  font-size: 38px;
  color: #000000;
  font-family: inherit;
  margin-bottom: 0.5em;
  margin-top: 0;
  text-transform: uppercase;
  line-height: 1.25 !important;
  font-weight: bold !important;
  display: grid;
}

/* LINE EFFECT UNDER THE TITLE */
.section-title:after {
    content: "";
    background-image: url(https://d3afjz4ck0dmfv.cloudfront.net/underline-yallah-coffee_1_2.png) !important;
    background-size: contain;
    background-repeat: no-repeat;
    height: 1rem;
    margin-top: 20px;
}

.section-subtitle {
  font-size: 22px !important;
  margin-bottom: 10px;
}
  
.text {
    font-size: 17px;
}
  
.text-highlight {
  color: #f9ac76 !important;
  margin-bottom: 40px;
}

.btn-referral {
  background-color: #212721 !important;
  border: 1px solid #c7c7c8 !important;
  max-width: fit-content !important;
  height: fit-content !important;
  padding: 15px 30px !important;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
}

.btn-referral:hover {
  background: #f9ac76 !important;  
  text-decoration: none;
}

#section-referrals a, #section-referrals a:link, #section-referrals a:visited, #section-referrals a:hover {
    color: white !important;
    text-decoration: none;
    outline: 0;
      font-weight: 700;
}
  
.referral-img {
  height: auto;
  max-width: 100%;
} 
</style>

FAQs

<div class="page-section" id="faqs">
  <div class="columns-faqs">
    <div class="content-left">
      <img src="https://cdn.shopify.com/s/files/1/0370/0215/0024/files/Signature_detergent_pouring_detail_c9ad9e41-08e6-49f7-946a-fa09895c6510_590x.jpg" alt="Dirty Labs">
    </div>
    <div class="content-right">
          <div class="title" style="font-size: 40px; color: #000000; font-family: inherit; text-align: left;">Frequently Asked Questions</div>
    <div class="accordion-wrapper">
          <button class="accordion">What is the Loyalty Program about?</button>
            <div class="panel">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        <button class="accordion">Who is eligible to join?</button>
            <div class="panel">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        <button class="accordion">How do I join the Loyalty Program?</button>
          <div class="panel">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
            <button class="accordion">When do my points expire?</button>
          <div class="panel">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
    </div>
  </div>
</div>

/* -----> EDIT THE CONTENT ABOVE ⬆️ <----- */

<style>
#faqs {
  padding: 100px 5% !important;
}
  
.columns-faqs {
  display: flex;
  margin: 0 auto;
  margin-bottom: 150px;
}

@media (max-width: 800px) {
  .section {
  padding: 75px 20px;
}
  .columns-faqs {
    flex-direction: column;
  }
  .content-left {
    padding: 0 !important;
  }
  .content-right {
    padding-top: 50px;
  } 
}

.content-left, .content-right {
  flex: 1;
  text-align: center;
  align-self: center;
}

.content-left {
  padding: 0 75px;
}

/* ACCORDION */
.accordion-wrapper {
  margin: auto;
  margin-top: 40px;
  margin-bottom: 40px;
}
.accordion {
  font-family: inherit;
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.2s;
}

.active, .accordion:hover {
  background-color: white;
}

.accordion:before {
  content: '\002B';
  color: black;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

.active:before {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  border: none;
  text-align: start;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height .15s linear,opacity .15s linear .1s;
}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

CSS Tips, Tricks and Toolkit

Premade Complete CSS Themes for Your Popup

Customizing the Design of your Opt-in Popup with CSS

Premade CSS themes for your Account Page Embed

Adding custom CSS to your Loyalty emails