Weitere Icons hinzufügen in Motion Theme

Deutsch Diskussion Technische Fragen & Antworten

Topic summary

Ausgangsfrage: Ein Nutzer möchte im Motion Theme die Auswahl der Icons für Sales-Points in der Produktübersicht erweitern und fragt, wie zusätzliche Icons hinzugefügt werden können und ob Font Awesome Icons verwendbar sind.

Technischer Kontext:

  • Das Motion Theme verwendet SVG-Icons, die direkt in der product-template.liquid Datei eingebettet sind
  • Die Icon-Klasse lautet beispielsweise class="icon icon-circle-checkmark"
  • Version 10.4.1 enthält laut Archetype Themes bereits 20+ gebündelte Icons im “Icon + Text” Feature

Lösungsansatz:

  1. Gewünschtes Icon im SVG-Format beschaffen (z.B. von Font Awesome)
  2. SVG-Code in product-template.liquid einfügen, idealerweise innerhalb der {% case block.settings.icon %} Anweisung
  3. Neuen Fall {% when 'dein-icon-name' %} mit eindeutigem Namen hinzufügen
  4. Theme-Schema in der settings_schema.json Datei anpassen, damit das neue Icon im Frontend auswählbar wird

Hinweise:

  • Lizenz- und Nutzungsbedingungen von Font Awesome beachten
  • Empfehlung, die Frage auch im Design Forum zu posten oder Theme-Entwickler direkt zu kontaktieren
  • Status: Keine abschließende Lösung, aber detaillierte Implementierungsschritte bereitgestellt
Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hallo zusammen,

In der Produktübersicht können sogenannte Sales-Points hinzugefügt werden. Diese enthalten ein Textfeld und eine Auswahl an verschiedenen Icons. Ich möchte die Auswahl der Icons erweitern. Dazu habe ich den Code-Editor des Themes geöffnet und unter product-template.liquid den folgenden Abschnitt gefunden:

Screenshot_456.png
Screenshot_456.png1129×176 8.64 KB

Die Klasse für das gezeigte Icon lautet: class=“icon icon-circle-checkmark”. Werden diese Icons irgendwo gespeichert, damit man weitere hinzufügen kann, oder wie funktioniert das? Des Weiteren würde mich noch interessieren, ob man Icons von der Webseite https://fontawesome.com/ benutzen kann.

Mit freundlichen Grüßen

2

Hey @mastahlb

Deine Frage betrifft ein sehr spezielles Code Feature des Motion Theme und ich hoffe du kannst verstehen, wir hier sind keine Motion Theme Entwickler leider. Hast du die Theme Entwickler kontaktieren können diesbzgl? Oder ge- :eye: , ob das Thema in unserem Design Forum besprochen wird, und deine Frage da auch gepostet?

Der key selling- und sales-points feature des Motion Themes

Welche Version verwendest du? Eine schnelle Google Suche ergab auch, dass der Archetype Themes Spring 2022 Release Changelog schreibt auch über diesen Feature hier → a new Icon + Text section with 20+ bundled icons, that work together to enhance your store’s purchasing experience.

Ich sehe aber den Snippet den du meinst und in meiner Motion Theme V. 10.4.1 sieht dieser wie folgt aus:

29-10-tbj3e-62sy7.png
29-10-tbj3e-62sy7.png3620×1562 707 KB

Generelle Tipps dazu die ich jetzt gegoogelt und in den versch. Foren und GitHubs gefunden habe:

Um deine Auswahl an Icons im Shopify Motion Theme zu erweitern, musst du somit zuerst verstehen, wie Icons im Motion Theme implementiert werden. Basierend auf dem obigen Code-Ausschnitt, verwendet das Theme SVG-Icons direkt im HTML-Code. Das bedeutet, dass jedes Icon als SVG-Element definiert wird, welches direkt in der product-template.liquid Datei eingebettet ist.

Um neue Icons hinzuzufügen, benötigst du somit zuerst das SVG-Format deines gewünschten Icons. Wenn du Icons von Font Awesome verwenden möchtest, gehe auf deren Webseite, suche nach dem gewünschten Icon und lade es im SVG-Format herunter. Dann füge den SVG-Code des neuen Icons in die product-template.liquid Datei ein. Sollte innerhalb der {% case block.settings.icon %} Anweisung gemacht werden, indem du einen neuen {% when 'dein-icon-name' %} Fall hinzufügst. Hier ersetzt du am besten 'dein-icon-name' mit einem eindeutigen Namen für dein Icon und fügst den SVG-Code des Icons direkt darunter ein.

Nachdem du den SVG-Code hinzugefügt hast, musst du sicherstellen, dass du diesen neuen Icon-Namen auch im Theme-Einstellungsbereich hinzufügen oder anpassen kannst, damit er im Frontend ausgewählt werden kann. Dies kann erfordern, dass du die Einstellungen oder das Schema deines Themes in der settings_schema.json Datei anpasst.

Nicht vergessen die Nutzungsbedingungen und Lizenzvereinbarungen von Font Awesome zu überprüfen! :wink:

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:

Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd :hatching_chick: in das Shop einbauen, um deinen Kunden etwas Gamification und 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.