Introduction
Transform your Dedicated Page into a seamless extension of your brand identity with custom CSS styling and personalized fonts. This guide will help you create a unique, branded experience for your customers that perfectly matches your store's aesthetic.
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
Find the Custom CSS field and enter your CSS code
Your changes will update in real-time on the left-hand preview. Click Save when you're happy with your customizations.
💡 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.
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 your font file (.ttf, .woff, or .woff2 format) to your Shopify Store. To access the Files page, go to Content > Files
After uploading, click on the file to view it and copy the link URL
From the Rivo Dashboard, go to Onsite > Dedicated Page
Copy the CSS below and paste it into the Custom CSS field. Replace 'Suvenn' with your font name and update the URL with your font file link:
@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 CSS customizations for your Dedicated Page
Here are some examples of CSS customizations you can make to personalize your Dedicated Page:
Change text colors
/* Change the color of all content text */
.content {
color: #4a4a4a !important;
}/* Change the color of titles */
.title, .hero-title {
color: #2c2c2c !important;
}
Adjust padding and spacing
/* Add more space around content */
.section-content {
padding: 2rem !important;
}/* Adjust spacing between elements */
.reward-item {
margin-bottom: 1.5rem !important;
}
Style buttons
/* Style primary buttons */
.btn-primary {
background-color: #3c64b1 !important;
color: white !important;
border-radius: 4px !important;
padding: 10px 20px !important;
}/* Add hover effect to buttons */
.btn-primary:hover {
background-color: #254785 !important;
transform: translateY(-2px) !important;
transition: all 0.3s ease !important;
}
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.
Will my custom CSS affect my entire Shopify store?
No, the custom CSS you add will only affect your Rivo Dedicated Page and not any other part of your Shopify store.
Why isn't my custom CSS working?
Make sure to add the !important declaration to your CSS properties to ensure they override the default styles. Also check that you've saved your changes and refreshed your page.
How can I see what CSS selectors are available to customize?
You can use your browser's developer tools (right-click on an element and select "Inspect") to see the classes and IDs of elements on your Dedicated Page that you can target with custom CSS.