Einzelnes Produkt Highlighten

[_MarcelEtienne_]

Guten Tag 😊,

ich würde gerne auf einer Seite (bspw. Startseite, nicht Produktseite) ein Produkt ähnlich wie abgebildet Highlighten:

(Gefunden hier: https://urbanhive.de/pages/homefarm )

Es soll im Endeffekt ein "Highlight-Container" sein, welches auf ein einzelnes Produkt verweist.

Läuft es über ein Plugin? CSS? Ich bin leider komplett überfragt.

Mein Shop nutzt das Dawn-Theme.

Ich hoffe, dass ihr mir helfen könnt. 

Lieben Gruß

[Gabe]

Hey @_MarcelEtienne_ 

Danke dafür aber das ist ein Feature des Motion Theme (oder ist ein Eigenbau) und wird nur mit einer Page Builder App oder ähnlich im Dawn Theme implementierbar sein. 

Um ein ähnliches Produkt-Highlight-Element wie das auf der UrbanHive-Website auf deiner Shopify-Startseite einzurichten, gibt es mehrere Ansätze, die du verfolgen kannst, insbesondere da du das Dawn-Theme verwendest.

WICHTIG

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Hier sind einige Schritte und Überlegungen, die dir helfen können, ein ähnliches Feature selbst zu erstellen oder eine passende App zu verwenden:
 

1. Eigenbau mit Liquid und HTML/CSS/JavaScript

Da Shopify-Themes in Liquid, einer von Shopify entwickelten Template-Sprache, geschrieben sind, kannst du direkt im Theme-Code Änderungen vornehmen, um ein Produkt-Highlight zu erstellen. Die von dir beschriebene Struktur ist spezifisch und könnte ähnlich im Dawn-Theme umgesetzt werden:

• HTML-Struktur anpassen: Nutze die bestehenden Liquid-Objekte und -Tags, um Produktinformationen dynamisch zu laden. Dies könnte das Einbetten von Produktinformationen in ein ähnlich gestaltetes Element wie das von Focal Theme sein.
• CSS für Styling: Um das Erscheinungsbild anzupassen (z.B. das Layout und Design der Produktbilder und Beschreibung), kannst du CSS direkt im Theme-Editor hinzufügen oder anpassen.
• JavaScript für Interaktivität: Wenn du interaktive Elemente wie Wechselschalter oder Modale benötigst, kannst du JavaScript verwenden, um diese Funktionalitäten zu implementieren.
   

2. Nutzung von Shopify-Apps

Falls der manuelle Ansatz zu komplex erscheint, kannst du auch Shopify-Apps in Betracht ziehen, die ähnliche Funktionen bieten. Apps wie „Product Highlight“ oder „Featured Products“ können dir helfen, Produkte auf der Startseite hervorzuheben, ohne dass du tief in den Code eingreifen musst:

• App Store durchsuchen: Besuche den Shopify App Store und suche nach Apps, die Produkt-Showcase- oder Highlight-Funktionen bieten. Viele dieser Apps bieten anpassbare Templates, die leicht in dein bestehendes Theme integriert werden können.
• Bewertungen und Features prüfen: Lies die Bewertungen anderer Nutzer und prüfe die Features der Apps, um sicherzustellen, dass sie deine Anforderungen erfüllen.
   

3. Beachtung von Schema.org-Markup

Das in deinem Beispiel enthaltene Schema.org-Markup ist wichtig für die SEO-Optimierung und sollte beibehalten werden. Stelle sicher, dass die von dir verwendete Methode (ob manuell oder über eine App) dieses Markup unterstützt, um die Sichtbarkeit deiner Produkte in Suchmaschinen zu verbessern.
 

Beispielcode für ein einfaches Produkt-Highlight

Hier ist ein einfacher HTML-Code-Block, der zeigt, wie du ein Produkt in Shopify mit Liquid darstellen kannst:

<div class="product-highlight">
  {% assign product = all_products['product-handle'] %}
  <img src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.title }}">
  <div class="product-info">
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money_with_currency }}</p>
    <a href="{{ product.url }}" class="btn">Mehr erfahren</a>
  </div>
</div>

Ersetze 'product-handle' durch den Handle deines spezifischen Produkts. Wenn du dir unsicher bist, wie du vorangehen sollst, könnte es eine gute Idee sein, entweder einer unserer Page Builder Apps zu verwenden, oder eben einen Shopify-Experten oder Entwickler zu konsultieren, um spezifische Anpassungen professionell umsetzen zu lassen.

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.