Theme Subscription Dokumentation.

Transkript

1 Theme Subscription Dokumentation. Created by Shopmonkey. Über das Theme: Das Theme ist speziell geeignet für kleine Webshops mit wenigen Produkten oder für Webshops, die auf Abonnementbasis (Subscription Commerce) verkaufen wollen, wie zum Beispiel Hellofresh oder Boldking. Ausgangspunkte bei der Realisierung bestanden aus 'Mobile Friendly', 'Clean' und 'One Page'. Von der Homepage aus kann man direkt Informationen über das Produkt aufrufen oder das Produkt direkt bestellen. Für Produkte mit ausführlichen Beschreibungen haben wir auch eine Produktseite entwickelt. Einstellungen in mehreren Sprachen verwenden. Bei der Entwicklung von Theme Subscription haben wir auch auf verschiedene Sprachen geachtet. Angepasste Übersetzungen können im Backoffice einfach verwaltet werden über 'Angepasste Übersetzungen'. Siehe zum Beispiel das untenstehende Beispiel bezüglich des Titels einer Headline: In das Eingabefeld des Titels der Headline schreibst du zum Beispiel 'Headline 1'. Danach kopierst du diesen Text und klickst du im Backoffice auf 'Inhalt à Angepasste Übersetzungen'. Hier musst du eine angepasste Übersetzung angeben, mit als Key 'Headline 1'. Danach kannst du pro Sprache den gewünschten Headline-Titel eingeben. Fragen über Einstellungen in Kombination mit mehreren Sprachen? Schick eine Mail an: Schau dir auch unsere Presets an: Und lass dich inspirieren Kontakt: Custom Anpassungen => Fragen über das Theme =>

2 Inhaltsverzeichnis 01. Hintergrund 02. General 03. Header 04. USP Block 05. Homepage Text 06. Produkt 07. USP Block Footer 09. Kontaktformular 10. Blog 11. Socials

3 Hintergrund - 01 Hintergrundabbildung: Hier kannst du für den ganzen Shop eine Hintergrundabbildung hinzufügen. Hintergrundposition: Bestimme die Position der Hintergrundabbildung. Wenn keine Hintergrundabbildung hinzugefügt wurde, hat diese Option keine Funktion. Hintergrund wiederholen: Bestimme die Art und Weise, wie die Hintergrundabbildung wiederholt wird, und/oder ob die Abbildung mit nach unten scrollen oder eine feste Position erhalten soll. Hintergrundfarbe: Bestimme die Hintergrundfarbe des ganzen Webshops. Es kann sein, dass bestimme Teile, denen auch eine Hintergrundfarbe und/oder Abbildung zugewiesen werden kann, diese Einstellung überarbeiten. General - 02 Titel-Font: Wähle hier eine Titel-Schriftart. Dafür werden Google Webfonts verwendet. Um dir die Schriftarten anzusehen, schaust du auf: Body Font: Wähle hier eine Schriftart für den Text. Dafür werden Google Webfonts verwendet. Um dir die Schriftarten anzusehen, schaust du auf: Titelfarbe: Wähle eine Farbe für den Titel. Hiermit können die wichtigsten Titelfarben angepasst werden, wie zum Beispiel die Titel auf der Homepage. Textfarbe: Wähle eine Farbe für die Texte des ganzen Webshops. Akzentfarbe: Wähle eine Akzentfarbe für den ganzen Webshop. Dies ist die auffallendste Farbe im Shop. Über diese Einstellung kannst du u.a. Buttons, Linien und Details/Akzente verwalten. Warenkorb-Button: Wähle eine Farbe für den Warenkorb-Button. Die Buttonfarbe wird u.a. für den Warenkorb- Button auf der Produktseite angepasst.

4 Logo weiß: Lade hier dein weißes/helles Logo hoch. Dieses Logo wird benutzt, wenn der Benutzer der Website noch nicht gescrollt hat. Falls du keine helle Version deines Logos hast oder wünscht, kannst du hier natürlich auch eine dunklere Version des Logos hinzufügen. Wir empfehlen folgendes Format: 346 x 58 Pixel. Logo farbig: Lade hier dein farbiges/dunkles Logo hoch. Dieses Logo wird nach dem Scroll benutzt, zum Zeitpunkt, an dem die Hintergrundfarbe des Top-Menüs sichtbar wird. Wir empfehlen folgendes Format: 346 x 58 Pixel. Favicon: Füge hier dein Favicon hinzu. Das Favicon wird im Tab des Browsers angezeigt. Suchen: Mit dieser Option kannst du die Suchfunktion ein- oder ausschalten. Tags: Mit dieser Option kannst du die Tags ein- oder ausschalten. Die Tags werden auf der Homepage angezeigt, genau über dem Titel und auf der Homepage angezeigt. Loading: Mit dieser Option kannst du dich dafür entscheiden, ein 'Loading Overlay' anzuzeigen. Sobald diese Option eingeschaltet ist, wird das Loading Overlay beim Aktualisieren der Seite angezeigt. Das Loading Overlay verschwindet, sobald die ganze Seite geladen ist. Wir verwenden hier das 'farbige Logo'! Header - 03 Top Navigation Farbe: Wähle hier die Hintergrundfarbe des Sticky Top Navigationsbalkens. Diese Farbe wird nach dem Scrollen sichtbar. Top Navigation Textfarbe: Wähle hier den Text und die Linkfarbe des Sticky Top Navigationsbalkens. Headline-Abbildung: Füge hier eine Headline-Abbildung hinzu. Wir empfehlen, für diese Abbildung eine Auflösung von 2500 x 500 Pixeln zu verwenden. Die Abbildung wird automatisch über die ganze Breite angezeigt. Versuche, das Datei-Format unter 500KB zu halten, um die Ladezeit des Shops so kurz wie möglich zu behalten. Schick für weitere Informationen eine Mail an [email protected].

5 Headline-Titel: Gib hier den Headline-Titel ein. * Headline-Untertitel: Gib hier den Headline-Untertitel ein. * USP Block - 04 USP Block aktivieren: Mit der Option kann der USP Block unterhalb der Headline ein- und ausgeschaltet werden. USP Titel: Titel oberhalb der USPs. Dieser Titel ist wichtig, da dieser Titel auch im Navigationsbalken erscheint. Wenn im Top-Navigationsbalken auf diesen Titel geklickt wird, scrollt der Schirm automatisch nach unten bis zum USP Block. * USP 1/2/3/4 Icon: Wähle für jeden USP ein passendes Icon. Für diese Icons verwenden wir eine schöne Webfont. Du kannst dir ein Icon aussuchen auf: Klick auf das Icon und erhalte damit den benötigten Code, um das Icon auf deine Website zu stellen. Schick für weitere Informationen oder Hilfe eine Mail an [email protected]. USP 1/2/3/4 Titel: Gib einen passenden USP-Titel ein. * USP 1/2/3/4 Text: Gib eine passende USP-Beschreibung ein. Achte jedoch darauf, dass das Eingabefeld maximal 255 Zeichen enthalten darf. * Homepage-Text - 05 Hintergrundabbildung: Füge hier, falls gewünscht, eine Hintergrundabbildung hinzu. Diese Abbildung wird als Hintergrund für den Homepage-Text verwendet. Den Homepage-Text kannst du über 'Textseiten' im Backoffice verwalten. Auch hier empfehlen wir, das Dateiformat unter 500KB zu halten. Hintergrundfarbe 1: Entscheide dich hier für eine Hintergrundfarbe. Diese Farbe fällt über die Hintergrundabbildung (falls diese hinzugefügt wurde). Dabei ist diese Farboption ein Teil eines Verlaufs. Diese Farboption beginnt links und verläuft nach rechts. 'Hintergrundfarbe 2' füllt den restlichen Teil. Ist eine gleichmäßige Farbe gewünscht? Wählen dann bei beiden Optionen dieselbe Farbe.

6 Hintergrundfarbe 2: Diese Option gleicht 'Hintergrundfarbe 1'. Diese Farboption verläuft jedoch von rechts nach links. Custom Textfarbe: Mit dieser Option kannst du dem Homepage-Text eine Custom-Farbe zuweisen, falls du das möchtest. Textfarbe: Wähle hier die Farbe des Homepage-Textes, falls die obenstehende Option eingeschaltet ist. Produkt - 06 Produkt USP 1/2/3: Gib hier pro Option einen USP ein. Diese USPs werden bei Produktübersichten sowie auf der Homepage angezeigt. * USP Block 2-07 Extra USP Block aktivieren: Mit dieser Option kannst du einen extra USP Block ein-/ausschalten. Dieser Teil wird unter der Produktanzeige auf der Homepage angezeigt. Hintergrundabbildung: Lade hier, falls gewünscht, eine Hintergrundabbildung hoch. Diese Abbildung wird als Hintergrund für den extra USP Block 2 verwendet. Auch hier empfehlen wir, das Dateiformat unter 500KB zu halten. Hintergrundfarbe 1: Wähle hier eine Hintergrundfarbe. Diese Farbe fällt über die Hintergrundabbildung (falls diese hochgeladen wurde). Dabei ist diese Farboption Teil eines Verlaufs. Diese Farboption beginnt links und verläuft nach rechts. 'Hintergrundfarbe 2' füllt den restlichen Teil. Ist eine gleichmäßige Farbe gewünscht? Wählen dann bei beiden Optionen dieselbe Farbe! Hintergrundfarbe 2: Diese Option gleicht Hintergrundfarbe 1. Jedoch verläuft diese Farboption von rechts nach links. Textfarbe: Wähle hier die Textfarbe für diesen Teil.

7 USP 1/2/3 Image: Füge hier Abbildung mit Bezug auf die USPs hinzu. Wir empfehlen, Abbildungen mit einer Auflösung von 150 x 150 Pixeln zu verwenden und das Dateiformat so klein wie möglich zu halten. USP 1/2/3 Text: Pro USP-Option kannst du einen Text eingeben. * Footer - 08 Hintergrundfarbe 1: Entscheide dich hier für eine Hintergrundfarbe. Diese Farboption ist Teil eines Verlaufs. Diese Farboption beginnt links und verläuft nach rechts. 'Hintergrundfarbe 2' füllt den restlichen Teil. Ist eine gleichmäßige Farbe gewünscht? Wählen dann bei beiden Optionen dieselbe Farbe. Hintergrundfarbe 2: Diese Option gleicht 'Hintergrundfarbe 1'. Diese Farboption verläuft jedoch von rechts nach links. Titelfarbe: Gib dem Footer-Titel eine Farbe. Footer-Farbe: Diese Farboption gilt für den übrigen Text im Footer, worunter die Links und Kontaktdaten. adresse: Gib hier deine adresse ein. Diese wird im Footer angezeigt. Telefonnummer: Gib hier deine Telefonnummer ein. Diese wird im Footer angezeigt. Über Uns-Text: Gib hier den Text 'Über uns' ein, der im Footer angezeigt wird. Dieser Text kann zum Beispiel auch aus Adressdaten bestehen. RSS Feed anzeigen: Schalte den RSS Feed Link im Footer ein oder aus. Kontaktformular - 09 Kontaktformular aktivieren: Mit dieser Option hast du die Wahl, das Kontaktformular auf der Homepage ein- oder auszuschalten. Dieser Teil wird genau über dem Footer angezeigt.

8 Kontakt Titelfarbe: Wähle eine Farbe für den Titel 'Kontakt', über dem Formular. Hintergrundfarbe: Wähle eine Hintergrundfarbe für diesen Teil. Diese Farbe ist nur dann sichtbar, wenn keine Hintergrundabbildung hinzugefügt wurde. Hintergrundabbildung: Füge hier, falls gewünscht, eine Hintergrundabbildung hinzu. Diese Abbildung wird als Hintergrund für den Kontaktformular-Teil verwendet. Auch hier empfehlen wir, das Dateiformat unter 500KB zu halten. Blog - 10 Blog anzeigen: Mit dieser Option hast du die Wahl, die drei zuletzt hinzugefügten Blogartikel auf der Homepage anzuzeigen. Hintergrundfarbe: Wähle eine Hintergrundfarbe für diesen Teil. Socials - 11 Socials verknüpfen: Füge hier pro Social die 'Account URL' ein. Falls du einen Social nicht verwenden möchtest, lässt du das Eingabefeld leer und wird das Icon nicht angezeigt. Die Socials, die eingegeben wurden, werden im Footer angezeigt. * Alle mit einem Stern markierten Begriffe können über Inhalt à Angepasste Übersetzungen (im alten Backoffice Design à Angepasste Übersetzungen) mit einer angepassten Übersetzung versehen werden.