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.
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 /* 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.
In case you have any queries or confused, contact our support or just use Storetasker - our dev partners for customisation.