All Collections
Onsite
Dedicated Page Builder
Adding a custom style and font to your Dedicated Page with CSS
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

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:

  1. Click Onsite > Dedicated Page on the left sidebar

  2. On the lower right side, click General Settings

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

  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 the file to your Shopify Store. To access the Files page, go to Content > Files

  2. Copy the link of the uploaded font

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

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

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

Did this answer your question?