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 Scale and Plus plans. See pricing →
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?
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;
}
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!