Using custom CSS to add a unique style and font to your loyalty widget

Adding custom CSS can be a handy way to add a unique look and feel to your Loyalty widget. In this article we'll walk through the basics of using custom CSS and recommend some ways to get started.

This feature is supported on the Loyalty, Rewards & Referrals Premium plan

If you're not familiar with using CSS yet, we recommend diving into some fundamentals. Google offers a free resource on learning CSS as well as W3 Schools. In these courses you'll learn specific modules associated with each topic. You definitely don't need to be an expert to get going with it, but we recommend these websites if you did want to delve into some of the basics and you're not already familiar with CSS.

Because CSS changes requires time, patience and some technical prowess, our merchant success team is unable to assist with any changes over live chat. If you have any small custom style changes to request, please reach out to our Support Engineers at tier2@rivo.io and we'll do our best to give you a hand!

In this article
What can I do with the Custom CSS feature?
How to use Custom CSS
Design customization examples
Adding a custom typeface and font
Common questions

What can I do with the Custom CSS feature?



Whatever your CSS dreams desire 🌈! In this article we'll walk through some basic CSS edits to customize the look and feel of your Loyalty program.

Add a custom typeface or font to elements in the widget πŸ¦„

Change the size of the button ✨

Adjust the size of the widget 🀏

Hide certain areas of the widget πŸ™ˆ

Change colors of specific elements 🎨

How to use Custom CSS

Editing in browser

To edit the CSS, we recommend going to your browser, opening the browser inspector and making changes. After, you can copy the changes you made and paste them in the CSS editor.

To use the Custom CSS on your widget, from your dashboard click Brand Styles on the left sidebar

Click the Custom CSS option

Add your CSS styles to override the widget defaults

Click Save

Note: When you paste in your CSS into the box, the preview image will not update with the changes. To see the new changes, you'll need to view your website.

Design customization examples



To change the breadcrumb arrow, back and close button colors



Go to the Custom CSS settings

Add in the following CSS

.ba-loy-banner .section-top-wrapper .arrow-loy-button {
filter: invert(100%) !important;
}

.section-top-bar {
color: #000000 !important;
}

.loy-close-widget {
filter: invert(100%) !important;
}


Click Save

Now Sync your store for the widget to refresh

Note: In the example above, we've used a simple filter (invert) to invert the theme's colors. To change the the color to something else to match your brand, use a CSS filter generator and enter your target color to use your desired color.

Add a custom font to the widget

Go to the Custom CSS settings

Add in the following CSS

#baLoySectionWrapper .main-default, #baLoySectionWrapper div.panel-section .head-title, #baLoySectionWrapper body {
font-family:monospace;
}


Click Save

Now Sync your store for the widget to refresh

Changing the size of the widget button

Go to the Custom CSS settings

Add in the following CSS

#launcher-wrapper {
height:50px;
}


Click Save

Now Sync your store for the widget to refresh

Adjusting the size of the widget

Go to the Custom CSS settings

Add in the following CSS

.ba-loy-namespace .ba-loy-messenger-frame {
width: 500px;
}


Click Save

Now Sync your store for the widget to refresh

Hiding specific areas of the widget

Go to the Custom CSS settings

Add in the following CSS

.member-signup-card-container {
display: none;
}


Click Save

Now Sync your store for the widget to refresh

Changing colors and styles of elements

Go to the Custom CSS settings

Add in the following CSS

#baLoySectionWrapper .section-panel-wrapper {
box-shadow: none;
border: 2px solid black;
}


Click Save

Now Sync your store for the widget to refresh

Whatever your CSS dreams desire! 🌈

Open the CSS editor to play around and get creative!

Adding a custom typeface and font

Adding a custom font to your Loyalty widget can be an excellent way to keep the widget on brand with your website look and feel. Below we'll walk you through how to import the font and reference it in the CSS.

To add a custom typeface or font to your loyalty widget, you'll need to reference it properly in the Custom CSS section. There's 2 ways to do this, the first is by using the <link> method. The second way is by using the @import method. You only need to use one.

Using the <link> method

Go to the Custom CSS settings

Add in the following CSS

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">


Reference the font's to apply to elements of the widget.

For example:
.header-main, .header-secondary {
font-family: 'Inter', sans-serif;
font-weight: 400;
}


Click Save

Now Sync your store for the widget to refresh

Using the @import method

Go to the Custom CSS settings

Add in the following CSS

@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

Reference the font's to apply to elements of the widget.

For example:
.header-main, .header-secondary {
font-family: 'Inter', sans-serif;
font-weight: 400;
}


Click Save

Now Sync your store for the widget to refresh

In the examples above, we've used a Google Font called Inter. However if you have a custom typeface on your website, you can use that too! It's usually located in the <head> section of your theme.liquid file.

Tada! Once you've added the font, you'll be able to reference it and change the text of specific elements. For example, to change the main header and subheading font, you would use these CSS rules to specify the font.

Questions or hung up on a style change? Our team is here to help! Send us an email at tier2@rivo.io and we'll do our best to adjust any CSS for you!

Common questions

Will this custom CSS interfere with the rest of my website?
No, this CSS will only apply to the styles of the Loyalty widget

Can I get help customizing my widget?
Yes! With any questions, reach out to tier2@rivo.io and our Support Engineers will be happy to help!
Was this article helpful?
Cancel
Thank you!