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:
How to Apply CSS Customizations
There are two ways to apply CSS customizations to your Dedicated Page:
Option 1: Using the Custom CSS Field
From your Rivo dashboard, go to Loyalty > Onsite > Dedicated Page
Click on Settings in the top navigation
Scroll down to find the Custom CSS field
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:
From your Shopify admin, go to Online Store > Themes > Edit code
Search for
page.rivo-loyalty.liquid
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 colorAdjust the
width
andheight
values to change the circle sizeUse
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 stylesCheck 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