Add your flair to the dedicated Loyalty page with some CSS customization and fonts to match. Check out the guides below on how to add CSS styles and a custom font using the @import method.
In this article:
Customizing your page with CSS
🌈 Already a pro with CSS?
Customizing your page with CSS
To use Custom CSS on your page follow these steps:
1. From your dashboard, click On-Site Displays on the left sidebar.
2. Next, click Dedicated Page (or click here to go directly there).
3. On the lower right side, click General Settings.
Now you're all ready to start writing your CSS. Any CSS you write should update in real-time on the left-hand side. Just click save each time you make changes. And since we want to override the default styles, make sure to use the !important tag. If you're not familiar with using CSS, check our other guide on Using Custom CSS.
✨ Looking for inspiration?
Adding a custom font with CSS
In the example below we'll walk through how to add your own custom font using a google font and the @import method.
📝 Our app allows imported fonts from the following sources:
https://fonts.googleapis.com - Google Fonts
https://use.typekit.net - Typekit/Adobe Fonts
https://cloud.typography.com - Hoefler & Co. fonts
https://cdn.shopify.com - Custom fonts uploaded to a Shopify store
1. From the Rivo Loyalty dashboard, go to On-site Displays > Dedicated page
2. Click General Settings on the bottom right.
📝 Note: Make sure there are no fonts currently selected from the dropdown pickers.
3. Copy the CSS below and paste it in the Custom CSS field
@import url('https://fonts.googleapis.com/css2?family=Sono:[email protected];700&display=swap');
.content {
font-family: 'Sono', sans-serif !important;
font-weight: 300 !important;
}
.title, .hero-title {
font-family: 'Sono', sans-serif !important;
font-weight: 700 !important;
}Note: we're using the Sono font from Google, but you can use your own font.
4. Click Save and preview the page on your store
Common questions
Can I get help adding in my custom style or font?
Our team can help you add this – chat with us below or email [email protected] and we'll give you a hand
Where can I find good fonts?
Visit Typekit or Google Fonts for free and affordable fonts to use