Weitere Icons hinzufügen in Motion Theme

[mastahlb]

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:

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

[Gabe]

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-👁️, 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:

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

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

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 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.