1. Home
  2. Audio Player by bPlugins
  3. App Blocks

App Blocks

Before you start: turn on the app

For any audio player to show up on your store, the app first needs to be switched
on in your theme.

  1. From your Shopify admin, go to Online Store → Themes.
  2. Click Customize on your live theme.
  3. In the left panel, open App embeds (the puzzle-piece icon at the bottom).
  4. Find Audio Player by bPlugins and toggle it on.
  5. Click Save.

💡 If your players don’t appear on the store, this switch is almost always the
reason. Check that it’s turned on first.


How to add a block

  1. In the theme editor (Online Store → Themes → Customize), go to the page
    where you want the audio.
  2. Click Add section (or Add block).
  3. Open the Apps category and pick the block you want from the list below.
  4. Adjust the settings, then click Save.

The blocks at a glance

BlockBest for
Product Audio PlayerAutomatically playing the audio you assigned to a product
Audio Player BlockAdding a custom audio player anywhere, with your own colors and style
Spotify BlockEmbedding a Spotify song, album, or playlist
SoundCloud BlockEmbedding a SoundCloud track or playlist
Single Button AudioShowing a saved player by its ID in a compact button style
Audio Player by bPluginsShowing any player you built in the app by its ID

Product Audio Player

Use this on your product pages. It automatically plays the audio you assigned
to that product inside the app — you don’t need to paste any links. Assign audio
to a product in the app, add this block to your product page, and it appears
right away.

Settings

  • Show editor hint when no player is assigned — While editing your theme, shows
    a friendly reminder on products that don’t have audio assigned yet. (Customers
    never see this — only you, while editing.)
  • Margin top — Adds space above the player (in pixels).
  • Margin bottom — Adds space below the player (in pixels).

💡 Assign audio to a product inside the app first, then add this block to your
product template.


Audio Player Block

A flexible audio player you can place on any page. Paste an audio link and style
it to match your store.

Settings

  • Title — The name shown on the player.
  • Audio URL — The link to your audio file.
  • Screens — Choose a layout style: Screen DefaultScreen One, or Screen Two.
  • Image — A cover image or thumbnail for the player.
  • Background Image — An image shown behind the player.
  • Icon Color — The color of the buttons (play, mute, etc.).
  • Brand Color — Your accent color, used for the progress bar.
  • Background Color — A solid color or gradient behind the player.
  • Border Radius — How rounded the corners are.
  • Width — How wide the player is (as a percentage of the space).
  • Height — The player’s height in pixels.
  • Icon Size — How large the control icons are.
  • Show/hide controls — Turn individual controls on or off:
    PlayProgress (the seek bar), Current TimeMuteVolume, and
    Settings (playback speed).
  • Vertical alignment — Position the player to the LeftCenter, or Right.

Spotify Block

Embed any Spotify song, album, or playlist directly on your store.

How to get your link: In Spotify, open the song/album/playlist, click the
••• menu → Share → Copy link. Paste that link into the block.

Settings

  • Url — Your Spotify link.
  • Width — How wide the player is (as a percentage).
  • Height — The player’s height in pixels.
  • Border Radius — How rounded the corners are.
  • Theme — Choose a Light or Dark look.

SoundCloud Block

Embed a SoundCloud track or playlist, with lots of style and display options.

How to get your link: On SoundCloud, open the track or playlist and copy the
URL from your browser’s address bar (or use Share → Copy link). Paste it into
the block.

Settings

Content

  • Url — Your SoundCloud link.
  • Width — How wide the player is (as a percentage).
  • Height — The player’s height in pixels.
  • Start Track — For playlists, which track to start on (0 = the first track).

Style

  • Theme Color — The accent color of the player.
  • Padding Top & Bottom — Space above and below the player.
  • Shadow — Add a drop shadow: NoneSoftMedium, or Strong.

Border

  • Border type — NoneSolidDashedDotted, or Double.
  • Border width — How thick the border is.
  • Border color — The color of the border.
  • Border Radius — How rounded the corners are.

Playback options

  • Enable Auto Play — Start playing automatically.
  • Single Active — Play only one track at a time.
  • Visual — Show the large waveform-style player.
  • Teaser — Show SoundCloud’s teaser/preview message.

What to display

  • Buying — Show the buy link.
  • Sharing — Show the share button.
  • Download — Show the download button.
  • Art Work — Show the cover artwork.
  • Play Count — Show how many times it’s been played.
  • User — Show who uploaded it.
  • Comments — Show listener comments.
  • Hide Related — Hide the “related tracks” suggestions.

Single Button Audio

Shows a player you created in the app as a compact, single-button style player.
Just enter the player’s ID.

Settings

  • Single Button Audio Player ID — The ID of the player you want to show. You can
    find this in the app’s player list.

Audio Player by bPlugins

Shows any player you built in the app, anywhere you like — just paste its ID.

Settings

  • Audio Player Id — The ID of the player you want to show, copied from the app’s
    player list.

Frequently asked questions

My player isn’t showing on my store. What’s wrong?
The most common cause is the app embed being turned off. Go to
Themes → Customize → App embeds and make sure Audio Player by bPlugins is
switched on, then save.

Where do I find a player’s ID?
Open the app from your Shopify admin and look in your player/audio list — each
player has an ID you can copy.

Can I change colors and controls?
Yes. The Audio Player Block lets you set colors, layout, size, and turn
individual controls on or off. Players created in the app can be styled inside the
app itself.

My Product Audio Player is empty.
Make sure you’ve assigned audio to that product inside the app. Once assigned, the
player appears automatically.


Need more help?

Visit bplugins.com/support to reach our
support team. We’re happy to help you get set up.

How can we help?