Skip to main content

Adding a custom style and font to your Dedicated Page with CSS

Using CSS is an awesome way to add a unique custom look and feel to your Dedicated Loyalty Page

Laurence Leech avatar
Written by Laurence Leech
Updated over a week ago

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.

✨ 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:

  1. Click Onsite > Dedicated Page on the left sidebar

  2. On the lower right side, click General Settings

  3. Find the Custom CSS field and enter your CSS code

  4. 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.

✨ 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.

  1. Click Onsite > Dedicated Page on the left sidebar

  2. Click General Settings on the bottom right. Make sure 'Default' is selected from the dropdown pickers as the primary and secondary font

  3. 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;} 
  4. Click Save and preview the page on your store.

πŸ“ Note: Our app allows imported fonts from the following sources:

Adding custom fonts from your Shopify Admin

  1. Upload your font file (.ttf, .woff, or .woff2 format) to your Shopify Store. To access the Files page, go to Content > Files

  2. After uploading, click on the file to view it and copy the link URL

  3. From the Rivo Dashboard, go to Onsite > Dedicated Page

  4. 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;}

  5. 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.

Did this answer your question?