Skip to main content

Advanced CSS tips & tricks for your Dedicated Page

Get some best-case practices to make your loyalty page stand out with custom CSS. Just copy the code and edit it!

James Dohm avatar
Written by James Dohm
Updated over a month ago

Introduction

Your Dedicated Page is a powerful canvas for showcasing your loyalty program to customers. With CSS customization, you can align every aspect of this page with your brand identity. This guide provides practical CSS code snippets you can copy, paste, and customize to create a unique loyalty experience.

📝 Note: The Dedicated Page is our legacy page builder. While still fully supported, we recommend our newer Landing Page which uses Shopify theme extensions for better performance and customization.

We've included real-world examples from these successful loyalty programs:

Explore some of our best Loyalty Pages →

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

How to Apply CSS Customizations

There are two ways to apply CSS customizations to your Dedicated Page:

Option 1: Using the Custom CSS Field

  1. From your Rivo dashboard, go to Loyalty > Onsite > Dedicated Page

  2. Click on Settings in the top navigation

  3. Scroll down to find the Custom CSS field

  4. Paste your CSS code and click Save

Option 2: Adding CSS to Your Shopify Theme

For more complex customizations or if you're adding custom sections:

  1. From your Shopify admin, go to Online Store > Themes > Edit code

  2. Search for page.rivo-loyalty.liquid

  3. Add your CSS within <style> tags after the <div id="rivo-page-wrapper" style="min-height:800px;"></div> line

Banner Customization

The banner is the first thing your customers see. Make it stand out with these customizations:

Adjusting Banner Content Layout

Centering the Hero Content

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

Centering Banner Buttons

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

Adding Text Effects to Banner

Adding Text Before the Title

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

💡 Tip: You can change the text in the content property to display any welcome message or promotion you want to highlight.

Page Sections Styling

Customize how your page sections look and feel to create a cohesive design:

Section Spacing

Adding Vertical Padding to Sections

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

💡 Tip: Adjust the pixel values to increase or decrease the amount of space between sections. For a more compact design, try smaller values like 50px.

Explainer Section Styling

The Explainer section shows customers how your loyalty program works. Here's how to make it stand out:

Adding a Circle Around Step Numbers

.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

  • Change the background color to match your brand's primary color

  • Adjust the width and height values to change the circle size

  • Use color to change the text color inside the circle

Adding a Background Effect Around Step Numbers

.step-number {
  width: fit-content !important;
  background: linear-gradient(0deg,#F8E9F2,#F8E9F2 45%,rgba(255,0,255,0) 46%); /* replace with your brand colors */
}.step-number {
  margin-left: auto;
  margin-right: auto;
  padding: 0 10px;
  font-family: ubuntu-mono, sans-serif !important;
}

Adding a Hover Effect to Step Cards

.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 Decorative Elements to Section Titles

Add visual interest to your titles with decorative elements:

.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;
}

💡 Tip: Replace the URL with your own decorative element image to match your brand style. SVG images work best for crisp display at any size.

Cards and Icons Styling

Cards display ways to earn and redeem points. Customize them to highlight your program's offerings:

Card Layout Options

Vertical Card Layout

.item-box {
  flex-direction: column; /* Moves 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;
}

Displaying More Cards in a Row

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

💡 Tip: Adjust the max-width value based on your theme's layout. A wider container allows more cards to fit in a single row (maximum of 5 cards).

Card Content Styling

Customizing Text Size in Cards

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

Centering Card Content

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

Card Interaction Effects

Adding Card Hover Effects

.action-cards .item-box:hover:not(.unhoverable) {
  background: #f9ac76 !important; /* Change to your brand's accent color */
  color: white !important;
  border: none !important;
  transform: scale(1.02);
}

Styling VIP Tier Cards

For the VIP Tiers section that shows member progress:

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

Icon Customization

Resizing Icons

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

Changing Icon Colors

This works for default Rivo icons (not custom uploaded icons):

svg.svg-icon, img.custom-icon {
  fill: rgb(0, 171, 132) !important; /* Change to your brand color */
}
 
path {
  fill: rgb(0, 171, 132) !important; /* Match the color above */
}

Button Customization

Buttons are key interactive elements on your Dedicated Page. Customize them to match your brand style and improve user engagement:

Primary Button Styling

Basic Button Styling

.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;
}

💡 Tip: You can change the background and text colors in the Rivo dashboard under Dedicated Page settings. Use CSS for additional styling like borders, padding, and text transformations.

Secondary Button Styling

Differentiating Secondary Buttons

.secondary {
   border: 1px solid #F8E9F2 !important; /* Use your brand's secondary color */
}

Button Interaction Effects

Adding Hover Effects

.btn:hover {
  background: #F8E9F2 !important; /* Change to your brand's accent color */
  transform: scale(1.02); /* Subtle grow effect on hover */
}

Rewards Table Customization

The rewards table displays available rewards and their point costs. Make it stand out with these styling options:

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

Table Header Styling

thead { 
  color: #7C2265 !important; /* Change to your brand color */
  background: #F8E9F2; /* Change to a lighter shade of your brand color */
  letter-spacing: 0.08em !important;
  font-size: 17px;
  padding: 20px !important;
}.table th {
  border-bottom: 2px solid #7C2265; /* Match your header text color */
  padding: .6rem .4rem;
}

Referral Link Customization

The referral link section allows customers to share their unique referral code. Make it visually appealing and easy to use:

Referral Input Field Styling

.form-input {
  border: 2px solid #7C2265; /* Change to your brand color */
  height: 50px;
}input#home_referral_url {
  font-size: 17px;
}

💡 Tip: Use a border color that matches your brand's primary color to create visual consistency across your page.

Copy Button Styling

.copy-coupon .browser-loy-button {
  border-radius: 0; /* Square corners */
  color: #F8E9F2; /* Light text color */
}.copy-coupon .browser-loy-button:hover {
  background-color: #F8E9F2; /* Change to a contrasting color on hover */
  border-radius: 0;
}

Modal Customization

Modals appear when customers interact with actionable cards. Customize them to create a cohesive experience:

📝 Note: To view modals, you need to preview the page and click on an actionable card. Modals cannot be previewed directly in the app builder.

Modal Elements Styling

Close Button Styling

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

Modal Title Styling

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

Modal Link Styling

.modal-container a {
  color: #7C2265 !important; /* Change to your brand color */
  text-decoration: underline;
}

Modal Container Styling

.modal-container {
  border-radius: 0; /* Square corners */
  min-height: 300px;
}

💡 Tip: For a cohesive look, use the same color palette in your modals as in the rest of your Dedicated Page.

Mobile Responsiveness

Ensuring your Dedicated Page looks great on all devices is essential for a positive customer experience. Follow these tips for mobile optimization:

Using Media Queries

Media queries allow you to apply different styles based on screen size. Here's a basic template:

/* Mobile styles (for screens smaller than 768px) */
@media (max-width: 768px) {
  .hero {
    padding: 50px 20px; /* Reduce padding on mobile */
  }
  
  .item-box {
    width: 100%; /* Full width cards on mobile */
  }
  
  .hero-title {
    font-size: 24px; /* Smaller font size on mobile */
  }
}/* Tablet styles (for screens between 768px and 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero {
    padding: 75px 50px;
  }
}

💡 Tip: For cleaner code, combine all your media queries into a single section at the end of your CSS rather than scattering them throughout your code.

Testing on Mobile Devices

Before publishing your page, always test it on different devices to ensure it looks and functions as expected:

  • Check that text is readable without zooming

  • Ensure buttons are large enough to tap easily

  • Verify that images scale appropriately

  • Test navigation and interactive elements

Adding Custom Sections

Enhance your Dedicated Page with custom HTML, CSS, and JavaScript sections to create unique experiences for your customers:

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

Custom Referral Section

Create a visually appealing referral section with a two-column layout featuring text and an 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>

💡 Tip: Customize the text, colors, and image URL to match your brand. Make sure to update the referral link to point to your own loyalty page.

Custom FAQ Section

Add an interactive FAQ section with expandable accordions to answer common customer questions:

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

💡 Tip: Replace the placeholder text with actual FAQs about your loyalty program. Add or remove accordion items as needed to address your customers' most common questions.

Best Practices

Follow these guidelines for the best results when customizing your Dedicated Page:

Maintain Brand Consistency

  • Use your brand's color palette consistently throughout the page

  • Match font styles with your Shopify theme

  • Keep spacing and padding consistent between sections

Keep Your CSS Organized

  • Group related CSS rules together

  • Add comments to explain complex customizations

  • Test changes incrementally rather than all at once

Troubleshooting Tips

If you encounter issues with your CSS customizations, try these solutions:

CSS Not Applying

  • Make sure you're using the correct CSS selectors (class and ID names)

  • Add !important to your CSS rules if they're being overridden by default styles

  • Check for typos in your CSS code

  • Try clearing your browser cache and refreshing the page

Mobile Display Issues

  • Always test your customizations on mobile devices

  • Use media queries to create responsive designs (see Mobile Responsiveness section)

  • Avoid fixed widths that might cause horizontal scrolling on mobile

Related Articles
Using CSS to add a unique style to your Floating Widget
Adding a custom style and font to your Dedicated Page with CSS
Potential Loyalty Points Theme Extension Block
Premade CSS themes for your Account Page Embed
Adding custom CSS to your Loyalty emails
Did this answer your question?