You can move the flyout widget up and down or even change the colour if you know a little bit of coding. If you don't, you can take help from one of Storetasker's expert (Andrew Durot is a PushOwl specialist you can select as your preferred expert).
You would need to add custom CSS to theme file(like theme.liquid) for this customisation.
On Desktop:
/* Moving flyout widget up or down */
.pushowl-widget-node--desktop .pushowl-simple-toast {
bottom: 85px !important; /* custom distance from bottom */
}
/* Changing the color */
.pushowl-widget-node--desktop .pushowl-simple-toast .bell-button {
background-color: orange !important; /* Custom colour */
border-left: orange !important; /* Custom colour */
}
Here's how an example change looks like.
On Mobile:
.pushowl-widget-node--mobile .pushowl-simple-toast .bell-button {
bottom: 85px !important; /* custom distance from bottom */
background: orange !important; /* custom color*/
}
.pushowl-widget-node--mobile .pushowl-simple-toast .pushowl-widget-background {
bottom: 86px !important; /* Notice the background is 1px more than the .bell-button */
}Here's an example change for mobile looks like.
Some more examples
Changing the color of the bell icon
.pushowl-simple-toast .pushowl-bell-button g {
fill: yellow !important;
}Changing the color of the text inside the flyout
.pushowl-simple-toast .pushowl-simple-toast__title {
color: green !important;
}In case you have any queries or confused, contact our support or just use Storetasker - our dev partners for customisation.