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.

Did this answer your question?