Icon mit Text Box customized

[PPnet]

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

[Kai]

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. 

[PPnet]

Ich benutze das Dawn Theme.

[Gabe]

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 👀 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! 😉

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:

<img alt="" class="float-left" height="200" src="https://cdn.shopify.com/s/files/1/0002/2783/5906/files/736dbf80-36ee-4a02-8cf4-94939646b623-cover.png?v=1693378431" style="padding: 0px;" title="" width="400">

Hoffe das hilft dir weiter! 😉