View Categories

Customize the Audio Player Display

5 min read

Table of Contents

 

You can customize the appearance of the Describe It audio player to match your brand and style. Describe It offers two ready-made audio player styles, basic and advanced, with customizable labels, colors, borders, and more. You can even add your own custom CSS for complete control.

 

 

Switch between the basic and advanced audio player #

Describe It offers two ready-made default audio player styles, basic and advanced. The basic audio player includes a simple play button and title. The advanced audio player includes a play button, title, volume controls, and progress bar. If you have the basic audio player and would like to switch to advanced audio player, or vice versa, please follow the steps below.

  1. From the Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Click Customize next to the theme that has Describe It installed.
  3. Click the Sections icon in the left sidebar.
    Sections menu
  4. In the Template menu at the top of the page, select the Products, then select the product template which has Describe It installed.
  5. In the left menu, click on the installed DI Player widget, then click on the trash can icon to remove it from your theme.
    Trash can icon
  6.  Hover your cursor between menu items until the Add block pop-up appears.
  7. Click on the blue plus-sign, then click on Apps.
    Apps menu button
  8. Click on the Describe It audio player you want to add:
    1. DI Player – Basic: Includes a play button and title.
    2. DI Player – Advanced: Includes a play button, title, volume controls, and progress bar.
  9. Optional: Change where the audio player appears on the page by dragging and dropping the widget to an alternate place in the menu. 
  10. Optional: Customize the audio player’s appearance by clicking on the DI player widget to open the style settings menu. For more information, please refer to the section below.
  11. Click Save in the top right corner.

 

 

Customize the audio player colors and style #

To customize the Describe It audio player style, please follow the steps below.

  1. From the Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Click Customize next to the theme that has Describe It installed.
  3. Click the Sections icon in the left sidebar.
  4. In the Template menu at the top of the page, select Products, then select the product template which has Describe It installed. 
  5. In the left menu, click on the installed DI Player widget (DI Player – Basic or DI Player – Advanced) to access the style settings.
  6. Use the following instructions to customize the style settings:
    Describe It style settings
    1. Show Always: Move the toggle to the right to show the audio player on all products – even if they do not have audio available. To only display the audio player on products that have audio, keep the toggle off (left position).
    2. Label: Enter a label to display to your customers above the audio player.
    3. Border Thickness: Use the slider to select border thickness (enter 0 for no border).
    4. Border Color: Click in the field to select a border color or enter a HEX number.
    5. Border Radius: Use the slider to select the border radius (the higher the number, the more rounded the corners appear).
    6. Background: Click in the field to select a background color or enter a HEX number.
    7. Play Button Color: Click in the field to select a button color or enter a HEX number.
    8. Play Button Text: Click in the field to select a color or enter a HEX number.
    9. Play Button Border Radius: Use the slider to select the border radius.
    10. Progress Color (advanced widget only): Click in the field to select a color or enter a HEX number for the active progress bar color.
    11. Progress Placeholder Color (advanced widget only):Click in the field to select a color or enter a HEX number for the inactive progress bar color.
    12. Progress Height (advanced widget only): Use the slider to select the thickness for the progress bar.
    13. Additional CSS: Enter your own CSS for custom styling.
    1. Show Always: Move the toggle to the right to show the audio player on all products – even if they do not have audio available. To only display the audio player on products that have audio, keep the toggle off (left position).
    2. Label: Enter a label to display to your customers above the audio player.
    3. Border Thickness: Use the slider to select border thickness (enter 0 for no border).
    4. Border Color: Click in the field to select a border color or enter a HEX number.
    5. Border Radius: Use the slider to select the border radius (the higher the number, the more rounded the corners appear).
    6. Background: Click in the field to select a background color or enter a HEX number.
    7. Play Button Color: Click in the field to select a button color or enter a HEX number.
    8. Play Button Text: Click in the field to select a color or enter a HEX number.
    9. Play Button Border Radius: Use the slider to select the border radius.
    10. Progress Color (advanced widget only): Click in the field to select a color or enter a HEX number for the active progress bar color.
    11. Progress Placeholder Color (advanced widget only):Click in the field to select a color or enter a HEX number for the inactive progress bar color.
    12. Progress Height (advanced widget only): Use the slider to select the thickness for the progress bar.
    13. Additional CSS: Enter your own CSS for custom styling.
  7. Click Save in the top right corner.

Did you find this helpful?