Icon mit Text Box customized

Topic summary

Ein Nutzer möchte eine “Kaufe mehr & spare mehr” Icon-mit-Text-Box auf seiner Produktseite einbauen, ähnlich wie auf einer Referenz-Website.

Lösungsansatz:

  • Der einfachste Weg ist die Verwendung eines benutzerdefinierten Blocks im Theme-Editor
  • Das Icon als Bild einbinden und mit Text kombinieren
  • Dawn Theme unterstützt die neuen 2.0 Features mit Abschnitten und Blöcken, die das Gestalten ohne Page Builder-App ermöglichen

Technische Details:

  • Ein Community-Mitglied hat einen funktionierenden Code-Beispiel bereitgestellt
  • Padding, Höhe und Breite können individuell angepasst werden
  • Der Code verwendet einen CDN-Link für das Icon-Bild
  • Ein Screenshot zeigt die Implementierung mit Payment-Icons im Test-Theme

Hinweis: Bei der Referenz-Website rutscht der Text bei Zeilenumbruch ungünstig auf die linke Seite. Die vorgeschlagene Lösung vermeidet zusätzliche App-Kosten.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.

Hi Leute,

ich würde gerne genau diesen “Kaufe mehr & spare mehr” Icon mit Text Box auch bei meinem Shop einbauen.
Weiß jemand wie ich das hinkriege?

Website: https://www.popsockets.de/de-de/p/black-%E2%80%94-popgrip-for-magsafe—round/806828.html

Hey @PPnet,

vielen Dank für deinen Post.

Generell ist es möglich ein Icon mit Text in ein Theme einzufügen.

Wie dies genau geschieht hängt jedoch davon ab, welches Theme du in deinem Shopify Shop verwendest. Ein jedes Theme in unserem Themeshop hat auf seiner Seite ein Handbuch und die Kontaktdaten der Themeentwickler, die bei Anpassungwünschen hilfreich sind.

Alles was darüber hinausläuft kann man dann mit Google, diesem Forum oder mit Hilfe von Shopify Experten umsetzen.

Welches Theme verwendest du momentan? Wer deins entwickelt hat und unterstützt siehst du so nach.

Ich benutze das Dawn Theme.

Hey @PPnet

Ich sehe was du meinst - dieses promotional box mit Text auf der Produktseite hinzufügen:

In diesem Beispiel rutscht aber der Text bei Zeilenumbruch auf die Linke Seite, was nicht so toll aussieht, tbh. Aber lass uns hier mal :eyes: wie du das auch auf deiner Dawn Theme Produktseite implementieren kannst.

Die Good News ist, dass du die Abschnitte und Blöcke jetzt in deinem Theme Editor verwenden kannst, die Teil unserer neuen 2.0 Theme und Features sind, und die es viel leichter machen die Seiten so zu gestalten, wie man sie haben möchte, ohne für eine Page Builder App o. ä., mehr Geld ausgeben zu müssen! :wink:

Der einfachste Weg wäre es einen benutzerdefinierten Block zu verwenden und diesen Icon als Bild da einbauen, wie ich jetzt mit einem Payment Icons Bild in meinem Test Theme gemacht habe:

Den Code den ich dafür verwendet habe, ist der folgende, wo du das Padding und die Height und Width einfach selber anpassen kannst, sowie meinen CDN Link mit deinem ersetzen:


![736dbf80-36ee-4a02-8cf4-94939646b623-cover.png?v=1693378431|1920x960](upload://z805UrtugiqBTmRjpFEDYGMSJu4.jpeg)

Hoffe das hilft dir weiter! :wink: