Style Setting

The Style Settings section of Box Music - Background Music gives you the flexibility to customize the appearance of the music control icons in your store. You can adjust the icon style, color, size, and position to match your brand's aesthetics.

Icon Setting

Choose Icons Type of Audio Control

You can select either a default icon from the app’s library or upload your own custom icons.

• Default:

  • Choose an icon from the default options provided by the app to display in your store.

This how the default section looks like

• Manual:

  • Upload Custom Icon ON: Upload an icon of your choice for when the music is playing.

  • Upload Custom Icon OFF: Upload an icon of your choice for when the music is turned off.

This is how the manual section looks like

Here both are required and it supports only SVG extensions

Icon Position

This setting allows you to choose where the audio control icon appears in your store. You can select from various position options to best suit your design.

Icon Size

Adjust the size of the icon to match your store's style. This helps keep the icon visible without being too distracting.

Gap From Bottom

If you choose to position your icon at the bottom of the screen, this setting allows you to set the desired distance between the icon and the bottom edge of the screen.

Gap From Left

This setting allows you to set the distance between the icon and the left side of the screen if the icon is placed on the left.

Color Settings

Color Section

You can manually adjust the icon solid color or choose a gradient to complement your store's design.

• Solid:

  • Customize the color of the icon and its background to your liking. You can preview the changes in the side panel.

Solid Color Section

• Gradient:

  • Apply a gradient background color to the icon using the provided in-app color options. The preview of the changes will be visible in the side panel.

Gradients Color Section

Advanced Setting

Use Rounded Background

Enable this option to make the icon’s background round. This can add a stylish touch to the control icon.

Show Welcome Message

Enable this setting to display a welcome message alongside the icon when customers visit your store.

Above are the two advanced settings

Welcome Message Text

Insert a custom message that will appear with the icon. You can see how the message looks in the side panel preview.

Show Message After Seconds

Set the time (in seconds) after which the welcome message will appear to the user.

Hide Message After Seconds

Set the time (in seconds) after which the welcome message will disappear.

Above you can find the sub-settings