> For the complete documentation index, see [llms.txt](https://awecommerce.gitbook.io/awe-seasonal-effects/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://awecommerce.gitbook.io/awe-seasonal-effects/getting-started/effects/background-music.md).

# Background music

Build a playlist with library tracks or your own audio, and choose how it plays across your store.

Set the mood with a playlist of themed tracks, your own uploaded audio, or a mix of both. Shoppers can play or pause the music using a small floating player.

To get started:\
**Open** a campaign → **Elements** → **Background music** → **Edit settings**. Turn **Background music** on, then **Save** your changes. For a new campaign, click **Create**.

{% hint style="info" %}
Your campaign must be active and the app embed enabled for music to appear on your storefront. See [Enable the app embed](/awe-seasonal-effects/getting-started/enable-app-embed.md).
{% endhint %}

***

## 1. **Choose your tracks**

<figure><img src="https://2143911517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh99vPHicsa9fNoUu2h0S%2Fuploads%2Fgit-blob-99cf1b6bedc99a8c8b65ccb4eee1776f6ffd26ee%2Fbackground-music-01-playback.png?alt=media" alt="Track library with three selected tracks for a background music playlist"><figcaption></figcaption></figure>

### **1.1 Track library**

Use **Search effects** or the category filters to find music for your campaign. Click a track card to add it to your playlist; click a selected card again to remove it. You can combine library tracks and uploaded tracks, up to **10 tracks per campaign**.

### **1.2 Play order**

<figure><img src="https://2143911517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh99vPHicsa9fNoUu2h0S%2Fuploads%2Fgit-blob-ee903be3b539d752fd35d2ae37cc05ac5d3060da%2Fbackground-music-05-play-order.png?alt=media" alt="Play order with track drag handles and buttons to remove tracks from the playlist"><figcaption></figcaption></figure>

The **Play order** list shows the tracks in your queue.

* Drag a track by its handle to change its position.
* Click the **×** beside a track to remove it from this playlist.
* Turn off **Shuffle** to arrange a fixed play order.

Removing a track from the queue does not delete it from **Your uploads**.

## 2. **Upload your own music**

<figure><img src="https://2143911517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh99vPHicsa9fNoUu2h0S%2Fuploads%2Fgit-blob-841fd529a0b201f9b4d4aa89be0c1368b62da221%2Fbackground-music-03-upload.png?alt=media" alt="Upload a track dialog with Add audio, file requirements, Track name and rights confirmation"><figcaption></figcaption></figure>

1. Click **Upload track** above the track library.
2. Click **Add audio**, or drag a file into the upload area. Use an **MP3, M4A, OGG or WAV** file, up to **10 MB**.
3. Check the **Track name** and edit it if needed. This name helps you find the track in your library.
4. Tick **I have the rights to play this audio on my storefront**. Use a recording you own or have permission to play publicly.
5. Click **Upload track** and wait for the upload to finish.
6. Open **Your uploads**, then click the uploaded track to add it to your playlist. Uploading a file does not automatically add it to the queue.
7. Check **Play order**, then **Save** the campaign.

### **Manage uploaded tracks**

* To use an upload in another campaign, open that campaign's **Your uploads** and select it.
* To remove a track from one campaign, use **×** in **Play order**.
* To remove an upload from the library, click its delete icon and confirm **Delete**. It is also removed from the queue you are editing. Other saved campaigns keep their current copy.

## 3. **Playback settings**

<figure><img src="https://2143911517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh99vPHicsa9fNoUu2h0S%2Fuploads%2Fgit-blob-2fa1ac056328cc7334a4be1b30924fa221860ad4%2Fbackground-music-04-playback-options.png?alt=media" alt="Shuffle, Resume where you left off, quiet gap, volume and loop settings"><figcaption></figcaption></figure>

### **3.1 Shuffle**

Turn **Shuffle** on to play the playlist in a random order. This option is available when the playlist has at least two tracks.

With **Resume where you left off** on, moving between pages keeps the same shuffled queue and the current playback position. It does not choose a new random order on every page.

With Resume off, each new page starts a fresh queue after the shopper interacts.

### **3.2 Resume where you left off**

On by default. Remember the track, queue order and playback position when a shopper moves between pages in the **same browser tab**. If the shopper pauses the music, it stays paused on the next page. They must use the floating player to start it again.

{% hint style="info" %}
Resume remembers where playback stopped; it does not guarantee uninterrupted audio. Music can pause while a new page loads, and the browser may require another click or tap to resume.
{% endhint %}

* Turn Resume off if you want each page to start the playlist from the beginning after the shopper interacts.
* Changing the playlist or its Shuffle, Loop or quiet-gap settings resets the previous playback progress. After reloading, the updated playlist waits for the shopper to interact and starts from the beginning.
* For an existing campaign created before this option was available, open its music settings, check Resume and **Save** to apply it to your storefront.

### **3.3 Leave a quiet gap between tracks**

Turn this on to add a pause before the next track. Choose **5s**, **15s**, **30s** or **60s**, or enter your own duration from **1–120 seconds**. Turning it on for the first time uses **10 seconds**.

This option is available when the playlist has at least two tracks. With Resume on, the remaining gap is remembered when the shopper changes pages.

### **3.4 Volume**

Choose **0–100%**. The default is **25% · quiet**. At 0%, no music is audible. Shoppers can still pause music using the floating player.

### **3.5 Loop**

On by default. Repeat the playlist after the last track. Turn it off to play the queue once and stop; for a one-track playlist, the track plays once.

{% hint style="info" %}
Music with sound normally starts after the shopper clicks or taps the page. Browsers control whether playback can start automatically, including when resuming on another page.
{% endhint %}

## 4. **Player widget**

<figure><img src="https://2143911517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh99vPHicsa9fNoUu2h0S%2Fuploads%2Fgit-blob-862de3d8a0b8cec0b15b253c0bbf025cf77ac74c%2Fbackground-music-02-player.png?alt=media" alt="Background music floating player position, background colour, corner roundness and welcome message"><figcaption></figcaption></figure>

* **Position**: **Bottom left** (default), **Bottom right**, **Top left** or **Top right**.
* **Background**: the player's colour.
* **Corner roundness**: from square to **Pill** (default).
* **Welcome message**: a short line beside the player, such as `Sound on, worries off 😎` (up to 60 characters). Leave it empty to show no message.

## 5. **Save and check your storefront**

1. **Save** your campaign, or click **Create** for a new one, and make sure it is active.
2. Open your storefront and click or tap the page to start music.
3. Check the selected tracks and player volume.
4. If Resume is on, move to another page in the same tab and check that playback continues from where it stopped. If the browser blocks automatic playback, click or tap to resume.
5. Pause using the floating player, then visit another page. The music should remain paused while Resume is on.

***

💬 If you have any related questions, please contact us via **Live chat** in the app.
