Background Options

QAB offers multiple options for bar backgrounds. In the basic plan, you can select a single color as the background. The premium plan allows access to gradients, patterns, and images as backgrounds.


Screenshot 2024-07-17 at 5.02.57 PM.png




Single Color

To use a single color as the background for the bar, select Single Color under Background Style.

Screenshot 2024-07-17 at 5.03.32 PM.png



You can set the background to a color of your choice using the color picker.



The Background Color Opacity slider controls the opacity of the background (how transparent or 'see-through' the background color is).

Screenshot 2024-07-17 at 2.28.47 PM.png



For example, if you set the opacity to 0.5, the bar will be half transparent, revealing content behind the bar. 



This can be most visible while scrolling a page in your shop:






Gradient Color Premium Plan Only

The Gradient Color option allows you to use a 2 or 3 color gradient as the background.

Screenshot 2024-07-17 at 5.04.51 PM.png



The app provides an array of presets to choose from:



You can also customize the gradient to your liking by using the color pickers and gradient angle slider: 



To have 3 colors in your custom gradient, click on a preset option that has 3 colors to open a 3rd color picker:






Pattern Image Premium Plan Only

The pattern image background takes a small image and repeats it, creating a pattern.

Screenshot 2024-07-17 at 5.04.54 PM.png



Simply click on the pattern you'd like to set as the background:



You can also load your own pattern (.jpg, .png, .gif) by dragging and dropping it into the drop zone:






Fitted Image Premium Plan Only

The Fitted Image option allows you to use a large image and fills the width of the background.

Screenshot 2024-07-17 at 5.04.58 PM.png


Simply click on the image you'd like to set as the background:



You can also load your own image (.jpg, .png, .gif) by dragging and dropping it into the drop zone:


You have the option to have the image scroll up and down, adding a bit of motion to the background which can help draw attention.


The Scroll Speed setting refers to how many seconds it takes the image to fully scroll the height of the image.


Screenshot 2024-07-17 at 4.24.34 PM.png


For example, if you set the scroll speed to 20, the image will smoothly scroll down, taking 20 seconds to reach the bottom. The image will then scroll back up over 20 seconds.

Setting the scroll speed to 0 will keep the image still.


⚠ Please note

The fitted image is meant to be a background only and not contain main content. This option is not intended to display a premade bar with fixed dimensions.

The image will fill the width of the bar. The height of the bar is dependent on the content (message length, font size, and padding). The height of the bar cannot be set to the background content.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us