Introduction
Unleash your creativity and personalize the Dedicated Page to reflect your unique style through CSS customization and matching fonts.
✨ Custom CSS is available on the Scale and Plus plans. See pricing →
💡 Already a pro with CSS? Check out our Advanced CSS tips & tricks →
Customizing your Dedicated Page with CSS
To use Custom CSS on your page follow these steps:
Click Onsite > Dedicated Page on the left sidebar
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.
💡 Pro Tip: The !important rule in CSS is used to add more importance to a property/value than normal. If you use this rule, it will override all previous styling rules for that specific property on that element.
✨ Looking for inspiration? Check out Rivo Loyalty & Referrals on real pages here!
Adding a custom font with CSS
In the example below, we'll walk through how to add custom fonts using a Google font and the @import method.
Click Onsite > Dedicated Page on the left sidebar
Click General Settings on the bottom right. Make sure 'Default' is selected from the dropdown pickers as the primary and secondary font
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:wght@300;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.
📝 Note: 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
Adding 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 Ddashboard, go to Onsite > 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.