Introduction
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.
✨ Custom CSS is available on the Growth plan and up.
In this article:
Customizing Your Loyalty Page with CSS
🌈 Already a pro with CSS? Check out our Advanced CSS tips & tricks →
To use Custom CSS on your page follow these steps:
From your dashboard, click On-Site Displays on the left sidebar.
Next, click Dedicated Page.
On the lower right side, click General Settings.
Any CSS you write should update in real-time on the left-hand side, just click Save each time you make changes.
To override any 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? Check out Rivo Loyalty on real pages here!
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.
From the Rivo Loyalty dashboard, go to On-site Displays > Dedicated page.
Click General Settings on the bottom right. Make sure there are no fonts currently selected from the dropdown pickers.
Copy the CSS below and paste it into the Custom CSS field.
We're using the Sono font from Google, but you can use your own font.
@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;
}
Click Save and preview the page on your store.
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
Uploading Custom Fonts From Your Shopify Admin
Upload the file to your Shopify Store. To access the Files page, go to Content > Files.
Copy the link of the uploaded font.
From the Rivo Loyalty dashboard, go to On-site Displays > Dedicated page.
Copy the CSS below and paste it into the Custom CSS field
We're using the Suvenn font as a sample, but this should be changed to the name of your own font.
@font-face {
font-family: 'Suvenn';
src: url( 'https://cdn.shopify.com/s/files/1/0609/2213/4784/files/Suvenn.ttf?v=1678438421' )
}
.content {
font-family: 'Suvenn', sans-serif !important;
font-weight: 300 !important;
}
.title, .hero-title {
font-family: 'Suvenn', sans-serif !important;
font-weight: 700 !important;
}
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 – please 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.