Create a dedicated loyalty page β†’

Using custom CSS to add a unique style 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.

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

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 browser safe 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!

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!