14. Geburtstagssale 33 % Rabatt + 1 GRATIS MONAT LIMITIERTES ANGEBOT Jetzt Angebot sichern
33 % Rabatt + 1 GRATIS MONAT Jetzt Angebot sichern

Musik zum Shopify-Shop hinzufügen

Der Artikel erklärt Ihnen, wie Sie Musik zu Ihrer Shopify-Website hinzufügen – mithilfe einer einfachen Audio-Player-App ohne Code. Sie lernen, mühelos Wiedergabelisten aus Ihren Quellen zu erstellen und sie in Ihren Shopify-Shop einzubetten.
Sehen Sie, was ChatGPT denkt Öffne den Live-App-Editor
How to Add Music to Shopify Store

So fügen Sie den Musik-Player zu Shopify hinzu: Kurzanleitung

Elfsight Audio Player app for Shopify. Here’s a simple 3-step guide:”>Ein Audioplayer bei Shopify ist eine hervorragende Möglichkeit, die Atmosphäre Ihres Shops zu verbessern, Ihre Audio-Inhalte zu präsentieren oder Ihre Musik zu bewerben. Das Hinzufügen von Audiospuren schafft ein fesselndes Einkaufserlebnis, setzt die richtige Stimmung und hebt Ihr Angebot hervor. Shopify-Shop-Betreiber nutzen häufig Audioplayer, um Besucher zu fesseln, die Kundenbindung zu stärken und ihren Shop hervorzuheben. Der einfachste Weg, Musik zu einem Shopify-Shop hinzuzufügen, ist die Nutzung der Elfsight Audio Player-App für Shopify. Hier ist eine einfache 3-Schritte-Anleitung:

  1. Wählen Sie ein fertiges Musikplayer-Design aus, das zum Stil und Zweck Ihres Shops passt.
  2. Passen Sie Tracks, Layout und Verhalten so an, dass es zu Ihrem Branding passt.
  3. Kopieren Sie den generierten Plugin-Code und betten Sie ihn in Ihre Shopify-Website ein.

Erstelle deinen Shopify-Musikplayer mit dem untenstehenden Editor!

So fügen Sie Musik zu Ihrem Shopify-Shop hinzu: Detaillierter Leitfaden

Lassen Sie uns Schritt für Schritt durch den Prozess gehen, wie Sie mit der Elfsight Audio Player-App einen Musik-Player auf Shopify erstellen. Sie lernen, wie Sie den Player anpassen und in Ihren Shop einbetten.

  1. Füllen Sie Ihren Player mit Musik. Fügen Sie Audiodateien hinzu, indem Sie Dateien hochladen oder URLs von Plattformen wie SoundCloud, Google Drive oder Amazon S3 einfügen. Passen Sie das Erscheinungsbild des Players durch Auswahl einer Hintergrundfarbe, eines Cover-Bildes oder eines Verlaufes an. Bearbeiten Sie Details wie Autor, Titel und Dauer.
  2. Layout anpassen. Wählen Sie zwischen dem Embed- oder dem Floating-Layout. Das Embed-Layout liefert maximale Informationen zu jedem Track, während das Floating-Layout einen kompakten Player bietet, der sich nahtlos in jede Seite einfügt.
  3. Gestalten Sie die App stilvoll. Schließlich legen Sie in den Einstellungen Theme, Farben und Schriftarten fest. Hier können Sie auch Ihre eigenen Stilvorlagen anwenden.
  4. Kopieren und Code einbetten.Speichern und Veröffentlichen Sie Ihren Audioplayer. Klicken Sie auf die Schaltfläche ‘Code erhalten’, um das HTML-Snippet zu generieren. Kopieren Sie es in Ihre Zwischenablage.

Wie fügt man den Player-Code zu Shopify hinzu? Hier sind einige Möglichkeiten:

Shopify Audio Player zu einer bestimmten Seite hinzufügen

Alles, was Sie tun müssen, ist Ihren benutzerdefinierten HTML-Code an das Dashboard zu übermitteln. So geht das:

  1. Öffnen Sie den visuellen Editor Ihrer Website. Melden Sie sich im Shopify-Adminbereich an und gehen Sie zu Vertriebskanäle → Online-Shop.
  2. Klicken Sie auf die Schaltfläche „Anpassen“. Fügen Sie der Zielseite einen benutzerdefinierten Liquid-Abschnitt hinzu. Wenn Sie den visuellen Editor öffnen, wird standardmäßig die Startseite geöffnet. Um eine andere Seite auszuwählen, suchen Sie sie in der Dropdown-Liste oben auf der Seite aus.
  3. Um das Widget zu installieren, klicken Sie auf Abschnitt hinzufügen. Anschließend wählen Sie Custom Liquid aus der Liste.
  4. Fügen Sie den Widget-Installationscode in das Feld Custom Liquid ein. Falls erforderlich, passen Sie auch das Farbschema an und legen Sie Ober- bzw. Unterabstände fest. Speichern Sie anschließend die Änderungen.

Shopify Music Player zu Produktseiten hinzufügen

Um Ihren benutzerdefinierten Player zu Produktseiten im Shopify-Shop hinzuzufügen, fügen Sie einfach den Code Ihres Widgets im entsprechenden Bereich Ihrer E-Commerce-Plattform ein.

  1. Öffne die Seite des Onlineshops. Gehe zu Verkaufskanäle → Onlineshop.
  2. Klicken Sie auf die …-Schaltfläche und wählen Sie Code bearbeiten. Öffnen Sie die Theme-Vorlage.
  3. Nächste Schritte: Gehe zu Sektionen → main-product.liquid-Datei.
  4. Installationscode einfügen. Finde den Ort, an dem du die App anzeigen möchtest, füge dort den Installationscode ein und speichere die Änderungen.

Shopify Music-App allen Seiten Ihres Shops hinzufügen

Wenn Sie die Shopify Music Player-App auf allen Seiten Ihres Shops verwenden möchten, befolgen Sie einfach die untenstehenden Schritte aus der Anleitung:

  1. Mojo Marketplace
  2. Klicken Sie auf die …-Schaltfläche und wählen Sie Code bearbeiten. Öffnen Sie die Theme-Vorlage.
  3. Wählen Sie die theme.liquid-Datei aus im Layout-Bereich.
  4. Fügen Sie den Installationscode ein. Fügen Sie den Widget-Einbettungscode vor dem schließenden </ body> Tag ein und speichern Sie die Änderungen.

Gern können Sie sich auch unser kurzes Video-Tutorial ansehen, das Ihnen hilft, Musik schneller zu Shopify hinzuzufügen:

Alternative Möglichkeit: Hintergrundmusik-App

Elfsight Background Music app. Mit dieser Musik-App können Sie eine Wiedergabeliste gestalten, die nahtlos zu Ihrem Shop-Inhalt passt und Ihren Besuchern ein mitreißendes und unvergessliches Erlebnis bietet.

  • Ein freundlicher Player für Ihre Website. Mit unserem benutzerfreundlichen Hintergrundmusik-Tool können Sie eine Playlist mit beliebig vielen Tracks erstellen. Schleifen oder Zufallswiedergabe, um die Wiedergabe dynamisch zu halten, und nutzen Sie die Autoplay-Option, um Ihr Publikum von dem Moment an zu fesseln, in dem es Ihre Seite betritt. Die flexiblen Layout-Optionen des Players ermöglichen es Ihnen, ihn überall zu platzieren, während die Anpassungseinstellungen Ihnen helfen, Elemente des Players nach Bedarf anzuzeigen oder auszublenden.
  • Diversify your website content. Steigern Sie die Interaktion, indem Sie Hintergrundklänge hinzufügen, die zum Stil Ihrer Marke passen. Ob festliche Musik zur Bewerbung eines besonderen Events oder dezente Melodien, die zum Einkaufen anregen, schaffen Hintergrundklänge eine Atmosphäre, die Besucher bindet und zum Handeln motiviert. Fügen Sie Tracks von Plattformen wie SoundCloud, YouTube, Vimeo, Vista, Amazon S3 oder Google Drive per URL oder Direkt-Upload von Ihrem Gerät hinzu.

Entdecke die Elfsight Hintergrundmusik-App, um deinen Shopify-Shop mit fesselnden Klängen zu bereichern, die deinen Inhalt perfekt ergänzen.

Top-Funktionen des Shopify Audio Players

#1 Verwandeln Sie Ihre Website mit mitreißenden Audio-Inhalten

Fügen Sie Audiospuren aus mehreren Quellen hinzu, darunter SoundCloud, YouTube, Vimeo, Google Drive und mehr. Erstellen Sie Playlists mit so vielen Tracks, wie Sie möchten, und nutzen Sie Optionen wie Autoplay, Shuffle oder Loop, um den perfekten Ton für Ihren Shop zu setzen. Ob Werbejingles oder beruhigende Melodien – begeistern Sie Ihr Publikum mit eindrucksvollem Audio.

#2 Vollständig anpassbarer Player für ein einzigartiges Erlebnis

Das Erscheinungsbild des Audioplayers individuell anpassen mit Cover-Bildern, Hintergrundfarben oder Gradienten. Zeigen Sie Track-Details wie Autor, Titel und Dauer an – oder halten Sie es minimal, indem Sie nur die Steuerelemente anzeigen. Mit der Möglichkeit, einen schwebenden oder eingebetteten Audioplayer zu erstellen, wirkt Ihr Shopify-Musik-Player einzigartig in Ihrem Store.

#3 Stellen Sie sicher, dass Ihre Musik immer verfügbar ist

Fügen Sie eine umschaltbare Playlist hinzu, damit Besucher sehen, was als Nächstes läuft – oder sie für ein elegantes, übersichtliches Aussehen versteckt halten. Geben Sie den Besuchern mit Wiedergabe-Anpassungen die Kontrolle und lassen Sie sie Ihre kuratierten Tracks ganz nach ihrem Geschmack genießen.

#4 Halten Sie Ihre Besucher bei Laune und bringen Sie sie dazu, wiederzukommen.

Autoplay Setzen Sie die Stimmung mit Autoplay, um Besucher beim Landen auf Ihrer Website mit ansprechenden Klängen zu begrüßen. Verwenden Sie Looping und Shuffle, um das Erlebnis frisch und dynamisch zu halten, damit Nutzer länger bleiben und die Atmosphäre Ihres Shops genießen.

Audioplayer mit jeder Vorlage einbetten

Lassen Sie uns nun kreative Template-Beispiele der Elfsight Audio Player-App für Shopify entdecken. Diese Beispiele eignen sich perfekt für Nutzer, die nicht wissen, wo sie anfangen sollen, und Inspiration für ihren eigenen, einzigartigen Audioplayer suchen.

Beispiel 1. Musik-Playlist

Dieser Player kombiniert ein elegantes, dunkles Design mit dem Floating-Layout, um ein minimalistisches Erscheinungsbild zu schaffen. Am unteren Seitenrand positioniert, benötigt er nur wenig Platz und bietet volle Funktionalität mit einer umschaltbaren Wiedergabeliste.

Audio Player Example: Playlist

Beispiel 2. Meditation und Ambiente

Die benutzerdefinierte Farbpalette und das vom Nutzer hochgeladene Hintergrundbild harmonieren mit dem Website-Design. Die versteckte Wiedergabeliste sorgt dafür, dass die Seite übersichtlich bleibt und eine ruhige Atmosphäre schafft.

Audio Player Example: Meditation

Beispiel 3. Hörbuch

Mit dem Buchcover und einer in Kapitel gegliederten Playlist nutzt dieser Player das Embed-Layout, um sich nahtlos in den Inhaltsbereich zu integrieren und ein intuitives Hörerlebnis zu bieten.

Audio Player Example: Audiobook

Beispiel 4. Naturgeräusche

Mit Fokus auf Einfachheit zeigt dieser Player nur eine Wiedergabeliste, eine Fortschrittsanzeige und Steuerelemente. Titel, Bilder und Künstlerinformationen werden ausgeblendet, damit sich die Nutzer ganz auf das Audioerlebnis konzentrieren.

Audio Player Example: Nature Sounds

Beispiel 5. Einzelspur

Der Elfsight Audio Player eignet sich perfekt, um einen einzelnen Track zu präsentieren. Mit dem Embed-Layout und einem auffälligen Hintergrundbild lenken Sie mühelos Aufmerksamkeit auf Ihren Audio-Track.

Audio Player Example: Track

Beispiel 6. Neues Album

Heben Sie Ihr neuestes Album mit einer auffälligen Präsentation hervor. Passen Sie den Player mit einem maßgeschneiderten Farbschema und einem ansprechenden Hintergrundbild an, damit er heraussticht und Ihr Publikum fesselt.

Audio Player Example: Album

Wir haben noch viele weitere Vorlagen, mit denen du deinen eigenen Shopify-Musik-Player erstellen kannst!

Vorlagenkatalog

Entdecken Sie 30+ Audioplayer-Vorlagen

Schau dir weitere fertige Vorlagen für jeden Anwendungsfall an oder erstelle deine eigene von Grund auf neu!
HTML Music Playlist template
Füge ein Playlist-Widget zu einer Website hinzu, um die Reichweite deiner Musik zu erhöhen und das Engagement zu steigern.
HTML Meditation & Ambience Player template
Integrieren Sie ein Audioplayer-Template in Ihre Website, um Atmosphäre und beruhigende Klanglandschaften für Meditationen zu teilen.
HTML Audiobook template
Erstellen Sie ein Player-Plugin für eine Website und verbessern Sie das Zuhörerlebnis mit einer eleganten Hörbuch-Darstellung.
Die Erstellung eines Player-Templates für Ihre Website ist ideal, um MP3-Dateien einzubetten und Besuchern ein sofortiges Abspielen zu ermöglichen.
Fügen Sie eine Audioplayer-Vorlage in Ihre Website ein und sorgen Sie für eine konstante Audio-Präsenz im Sticky-Format.
Fügen Sie Ihrer Website ein Audioplayer-Widget hinzu, damit Audio bequem in einem Popup-Fenster abgespielt wird.
Das Hinzufügen eines Playlist-Plugins zu einer Website hilft Ihnen, neue Songveröffentlichungen zu bewerben oder Klassiker zu teilen.
Das Einbetten einer Player-Vorlage in eine Website ermöglicht es Besuchern, mit Musik-Autoplay in deine Audiowelt einzutauchen.
Kein passendes Template?
Sie können ganz einfach das Widget zusammenstellen, das Sie benötigen, mit unserem einfach zu bedienenden Konfigurator.

Fazit

Jetzt wissen Sie, wie Sie einen Musik-Player in Ihren Shopify-Shop integrieren – ein leistungsstarker Weg, das Einkaufserlebnis zu verbessern, Besucher zu begeistern und Ihre Audio-Inhalte zu bewerben. In diesem Artikel werden wesentliche Funktionen vorgestellt – von mehreren Audioquellen über anpassbare Layouts bis hin zu Wiedergabeoptionen wie Autoplay, Shuffle und Looping.

Wir haben außerdem kreative Beispiele erkundet, darunter Wiedergabelisten, Meditationsklänge, Hörbücher und Single-Track-Player, um zu zeigen, wie vielseitig der Elfsight Audio-Player sein kann. Ob Sie den Elfsight Audio Player oder die Background Music-App wählen, können Sie einen personalisierten und visuell ansprechenden Player erstellen, der perfekt zu Ihrer Marke passt und Ihr Publikum unterhält. Starten Sie noch heute damit, die Atmosphäre Ihres Shops mit einer maßgeschneiderten Audio-Lösung zu verbessern – sie fesselt und inspiriert Ihre Besucher.

Weitere Infos?

Artikel von
Technischer Content-Spezialist
Ivan ist technischer Content-Spezialist bei Elfsight. Er verfasst praxisnahe API-Anleitungen und Entwicklerdokumentationen, die Integrationen für verschiedene Plattformen und Automatisierungs-Workflows abdecken – und manuelle Arbeit reduzieren.