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.
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. Here are the CSS customizations you can make to your Widget:
Change the size and appearance of the Widget Button
Modify the positioning of the Widget on desktop and mobile
Customize the shape of the Widget (circle, rounded, square)
Change colors of specific elements (header, text, buttons, icons)
Import custom fonts to match your brand
Add custom banner images to enhance visual appeal
Hide or modify specific sections of the Widget
How to use Custom CSS?
To edit the CSS, we recommend going to your browser, opening the browser inspector, and making changes
After that, you can copy the changes you made and paste them into the CSS editor
Click Onsite > Floating Widget on the left sidebar
Click the Custom CSS option
Add your CSS styles to override the Widget defaults
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;}
Changing the Widget shape
You can override the default shape of your widget using these classes:
.ba-loy-circle { border-radius: 30px !important;}.ba-loy-rounded { border-radius: 10px !important;}.ba-loy-square { border-radius: 0px !important;}
Customizing Widget position
Adjust the widget's position on desktop and mobile:
/* For desktop positioning */
.ba-loy-namespace .ba-loy-messenger-frame, #launcher-wrapper { left: 20px; /* Use this for left side positioning */
right: auto;}
/* For mobile positioning */
@media (max-device-width: 851px) and (orientation: landscape), (max-width: 500px) { #launcher-wrapper { right: 20px; /* Use this for right side positioning on mobile */
left: auto; bottom: 20px; /* Adjust bottom spacing */
}}
Customizing icon and header background
Change the appearance of the widget icon and header:
#baLoySectionWrapper .back-img { height: 37px; background-size: 37px 37px;}
#baLoySectionWrapper .ba-loy-bg-color { background: linear-gradient(125deg, #ff0000, #990000); /* Change to your colors */
}
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!