How to set up the audio player section

The audio player section allows you to showcase music, podcasts, or other audio content with a sleek and customizable player.

Section settings

Heading: Set a title for this section. This is optional.

Subheading: Set a subtitle for this section. This is optional.

Description: Add a short text description for this section. This is optional.

Button 1 label: Set the text that will appear on the first button in this section.

Button 1 link: Set the destination for the button link (page, collection, product, external link, etc.).

Open Button 1 link in new window: Choose whether the button link should open in a new tab or the same tab.

Button 2 label: Set the text that will appear on the second button in this section.

Button 2 link: Set the destination for the button link (page, collection, product, external link, etc.).

Open Button 2 link in new window: Choose whether the button link should open in a new tab or the same tab.

Layout

Section width: Adjust whether this section should span the full width of the page (100%) or be contained within a limited layout. Applies on desktop. On mobile, the section spans the entire width of the screen.

Section inner max width (px): Set the maximum width of the content inside this section in pixels.

Section left/right gutter: Adjust the left and right spacing of the section relative to the viewport edge on narrow screens.

Vertical inner spacing: Adjust the spacing between the content and the top/bottom edges of this section in pixels.

Vertical outer spacing: Control the space between this section and the sections above and below it in pixels.

Player position: Choose whether the audio player should be displayed on the left or right side of the section.

Content alignment: Choose how the heading, subheading, description, and buttons (Button 1 and Button 2) should be aligned within this section. Options: Left, Center, Right.

Content width: Set the width of the content area (heading, subheading, description, buttons). The audio player automatically adjusts to fill the remaining available space. Options: Half, One-Third, or Two-Thirds of the section.

Player settings

Playing track label: Set the text that appears before the track name in the player.

Show playlist toggle: Choose whether to display the option to show or hide the playlist.

Show playlist by default: Choose whether the playlist will be open by default or hidden.

Show playback speed control: Choose whether to show or hide the playback speed adjustment button.

Show shuffle toggle: Choose whether the button for enabling or disabling shuffle mode should be displayed or hidden.

Player styles

Background color: Choose the background color of the player.

Text color: Choose the color of the text in the player.

Icons color: Choose the color of the icons in the player.

Accent color: Choose the color for active elements of the player, such as the progress bar (while the song is playing), the volume bar, and the background of the selected track in the playlist.

Text on accent color: Choose the color of the text for the selected track in the playlist.

Secondary color: Choose the color for the progress bar indicating the song before it starts playing (the unplayed progress bar)

Max height (px): Set the maximum height of the player in pixels.

Player border radius: Adjust the roundness of the player’s corners.

Content Styles

Primary button background color: Choose the background color for the primary button.

Primary button text color: Choose the text color for the primary button.

Secondary button background color: Choose the background color for the secondary button.

Secondary button text color: Choose the text color for the secondary button.

Button border radius: Adjust the roundness of the button’s corners.

Section styles

Section background color: Choose the background color for this section.

Heading color: Choose the color for the heading in this section.

Text color: Choose the color for the subheading and description in this section.

Track

Track URL: Paste the URL of the audio file here.

To upload an audio file:

1. Go to Content > Files in your store’s admin panel.
2. Select Upload files and upload your audio file.
3. Copy the file link and paste it into the Track URL field.

Track Title: Enter the title of the track. This will be displayed in the player and playlist.