Dokumentation des Helm-Themes

1. 1

   Helm zu deinem Shop hinzufügen

   Helm ist über den Shopify Theme Store erhältlich. Nach dem Hinzufügen erscheint es in deiner Theme-Bibliothek unter Online Store in deinem Shopify-Admin.

2. 2

   Den Theme-Editor öffnen

   Klicke auf der Karte von Helm auf Edit theme. Die Startseite öffnet sich mit ihrer Standardkomposition: ein Hero, eine Kennzahlenzeile, eine Schritt-für-Schritt-Erklärung, Kollektionskarten, eine FAQ und ein Call-to-Action, jeweils in einer Canvas-Section.

3. 3

   Farben und Schriften festlegen

   Klicke auf das Symbol Theme settings. Unter Colors passt du die Farbschemata an, unter Typography wählst du die Schriften für Überschriften, Text und Akzente.

4. 4

   Menüs verbinden und veröffentlichen

   Lege deine Menüs unter Content > Menus an, wähle das Hauptmenü in den Einstellungen der Header-Section und ersetze dann die Platzhaltertexte und Bilder. Veröffentliche das Theme, wenn deine Seiten fertig sind.

Die Bezeichnungen im Shopify-Admin stehen hier auf Englisch, so wie das Shopify Help Center sie schreibt. Dein Admin zeigt sie in seiner eigenen Sprache. Die eigenen Einstellungen von Helm erscheinen im Theme-Editor auf Englisch: Version 1.0.8 liefert ihre Editor-Bezeichnungen nur auf Englisch.

Das Preset Helm

Das Preset legt die Startwerte von Theme settings fest. Ändere danach, was du willst: Das Preset ist nur der Ausgangspunkt des Shops.

Presets der Canvas-Section

Wenn du eine Section hinzufügst, bietet der Editor diese Kompositionen von Canvas an. Alle außer dem leeren Canvas kommen mit ihren Blöcken und Platzhaltertext.

• Eine Section hinzufügen. Klicke in der Seitenleiste des Editors auf Add section und wähle Canvas oder eines seiner Presets.
• Einen Block hinzufügen. Fahre über eine Canvas-Section und klicke auf Add block. Canvas nimmt alle Theme-Blöcke und App-Blöcke auf.
• Neu anordnen. Ziehe einen Block oder eine Section an ihrem Griff und klicke dann auf Save.
• Ausblenden statt löschen. Fahre über den Namen eines Blocks oder einer Section und klicke auf Hide.
• Einstellungen der Section. Jede Canvas-Section legt ihre Breite fest, den Abstand zwischen ihren Blöcken, ihren oberen und unteren Innenabstand auf Desktop und Mobilgerät, ihr Farbschema und eine Anker-ID für Links.
• Blöcke in Blöcken. Diese Blöcke nehmen weitere Blöcke auf: Group, Columns, Split, Hero, Slide, Tab, Accordion item.

Blöcke mit Verhalten, das man kennen sollte

• Heading. Überschriftenebene und visuelle Größe sind zwei getrennte Einstellungen, so kann ein kleiner Titel die Hauptüberschrift der Seite bleiben. Behalte eine Hauptüberschrift pro Seite.
• Button. Stile Primary, Secondary und Ghost, Größen Small, Medium und Large. Link relationship setzt nofollow, sponsored, ugc oder noreferrer nur für diesen Link; Default folgt Theme settings.
• Video. Lade ein Video zu Shopify hoch oder füge eine YouTube- oder Vimeo-URL ein, und stelle dann Autoplay, Schleife, Stummschaltung und Steuerelemente ein.
• Icon. Wähle eines von 18 Symbolen, dann seine Größe, Farbe und Ausrichtung.
• Countdown. Zählt bis zum Datum in End date herunter, für alle gleich. Ohne zukünftiges Datum zeigt er nichts, und nach Ablauf des Datums blendet er sich aus.
• Email capture. Legt in Shopify einen Kunden mit dem Tag aus Customer tag an, standardmäßig leadmagnet, damit dein E-Mail-Tool danach segmentieren kann.
• Review card. Verknüpfe ihn mit einem Eintrag eines Metaobjekts product_review, mit den Feldern title, review, rating, author_name und author_avatar, oder fülle ihn von Hand aus. Metaobjekte findest du unter Content > Metaobjects.
• Product rating. Zeigt Sterne aus den Produkt-Metafeldern reviews.rating und reviews.rating_count, und nichts, solange sie leer sind.
• Step list. Fülle HowTo name (for SEO) aus, dann gibt die Liste auch strukturierte HowTo-Daten für ihre Schritte aus.
• Store location. Adresse, Öffnungszeiten, Telefon, Koordinaten und Preisspanne. Der Block gibt auch strukturierte LocalBusiness-Daten aus.
• Product price. Zeigt den Preis der gewählten Variante mit Vergleichspreis und Grundpreis und folgt der Variante, die der Kunde wählt. Die Abholverfügbarkeit und das Banner von Shop Pay Installments folgen ihr ebenfalls.
• Product bundle. Listet die erste verfügbare Variante jedes gewählten Produkts zu ihrem echten Preis, dann ihre echte Summe, ohne Rabatt. Ein Button legt alle in den Warenkorb; ausverkaufte Produkte werden weggelassen.

Das Produkt-Template beginnt mit Titel, Preis, Bewertung, Variantenauswahl, Menge, Kauf-Buttons, Abholverfügbarkeit, Shop Pay Installments und Beschreibung, dann folgen passende Produkte, Verkaufsargumente, eine Garantie, ähnliche Produkte, eine FAQ und die fixierte In-den-Warenkorb-Leiste.

Es gibt kein Template customers: Shopify hostet die Kundenkonten, und das Konto-Symbol im Header öffnet die Anmeldung.

• Die Produkte im Warenkorb, mit ihrer Menge und einem Button zum Entfernen.
• Ein Fortschrittsbalken bis zum kostenlosen Versand, wenn die Schwelle über null liegt.
• Die Rabatte, die bereits im Warenkorb gelten, etwa automatische Rabatte. Es gibt kein Feld für Rabattcodes: Kunden geben Codes beim Checkout ein.
• Eine Bestellnotiz, wenn Show order note aktiviert ist.
• Die Empfängerdaten einer Geschenkkarte, unter der zugehörigen Position.
• Produktempfehlungen, eingestellt in der Section Cart drawer.

Mit einem anderen Cart type führt das Warenkorb-Symbol zur Warenkorbseite.

Indexierung

• Standardmäßig aus der Suche herausgehalten. Der Warenkorb, Suchergebnisse zu einer Anfrage, nach Tag gefilterte Kollektionen und jede Seite nach der ersten werden mit noindex markiert.
• Landing-Templates. Auto-noindex landing pages, im Preset aktiviert, markiert die Templates mit noindex, deren Name landing, leadmagnet oder advertorial enthält.
• Seite für Seite. Ein Text-Metafeld seo.robots auf einer Seite, einem Produkt, einem Artikel oder einer Kollektion ersetzt den Wert für dieses Element, zum Beispiel noindex,follow.
• KI-Suchmaschinen. Ist Allow AI engines to read your content deaktiviert, fügt Helm noindex-Tags hinzu, die sich an GPTBot, ClaudeBot, PerplexityBot, CCBot und Google-Extended richten.
• Links zu anderen Websites. Buttons, Bildlinks, die Ankündigungsleiste, der Footer und der Ladenstandort versehen Links, die deinen Shop verlassen, gemäß den SEO-Einstellungen mit nofollow, noreferrer und einem neuen Tab. Ein Button oder ein Bild kann das mit seinem Link relationship überschreiben.

Strukturierte Daten

Das JSON-LD, das Helm ausgibt, und was jeden Typ auslöst.

• Organization. Auf jeder Seite, mit deinem Logo, der Beschreibung deines Shops und den Social-Media-Konten aus Theme settings. Die Startseite ergänzt WebSite mit einer Suchaktion.
• Product. Auf Produktseiten, mit dem Angebot der gewählten Variante.
• BlogPosting. Auf Artikeln.
• CollectionPage. Auf Kollektionsseiten.
• BreadcrumbList. Dort, wo eine Breadcrumb-Navigation angezeigt wird.
• FAQPage. Aus dem Seiten-Metafeld faq.items, einer Liste von Metaobjekten mit Frage und Antwort, auf Seiten, die page.faq nutzen oder dieses Metafeld tragen.
• HowTo. Aus einer Step list, deren HowTo name ausgefüllt ist.
• LocalBusiness. Aus jedem Block Store location.

• Kein Tracking-Skript. Helm fügt kein Analyse- oder Werbeskript ein. Binde deine Pixel unter Settings > Customer events an, oder über die Apps, die sie bereitstellen.
• Einwilligung. Helm liest die Einwilligung der Besucher aus Shopifys Customer Privacy API. Aktiviere das Cookie-Banner unter Settings > Customer privacy.
• Cookie-Einstellungen. Der Block Cookie preferences, zum Beispiel im Footer, öffnet die Datenschutzauswahl des Besuchers erneut.
• Ein eigenes Skript. Nutze eine Section oder einen Block Custom Liquid auf den Templates, die es brauchen.

• Übersetzungen des Shops. Die Texte des Shops werden auf Englisch, Französisch, Spanisch und Deutsch geliefert.
• Eine Sprache hinzufügen. Füge eine Sprache unter Settings > Languages hinzu und veröffentliche sie. Für eine Sprache, die Helm nicht mitliefert, übersetze mit Shopifys App Translate & Adapt oder einer anderen Übersetzungs-App.
• Theme-Editor. Die Bezeichnungen der Einstellungen von Helm gibt es nur auf Englisch, egal in welcher Sprache der Admin läuft.
• Von rechts nach links. Für Arabisch, Hebräisch, Persisch, Urdu und die anderen Sprachen, die von rechts nach links geschrieben werden, dreht Helm die Leserichtung der Seite um.