Documentation: Customizing the Audio Player Styling for Beatifyy Audio Player App

Audio Player Styling #

Playlist Background Color #

• ID: card_bg_color
• Type: color
• Default: #ffffff
• Description: This setting allows you to change the background color of the playlist card. You can choose any color that best fits your brand or the design of your store.

Playlist Title Color #

• ID: playlist_title_color
• Type: color
• Default: #000000
• Description: Use this setting to define the color of the playlist title. This can be adjusted to match your store’s color scheme and improve visibility.

Playlist Title Font #

• ID: playlist_title_font
• Type: font_picker
• Default: assistant_n4
• Description: This setting allows you to choose the font for the playlist title. You can select from a wide range of fonts available in Shopify’s font picker, ensuring that the title reflects your desired aesthetic.

Playlist Title Font Size #

• ID: playlist_title_scale
• Type: range
• Min: 100
• Max: 150
• Step: 5
• Unit: %
• Default: 100
• Description: Adjust the size of the playlist title text using this slider. The value represents the percentage scaling of the default font size, allowing you to make the title larger or smaller depending on your preference.

Button Background Color #

• ID: playlist_button_bg_color
• Type: color
• Default: #000000
• Description: Set the background color of the buttons in the playlist area. Choose a color that complements the playlist background and text colors for a cohesive look.

Button Label Color #

• ID: button_label_color
• Type: color
• Default: #ffffff
• Description: Define the color of the text labels on the buttons. This ensures that the button labels are readable against the button background.

Button Font Size #

• ID: button_label_font_size
• Type: range
• Min: 0
• Max: 100
• Step: 1
• Unit: %
• Default: 10
• Description: Use this setting to adjust the font size of the button labels. The value controls the size of the text inside the buttons relative to the default size.

Play Icon Color #

• ID: play_icon_color
• Type: color
• Default: #ffffff
• Description: Customize the color of the play icon in the audio player. This allows you to ensure that the play button is visible and matches the overall style of the player.

Show Sale Badge #

• ID: show_sale_badge
• Type: checkbox
• Default: false
• Description: Toggle this option to show or hide a sale badge on items within the audio player section, helping to highlight discounted products.

Sticky Player Styling #

Footer Background Color #

• ID: footer_background_color
• Type: color
• Default: #000000
• Description: Set the background color for the sticky footer player. This color will fill the entire background of the footer player, allowing you to match it with your website’s color scheme.

Footer Text Color #

• ID: footer_text_color
• Type: color
• Default: #FFFFFF
• Description: Define the color of the text displayed in the footer player. This applies to track titles, artists, and other text within the footer.

Footer Text Alignment #

• ID: footer_text_align
• Type: select
• Default: left
• Options:
  • left: Align the text to the left.
  • center: Center the text within the footer.
  • right: Align the text to the right.
• Description: Choose how the text in the sticky footer player is aligned.

Footer Elapsed Time Color #

• ID: footer_elapsed_time_color
• Type: color
• Default: #FFFFFF
• Description: Set the color for the elapsed time text, which shows how much of the track has been played.

Footer Remaining Time Color #

• ID: footer_remaining_time_color
• Type: color
• Default: #FFFFFF
• Description: Customize the color for the remaining time text, which indicates how much time is left in the track.

Footer Divider Color #

• ID: footer_divider_color
• Type: color
• Default: #FFFFFF
• Description: Set the color for the divider between the elapsed and remaining time in the footer player.

Footer Previous Button Color #

• ID: footer_prev_button_color
• Type: color
• Default: #FFFFFF
• Description: Customize the color of the “Previous” button in the sticky footer player.

Footer Play Button Color #

• ID: footer_play_button_color
• Type: color
• Default: #FFFFFF
• Description: Choose the color of the “Play” button in the sticky footer player.

Footer Pause Button Color #

• ID: footer_pause_button_color
• Type: color
• Default: #FFFFFF
• Description: Define the color of the “Pause” button in the sticky footer player.

Footer Next Button Color #

• ID: footer_next_button_color
• Type: color
• Default: #FFFFFF
• Description: Customize the color of the “Next” button in the sticky footer player.