PDF Datei als Download anlegen

[D-Max]

Hallo Shopify Community,

ich möchte gerne auf einer Seite PDF-Downloads untereinander zur Verfügung stellen. Diese sollen dann symbolisch mit Upload dargestellt werden. Ich habe ein Foto angehängt, wie das in etwa aussehen soll. Habt Ihr für mich einen Vorschlag, wie ich das umsetzen kann? Danke.

[Gabe · Accepted solution]

Hey @D-Max 

Im Grunde wirst du das entweder mit einer App oder mit einem Programmierer machen müssen. Ich bin ja nur der Community Moderator heir und kann generelle Tipps geben, wie du hoffentlich verstehen kannst.

Um den Abstand zwischen den Download-Links zu verringern, kannst du den Wert des margin-bottom-Attributs in den <div>-Tags anpassen. Aktuell ist dieser auf 20px gesetzt und beispielsweise auf 10px oder 5px ändern, je nachdem, wie gering der Abstand sein soll.

Hier ein Beispiel, wie du den Abstand auf 10px ändern kannst:

<h2>EU Konformitätserklärung</h2>

<h3>VELUX</h3>
<p>Anbei befinden sich alle Unterlagen bezüglich der VELUX-Rolläden (SSL & SML)</p>

<div style="margin-bottom: 10px;">
   <a href="URL_ZUR_PDF_1" download>
       <img src="URL_ZUM_ICON" alt="Download Icon" style="width: 24px; height: 24px; vertical-align: middle;">
       <span>Hier soll der Text mit Link stehen</span>
   </a>
</div>

<div style="margin-bottom: 10px;">
   <a href="URL_ZUR_PDF_2" download>
       <img src="URL_ZUM_ICON" alt="Download Icon" style="width: 24px; height: 24px; vertical-align: middle;">
       <span>Hier soll der Text mit Link stehen</span>
   </a>
</div>

<h3>Roto</h3>
<p>Anbei befindet sich die Konformitätserklärung, für alle Roto Beschläge, welche wir in unserem Sortiment führen.</p>

<div style="margin-bottom: 10px;">
   <a href="URL_ZUR_PDF_3" download>
       <img src="URL_ZUM_ICON" alt="Download Icon" style="width: 24px; height: 24px; vertical-align: middle;">
       <span>Hier soll der Text mit Link stehen</span>
   </a>
</div>

Bei weiteren Fragen kann ich gerne einen Experten empfehlen!

[Gabe]

Hey @D-Max 

Ihr wollt also eine PDF Datei als Download für die EU Konformitätserklärung anlegen in Shopify. Du hast aber nicht gesagt wo. 

Ist das auf der:

• PDP
• Cart Page
• Bestellbestätigungs-E-Mail
• Dankeseite?

Und wo werden die Icons und PDF Dateien gespeichert - in einem externen Hosting Service oder im Dateienbereich im Shopify Admin?

Die UX des ganzen

Du kannst beispielsweise einen Custom HTML Code und den benutzerdefinierten Abschnitt anwenden, um die PDF-Dateien mit einer symbolischen Darstellung darzustellen, wie einen Icon anstatt nur einem Textlink. Du kannst das Bild-Symbol für die Downloads durch ein kleines Icon oder einen Upload-Button ersetzen, ähnlich deinem obigen Bild mit einem Code wie:

<h2>EU Konformitätserklärung</h2>

<h3>VELUX</h3>
<p>Anbei befinden sich alle Unterlagen bezüglich der VELUX-Rolläden (SSL & SML)</p>

<div style="margin-bottom: 20px;">
   <a href="URL_ZUR_PDF_1" download>
       <img src="URL_ZUM_ICON" alt="Download Icon" style="width: 24px; height: 24px; vertical-align: middle;">
       <span>Hier soll der Text mit Link stehen</span>
   </a>
</div>

<div style="margin-bottom: 20px;">
   <a href="URL_ZUR_PDF_2" download>
       <img src="URL_ZUM_ICON" alt="Download Icon" style="width: 24px; height: 24px; vertical-align: middle;">
       <span>Hier soll der Text mit Link stehen</span>
   </a>
</div>

<h3>Roto</h3>
<p>Anbei befindet sich die Konformitätserklärung, für alle Roto Beschläge, welche wir in unserem Sortiment führen.</p>

<div style="margin-bottom: 20px;">
   <a href="URL_ZUR_PDF_3" download>
       <img src="URL_ZUM_ICON" alt="Download Icon" style="width: 24px; height: 24px; vertical-align: middle;">
       <span>Hier soll der Text mit Link stehen</span>
   </a>
</div>

• URL_ZUR_PDF_1/2/3: Ersetze dies durch die URLs deiner hochgeladenen PDF-Dateien.
• URL_ZUM_ICON: Verwende entweder ein Icon, das du in Shopify hochgeladen hast, oder verwende ein externes Icon. Eine beliebte Wahl wäre z.B. ein Upload- oder PDF-Symbol.
• Die <img>-Tags stellen das Symbol dar, und das <span> enthält den Text für den Link.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[D-Max]

Hallo Gabe,

vielen Dank. Es hilft mir sehr weiter.

Kannst du mir bitte noch einen Befehl einfügen, den der Abstand zwischen den Tabs verringert (siehe Foto)?

Danke 🙂

[Gabe · Accepted solution]

Hey @D-Max 

Im Grunde wirst du das entweder mit einer App oder mit einem Programmierer machen müssen. Ich bin ja nur der Community Moderator heir und kann generelle Tipps geben, wie du hoffentlich verstehen kannst.

Um den Abstand zwischen den Download-Links zu verringern, kannst du den Wert des margin-bottom-Attributs in den <div>-Tags anpassen. Aktuell ist dieser auf 20px gesetzt und beispielsweise auf 10px oder 5px ändern, je nachdem, wie gering der Abstand sein soll.

Hier ein Beispiel, wie du den Abstand auf 10px ändern kannst:

<h2>EU Konformitätserklärung</h2>

<h3>VELUX</h3>
<p>Anbei befinden sich alle Unterlagen bezüglich der VELUX-Rolläden (SSL & SML)</p>

<div style="margin-bottom: 10px;">
   <a href="URL_ZUR_PDF_1" download>
       <img src="URL_ZUM_ICON" alt="Download Icon" style="width: 24px; height: 24px; vertical-align: middle;">
       <span>Hier soll der Text mit Link stehen</span>
   </a>
</div>

<div style="margin-bottom: 10px;">
   <a href="URL_ZUR_PDF_2" download>
       <img src="URL_ZUM_ICON" alt="Download Icon" style="width: 24px; height: 24px; vertical-align: middle;">
       <span>Hier soll der Text mit Link stehen</span>
   </a>
</div>

<h3>Roto</h3>
<p>Anbei befindet sich die Konformitätserklärung, für alle Roto Beschläge, welche wir in unserem Sortiment führen.</p>

<div style="margin-bottom: 10px;">
   <a href="URL_ZUR_PDF_3" download>
       <img src="URL_ZUM_ICON" alt="Download Icon" style="width: 24px; height: 24px; vertical-align: middle;">
       <span>Hier soll der Text mit Link stehen</span>
   </a>
</div>

Bei weiteren Fragen kann ich gerne einen Experten empfehlen!

[D-Max · Accepted solution]

Hallo, ich habe es ganz normal über die Option Rich-Text hinbekommen. Hier kann man Links und einen freien Text hinterlegen. Danke für Deine Unterstützung.