Skip to content

Show an audio player with tracklist on products

Label includes an audio player, and an audio tracklisting feature that you can add to your store's Product pages.

When a visitor selects a product with associated audio tracks, the tracks are listed in an audio player tracklist (block) on the product's page. If the visitor selects a track from a tracklist, the track plays in the audio player (block). By having a dedicated block for each feature, the audio player and tracklist can be placed in different areas of the product page.

In the following video, on a store's product page, an audio track is selected from the tracklist, and the track plays in the audio player.

Apply the music template to a product

  1. In your Shopify admin, select Products.

  2. From the Products list, select a product that requires the audio player.

  3. Locate and use the Theme template dropdown to select the Music template.

  4. Select Save.

Video demo: Apply the music template to a product

The following video demonstrates how to apply the music template to a product.

Upload audio files

  1. Visit your store, and then select a product that requires audio files.

  2. In your browser, note the part of the page URL after /products/. This part of the URL is the product handle.

    For example, for the product in the following image, the page URL is https://example.com/products/madonna, so the product handle is madonna.

    A product handle in the URL for a Shopify product page.

  3. In your store's admin, select Settings > Files.

    The files settings menu in shopify admin.

  4. Select Upload files, and then choose an audio file to upload.

    Repeat this step to upload audio files for each product that requires them. Files must adhere to the following conventions:

    • Filetype. Upload .mp3 audio files only.
    • Bitrate. To optimize performance, upload audio files with a maximum bitrate of 128kbps.
    • Filename. Apply the file naming convention [product-handle]-[track-number].mp3. For example, for a product with the handle madonna, set the filename to madonna-1.mp3. To upload multiple files for the same product, name the second file madonna-2.mp3, name the third file madonna-3.mp3, etc.

Video demo: Upload audio files

The following video demonstrates how to upload audio files.

Set up the audio player and tracklist

To set up the audio player block and the audio player tracklist block:

  1. Go to Customize theme. At the top of the page, use the dropdown to select a page that contains a Product pages section. For example, select Products > Music.

  2. From the Product pages section menu, select the Audio player block.

    An Audio player block selected in the Product pages section menu in Theme editor.

  3. In the Tracklist text box, enter a song title for each track to be added to the tracklist. Place each song title on a separate line.

    The tracklist textbox inside an Audio player block settings menu in Theme editor.

Note

After you set up the audio player block, the audio player tracklist block is displayed automatically.

Video demo: Set up the audio player and tracklist

The following video demonstrates how to set up the audio player and tracklist.

Display vinyl-style track numbers

The default tracklist uses a numbered list style, 1, 2, 3... To use a vinyl record tracklist format:

  1. Select an Audio player block inside a Product pages section.

  2. In the Tracklist text box, prefix each song title with a side letter and track number.

    For example, enter the song titles:

    A1 Madonna
    B1 Drive, etc.

    The tracklist textbox with vinyl track numbering, inside an Audio player block settings menu, in Theme editor.

  3. On the product page, confirm that the audio player tracklist block applied the vinyl track numbering automatically.

    The tracklist textbox with vinyl track numbering on a product page.

Video demo: Display vinyl-style track numbers

The following video demonstrates how to display vinyl-style track numbers.

Add tracklists dynamically

In Theme editor, with Shopify's Online Store 2.0, dynamic data can be added into a page template. This means, inside a product template, you can add a dynamic tracklist field into an audio player block. A tracklist can be generated automatically, by using the names of the tracks associated with each product. Then, the tracklist is displayed on the product page for each product automatically.

To create and add tracklists from a dynamic source:

  1. In your store's admin, go to Settings > Metafields.

    The metafield settings menu in shopify admin.

  2. On the Metafields page, select Products, and then choose Add definition.

    The product metafield definitions menu in shopify admin.

  3. In the Name text box, enter a name for the metafield, and then select the name from the autocomplete text prompt to confirm.

    You can enter any name, for example enter the name tracklist.

    The metafield definition name menu in shopify admin.

  4. Expand the Select content type dropdown, and then select Text.

    The Select content type dropdown inside the metafield definitions menu in shopify admin.

  5. Select the checkbox option to enable Multi-line text.

    If prompted, select Save from the Unsaved changes menu at the top of the page.

    The multi-line text checkbox, inside the metafield definitions menu, in Shopify admin.

  6. In Theme editor, go to Customize theme.

  7. At the top of the page, use the dropdown to select a page that contains a Product pages section. For example, select Products > Music.

  8. From the Product pages section menu, select the Audio player block.

    An Audio player block selected in the Product pages section menu in Theme editor.

  9. In the Tracklist text box, remove the song titles you entered manually.

    The tracklist textbox inside an Audio player block settings menu in Theme editor.

  10. Select the Insert dynamic source icon.

    The Insert dynamic source icon, inside the tracklist textbox area, for an Audio player block in Theme editor.

  11. In the Insert dynamic source menu, select the name of the metafield you created in the previous Step 3, and then select Insert. For example, select tracklist.

    Metafields listed inside the Insert dynamic source menu in Theme editor.

  12. Confirm that the dynamic source is listed inside the Tracklist text box.

    The tracklist textbox, inside an Audio player block settings menu, with an added dynamic source, in Theme editor.

  13. Verify that the audio tracks are listed automatically for the relevant products.

Video demo: Add tracklists dynamically

The following video demonstrates how to add tracklists dynamically.