✨ What You’re Customizing #

This guide will help you personalize your “Featured Tracks” section on your store — including layout, playlist features, fonts, icons, and colors — using the Shopify Theme Editor.

📍 Step 1: Add the Section to Your Page #

1. Go to Shopify Admin → Online Store → Themes
2. Click Customize next to your live theme
3. On the left sidebar, click Add Section
4. Search for Featured Tracks
5. Click Add, then drag it where you want it on the page
6. 🎉 You’re ready to customize

🧾 Step 2: Customize General Settings #

✅ Title #

• Change the main heading of your section (e.g. “🔥 Hot Beats” or “Top Picks”)
• Adjust font size (0–10%) and alignment (Left / Center / Right)

✅ Description (Optional) #

• Use either a custom description or pull in the collection’s description
• Styled using Shopify’s rich text editor

🎛 Step 3: Set the Collection & Display Options #

🎵 Choose a Collection #

• Select the beat collection you want to feature

🎚 Display Options #

• Products to show: Set how many tracks to show (2–25)
• Show View All button: Enable if you want a link to the full collection
• View All style: Choose Link, Solid, or Outline button

🌐 Full Width #

• Toggle to stretch the section edge-to-edge on desktop

🎧 Step 4: Customize Playlist Features #

These control what appears in your tracklist:

🖋 Step 5: Font & Color Customization #

🎶 Playlist Title #

• Change font, size, and color for each beat’s title
• Customize hover and active states for interaction

📑 Playlist Fields (Genre, BPM, Key, Tags) #

• Set font and color for secondary track info

🟦 Step 6: Button & Icon Styling #

⏺ Play Icon #

Customize the play button color:

• Normal
• Hover
• Active (clicked)

🔲 Button Styles #

Customize playlist buttons (if used):

• Background: Normal, Hover, Active
• Label (Text): Normal, Hover, Active
• Font Size for label text

📱 Step 7: Layout & Padding #

• Adjust top and bottom padding for spacing
• The section is responsive and adjusts on mobile automatically
• Left & Right padding is fixed at 70px (can be adjusted in code if needed)

🛠 Developer Tip (Optional) #

To modify advanced layout or animations:

• Use files like card-product-tracks.liquid
• CSS styles in beatifyy-player-style.css and featured-collection-playlist.css

✅ Final Step: Save & Test #

1. Click Save in the top-right of the editor
2. View the section on both desktop and mobile
3. Test the audio player, play buttons, and add to cart functionality