Table of Contents
✨ Overview #
The Main Collection Page is where customers can browse your beats. This page supports grid layouts, filters, sorting, and integrates the Beatifyy Pro audio player with waveform playback.
This guide shows how to customize the layout, filters, grid, font styles, icons, and buttons using Shopify’s Theme Editor.
🧭 Step-by-Step Guide #
🔹 Step 1: Access the Theme Editor #
- Log in to your Shopify Admin
- Go to Online Store → Themes
- Click Customize next to your published theme
- From the top dropdown, choose any Collection Page
🧱 Section: “Main Collection Page” #
You’ll find this section titled:
main-collection-product-grid
🛒 Step 2: Customize Product Display #
| Setting | What It Does |
|---|---|
| Products per Page | Set how many beats to show (8–24) |
| Columns Desktop | Choose 1 to 5 beat cards per row |
| Columns Mobile | Choose 1 or 2 per row on mobile |
| Show Vendor | Show or hide the artist/vendor name |
| Show Rating | Display star ratings (if enabled) |
| Quick Add | Allow users to add beats instantly |
🖼️ Step 3: Control Image Styles #
| Option | Description |
|---|---|
| Image Ratio | Use adapt, square, or portrait |
| Image Shape | Use creative shapes like blob, arch, etc. |
| Show Secondary Image | Toggle to show hover image effect |
🎛️ Step 4: Enable Playlist Data (Metafields) #
Enable or disable these track-specific features:
- ✅ Enable BPM – Displays tempo (e.g., 102.5 BPM)
- ✅ Enable Genre – Shows genre like Hip Hop, Afro, Amapiano
- ✅ Enable Key – Displays musical key (e.g., C Minor)
- ✅ Enable Tags – Style, mood, etc.
- ✅ Enable Mood – (If set as metafield in products)
🎵 These are pulled from your product metafields. Make sure you’ve set them up (refer to “Setting Up Metafields for Beatifyy Pro”).
🧩 Step 5: Filter & Sort Options #
| Feature | Description |
|---|---|
| Enable Filtering | Show filters like genre, mood, or vendor |
| Filter Type | Choose: horizontal, vertical, or drawer |
| Enable Sorting | Allow users to sort by best selling, date, etc. |
🎨 Step 6: Customize Colors & Fonts #
🎶 Playlist Title #
- Font: Pick a custom title font
- Color: Title normal, hover, and active states
- Size: 0 – 40 px
📝 Playlist Field Font #
- Customize the genre, bpm, key, tags font and color
- Great for styling all secondary info
⏯ Playlist Button Styles #
- Background & Label Colors (Normal, Hover, Active)
- Font Size (for the Add to Cart or Download buttons)
🔊 Play Icon #
- Change the play button color on hover, active, or default
📱 Step 7: Make It Responsive #
The layout auto-adjusts for:
- Mobile (1–2 columns)
- Tablets (custom grid settings)
- Desktops (up to 5 columns)
Use the built-in media query CSS to fine-tune the look across devices.
🔄 Final Step: Save and Test #
- Click Save in the Theme Editor
- Visit your Collection Page
- Hover over beats, test the player, play icons, filters, and sorting
