All Collections
Onsite
Floating Widget
Using CSS to add a unique style to your Floating Widget
Using CSS to add a unique style to your Floating Widget

Create a distinctive Floating Widget by using custom CSS

James Dohm avatar
Written by James Dohm
Updated this week

Introduction

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

✨ Custom CSS is available on the Growth plan and above


What can I do with the Custom CSS feature?

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 don't need to be an expert to get going with it, but we recommend these websites if you want to delve into some of the basics. These are the CSS edits to customize your Widget:

  • Change the size of the Widget Button

  • Adjust the size of the Widget

  • Hide certain areas of the Widget

  • Change colors of specific elements


How to use Custom CSS?

  1. To edit the CSS, we recommend going to your browser, opening the browser inspector, and making changes

    Editing in browser

    After that, you can copy the changes you made and paste them into the CSS editor

  2. Click Onsite > Floating Widget on the left sidebar

  3. Click the Custom CSS option

  4. Add your CSS styles to override the Widget defaults

  5. Click Save.

📝 Note: When you paste 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

Unleash your creativity by leveraging CSS modifications to tailor the Floating Widget's appearance to suit your unique style and brand identity.

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

Change the breadcrumb arrow, back, and close button colors

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

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

Add a browser-safe font

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

Import fonts

Use the @import method to add a font from an external CSS file, like Google Fonts. For example:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap');

Use the @font-face method instead if the font already exists in your Shopify theme. For example:

@font-face {
font-family: 'Your Font';
src: url('https://cdn.shopify.com/s/files/1/1761/2711/t/248/assets/yourfont.woff') format('woff');
}

Changing the size of the Widget Button

#launcher-wrapper {
height: 50px;
}

Adjusting the size of the Widget

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

Hiding specific areas of the Widget

.example-element {
display: none;
}

Changing colors and styles of elements

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


Common questions

Will this custom CSS interfere with the rest of my website?

No, this CSS will only apply to the styles of the Floating Widget.

Can I get help customizing my Widget?

If you have any questions or are hung up on a style change, our team is here to help! Send us an email at [email protected] and we'll do our best to adjust any CSS for you!

Because CSS changes require time, patience, and some technical prowess, our 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 [email protected] and we'll do our best to give you a hand!

Did this answer your question?