Introduction

Customizing your Floating Widget's appearance is easily achievable through CSS. Let's explore the fundamentals of applying custom CSS and suggest some starting points.

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.

While expertise isn't necessary to begin, we suggest visiting these resources if you're interested in learning the essentials. Here are the CSS modifications you can use to personalize 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. For CSS editing, we suggest utilizing your browser's inspector tool to implement changes. Once you're satisfied, simply copy your modifications and insert 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.

Design customization examples

Express your individuality by employing CSS adjustments to align the Floating Widget's look with your distinct style and company branding.

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?

Should you encounter any difficulties or need assistance with styling, our team is ready to support you! Drop us an email and we'll gladly help with any CSS modifications.

As CSS alterations demand time, perseverance, and a degree of technical skill, our team isn't able to provide support for changes via live chat. For minor custom style requests, please contact our Support Engineers through email, and we'll do our utmost to assist you.