Beatifyy Store : Shopify Templates for Beat Makers, Musicians & more

View Categories

🎛️ How to Customize the Main Collection Page (Beatifyy Pro)

1 min read

✨ 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 #

  1. Log in to your Shopify Admin
  2. Go to Online Store → Themes
  3. Click Customize next to your published theme
  4. 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 #

SettingWhat It Does
Products per PageSet how many beats to show (8–24)
Columns DesktopChoose 1 to 5 beat cards per row
Columns MobileChoose 1 or 2 per row on mobile
Show VendorShow or hide the artist/vendor name
Show RatingDisplay star ratings (if enabled)
Quick AddAllow users to add beats instantly

🖼️ Step 3: Control Image Styles #

OptionDescription
Image RatioUse adapt, square, or portrait
Image ShapeUse creative shapes like blob, arch, etc.
Show Secondary ImageToggle 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 #

FeatureDescription
Enable FilteringShow filters like genre, mood, or vendor
Filter TypeChoose: horizontal, vertical, or drawer
Enable SortingAllow 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

Powered by BetterDocs