# 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.

<figure><img src="/files/2ozS4CgLESVPsWcThTIi" alt=""><figcaption><p>This how the default section looks like</p></figcaption></figure>

* **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.

<figure><img src="/files/RmqPsij1gKm0GFW9Ngg2" alt=""><figcaption><p>This is how the manual section looks like</p></figcaption></figure>

{% hint style="info" %}
Here both are required and it supports only SVG extensions
{% endhint %}

#### 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.

<figure><img src="/files/MgGQr4GVyUtkQYHQIw3a" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="/files/eoNKzCNdUtBB6qk40hdP" alt=""><figcaption><p>Solid Color Section</p></figcaption></figure>

* **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.

<figure><img src="/files/cdv778dKV5YJU7Q1LZSQ" alt=""><figcaption><p>Gradients Color Section</p></figcaption></figure>

### 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.

<figure><img src="/files/d4p6FYvBw12W4eBGb5NX" alt=""><figcaption><p>Above are the two advanced settings </p></figcaption></figure>

#### 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.

<figure><img src="/files/Sad8bp45FmGymmAHd14D" alt=""><figcaption><p>Above you can find the sub-settings</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.centousapps.com/box-music/app-installation/style-setting.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.