The Spotify Player element allows shoppers to personalize products with their favorite songs. By searching for a track, the design updates to display the song title, artist, album cover, and a Spotify code that links directly to the track. This feature is perfect for creating meaningful gifts like custom plaques, phone cases, or apparel.

How It Works

When you add a Spotify Music Player to your design:

• Shoppers search for a song using a built-in search field.
• The design updates in real-time to show the song's details: title, artist, album cover, and a scannable Spotify code.
• You can control how the player looks, change fonts, colors, icons, and replace the album cover with a shopper uploaded image.
• You can use Customily's default Spotify API credentials or input your own to avoid potential rate limits during high traffic periods.

In this article:

• How to add a Spotify Player
• Transform the Music Player
• Customizing the Spotify Player
• Testing how the Spotify Player will look
• Using your own Spotify credentials

To add a Spotify Music Player

You can add Music Players on Designs and on Templates, by clicking the Spotify Player button.

Each music player will add a group of elements to your canvas with a Name that you can edit and a Unique Id for you to easily identify it. This group includes:

• An Image Placeholder for the album cover
• A second Image Placeholder for the Spotify code
• Two Text Boxes for the song title and artist name
• A Dynamic Vectors for the player controls (like play/pause icons)

Transform the Spotify Player

Directly on the canvas or by expanding the Transform toolbox, you can transform the entire Spotify Player as a whole, or select each element to transform them individually:

• Position
• Rotation
• Size
• Skew
• Flip
• Order

Customizing the Spotify Player

Since the Spotify Player is made of individual elements grouped together, customization happens at the element level. You can:

• Change the text format for the song and artist names (font, color, size, alignment)
• Adjust the image placeholder size or shape for the album cover and Spotify code
• Swap or restyle the player control icons by changing the dynamic vector options
• Reposition or resize each item to match your layout needs
• Don’t want to display something? You can delete or hide any element you don’t want—like the album cover, if you're avoiding copyright issues—and replace it with a standard image placeholder or a decorative graphic instead.

How to Test the Spotify Player

Once you've added the Spotify Player to your design, you can test how it works just like a shopper would. This lets you preview how your shoppers will interact with the element and confirm everything is displaying correctly.

1. Select any of the individual elements associated with the player.
2. A search field will appear—type in the name of any song or artist.
3. Select the song from the search results.

You’ll see the entire player update live with:

• The song title
• The artist name
• The album cover
• The scannable Spotify code

Using Your Own Spotify Credentials

By default, Customily uses its own Spotify API credentials. However, during periods of high traffic, you might encounter rate limits. To prevent this, you can use your own Spotify credentials:

1. Visit the Spotify Developer Dashboard and log in.
2. Click Create an App and fill in the required details.
3. Once created, you'll receive a Client ID and Client Secret.
4. In Customily, navigate to Account → Integrations.
5. Enter your Client ID and Client Secret in the Spotify section.

By using your own credentials, you ensure a smoother experience for your shoppers, especially during peak times.