PDF-Dokumente Produkte

[JH6]

Liebe Shopify-Community,

ich baue gerade einen Onlineshop mit dem "Dawn"-Design und verzweifle an der Bereitstellung von PDF-Dokumenten auf den jeweiligen Produktseiten zum Download. Wichtig: Je nach Produkt sollen unterschiedliche PDF-Dateien, zur Verfügung stehen. Die Dateien habe ich unter Einstellungen > Dateien hochgeladen.

Bei meinen Versuchen die Dateien korrekt einzubinden, bin ich auf folgende Probleme gestoßen:

1. Wenn ich mittels Rich Text den Dateien-Link (aus Einstellungen > Dateien) verlinke, erscheint auf allen Produktseiten dasselbe PDF-Dokument. Das ist genau das, was ich nicht möchte.

2. Ich habe es auch über Metafelder probiert. D.h. ich habe Metafelder vom Typ "Datei" erstellt und dann bei der Definition des Produktes die entsprechenden Dateien in die definierten Metafelder hochgeladen. Im Shop habe ich dann einen neuen Abschnitt Rich Text erstellt und wollte dort über "dynamische Quellen" die Datei-Metafelder hinzufügen. Diese standen mir dann aber nicht zu Auswahl.

Hat irgendjemand eine Ahnung, wie mein Problem gelöst werden kann, sodass ich bei meinen verschiedenen Produkten unterschiedliche Dateien zum Download anbieten kann? Über eine Lösung ohne zwingend den Code bearbeiten zu müssen, wäre ich dankbar aber auch für alle weiteren Hinweise.

Vielen Dank und viele Grüße!  🙂

[Finer]

@JH6 dafür solltest du die Shopify App „digital Downloads“ verwenden. Diese findest du unter folgendem Link: 

https://apps.shopify.com/digital-downloads?locale=de

Ich hoffe, das hilft dir weiter.

Ansonsten müsste man doch an den Code und einen Block für die Metafelder auf der Produktseite erstellen.

[JH6]

@Finer danke für deine Antwort. Leider ist das noch nicht das Richtige. 

Ich würde es deshalb auch mal mit deinem zweiten Lösungsvorschlag "Code und einen Block für die Metafelder auf der Produktseite erstellen" ausprobieren. Könntest du mir hierzu sagen welchen Code ich in welche Datei und an welcher Stelle platzieren müsste?

Vielen Dank!! 🙂

[Finer · Accepted solution]

@JH6 @DaGo1 Richt Text-Abschnitte erlauben in der Regel nur Text- und Zahlenwerte.

In Eurem Fall müsst Ihr den Custom-Liquid Abschnitt verwenden und dort den Wert hinterlegen. Das sollte das ungefähr so aussehen:

{% assign download_file = product.metafields.[namespace].[key] %}
<a href="{{ download_file.value.url }}" target="_blank" download>Download</a>

Das Design müsst ihr natürlich selbst anpassen. 😉

[DaGo1]

Hi, 

danke für deine Antwort, wenn ich den Wert in der Code Seite unter Custom-liquid einfüge erscheint eine Fehlermeldung.

Muss ich darauf achten wo ich es einfüge oder an dem Code etwas anpassen?

Ich kenne mich mit der Code Seite leider gar nicht aus..

[Finer]

@DaGo1 das liegt daran, dass beim Metafeld die Werte [namespace].[key] nur Platzhalter sind 😉

Da ich deine konkrete Bezeichnung des Metafelds für das Dokument nicht kenne, musst du diese noch ersetzen. 

In der Regel sieht das dann folgendermaßen aus "product.metafields.custom.file"

In der Metafeld-definition solltest du die konkrete Bezeichnung finden. 

[DaGo1]

ja macht Sinn.. 😁

Okay der Code wurde akzeptiert, wie kann ich nun das Metafeld mit der Datei in meinen Shop integrieren?

[DaGo1]

Hi, habe mit dem Theme "Refresh" genau das gleiche Problem, gibt es eine Lösung hierzu ?

Würde mich sehr freuen.

LG

[Gabe]

Hey @DaGo1 

Wie @Finer sagt, aber du scheinst auf dem richtigen Weg zu sein! Wenn du es selber programmieren möchtest dann empfehlen wir es immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Erstelle für jedes Produkt ein Metafeld und lade die gewünschte PDF-Datei hoch. Sicherstellen, dass jedes Metafeld eindeutig benannt ist, damit es später im Code referenziert werden kann. Füge den Liquid-Code in die Produktvorlage des Themes in der Testumgebung zuerst ein um es zu testen. In der Regel ist das die Datei product-template.liquid oder product.liquid. Ein Code wie der Folgende kann den Download-Link anzeigen:

{% assign download_file = product.metafields.DEIN_NAMESPACE.DEIN_SCHLÜSSEL %}
<a href="{{ download_file.value.url }}" target="_blank" download>Download</a>

Ggf. hilft dir unsere Doku dazu hier!

[DaGo1]

Hi @Gabe ,

danke für deine Rückmeldung.

Ich verwende eine Themekopie, damit ich nichts "kaputt" mache.. 😄 

Allerdings komme ich nicht ganz weiter..

Den Code habe ich eingegeben und dieser wurde auch akzeptiert.

Das Metafeld habe ich erstellt und die Datei beim Produkt entsprechend hochgeladen.

Nun habe ich ein Rich Text erstellt und wollte die Schaltfläche als dynamische Quelle mit meinem Metafeld verbinden, aber leider wird mir das Feld nicht angezeigt..

[Gabe]

Hey @DaGo1 

Du möchtest also den den Download-Link dynamisch über die Theme Benutzeroberfläche hinzuzufügen, und die Schaltfläche als dynamische Quelle mit meinem Metafeld verbinden -> es kann aber sein dass Dawn dies nicht unterstützt. 

Hier liest man dass Dynamische Quellen für allgemeine Themeneinstellungen nicht verfügbar sind und ggf. im Theme Code selber eingebaut werden müssen. Das kann auch dazu führen, dass dein Theme dann aufgrund Codeänderungen aus den Theme Updates ausgeschlossen werden könnte. 

Du hast ja bereits einen Liquid-Code, der dies tun sollte - einfach den Download-Link in der Produkt-Vorlagendatei manuell einbauen. Suche die Stelle im Code, an dem du den oben-genannten Download-Link hinzufügen möchtest und speichere und teste es da in der Testumgebung um zu sehen ob es funzt.
 

Andere Themes die das besser können als unser gratis Dawn Theme?

Hast du auch andere Themes zum Shop hinzugefügt um zu testen, ob andere das besser können als unser Free Dawn Theme, wie z. B. ein paar bezahlbare Themes? Andere Themes zu testen ist ein best practice denn nur so findet man das beste Theme für die eigenen Produkte und Branding! 

[DaGo1]

Hmm.. dachte das funktioniert einfacher..

Wir müssen für jedes unserer Produkte eine eigene Gebrauchsanweisung zur Verfügung stellen, ich wollte einfach einen "Button" zum anklicken und öffnen dieser Gebrauchsanweisung.. Das muss auch nicht unbedingt ein Download Link sein, es würde auch ausreichen wenn sich einfach eine Seite mit der PDF öffnet..

Auf folgendem Bild sieht man nun den Link, das hab ich als benutzerdefiniertes Liquid hinzufügen können, rein optisch wäre es mir einfach lieber gewesen wenn der "Button" weiter unten diese Funktion gehabt hätte.

[Gabe]

@DaGo1 

Da hast du recht denn das sieht nicht super elegant aus mit dem "blauen" Link. Einen Download Button musst du also zu jeder Gebrauchsanweisung für jedes versch. Produkt anpassen. Alle Produkte bekommen ja nicht dieselbe und da wäre ein dynamischer Link mit einem mehr eleganten Button dafür optimal. ABER:

Um einen visuell ansprechenden Button für die Downloads zu erstellen, anstatt einfach einen Textlink erfordert die Verwendung von CSS zur Stilisierung des Links als Button. Folge die gleichen Schritten wie zuvor, und füge den folgenden Code an der Stelle ein, an der du den Download-Button anzeigen möchtest:

{% assign download_file = product.metafields.DEIN_NAMESPACE.DEIN_SCHLÜSSEL %}
<a href="{{ download_file.value.url }}" target="_blank" download class="download-button">Download</a>

Hier ist dem Link eine Class namens "download-button" ergänzt und die kann man mit CSS stylen, um dem Link das Aussehen eines Buttons zu geben. Gehe zur CSS-Datei - "base.css" und Füge die folgende CSS-Regel am Ende der Datei ein:

.download-button {
 display: inline-block;
 padding: 10px 20px;
 background-color: #333;
 color: #fff;
 text-decoration: none;
 border-radius: 5px;
 font-weight: bold;
 text-align: center;
 margin-top: 20px;
}
.download-button:hover {
 background-color: #555;
}

Das ist nur ein Beispiel und kann angepasst werden um den Button so wie dein obiges Beispiel zu gestalten, und dann sollte der Download-Link als Button angezeigt werden. Bei weiteren Problemen wäre es zu erwägen einen Shopify-Experten wie @Finer zu engagieren, so dass alles korrekt eingerichtet ist.

[DaGo1]

es hat funktioniert, vielen Dank! 😀

[Gabe]