Als Katalogadministrator können Sie mit dem Storefront Theme Editor die Markenfarben, Logos und Headerbilder Ihres Shops anpassen, ohne dass dafür benutzerdefiniertes JavaScript (JS), Cascading Style Sheets (CSS) oder HyperText Markup Language (HTML) erforderlich ist.
Der Storefront-Theme-Editor muss im Konto Ihrer Institution vom Stammadministrator des Katalogs aktiviert werden . Falls er nicht verfügbar ist, können Sie den Katalog mithilfe von CSS, JS oder HTML anpassen.
Anmerkungen:
- Erfahren Sie mehr über die individuelle Gestaltung Ihres E-Mail-Brandings mit HTML und die Erstellung benutzerdefinierter E-Mail-Vorlagen .
- Für Details und Spezifikationen zum Hinzufügen von Logos und Headerbildern sehen Sie sich bitte die Logo-Richtlinien des Canvas-Katalogs an.
- Wird in einem Unterkatalog kein benutzerdefiniertes Branding hinzugefügt, erbt er das Branding, die Einstellungen und die sonstigen Anpassungsoptionen des übergeordneten Katalogs.
- Das Erscheinungsbild der Seite „Kataloglisten“ kann je nach Plattformversion oder benutzerdefiniertem Styling, das über Website-Code angewendet wird, wie z. B. CSS, JS oder HyperText Markup Language (HTML), variieren.
Administrator öffnen
Klicken Sie auf das Dropdown-Menü „Benutzername“ [1]. Klicken Sie anschließend auf den Link „Admin“ [2].
Katalog öffnen
Klicken Sie auf die Registerkarte Kataloge [1].
Klicken Sie anschließend auf den Link zum Katalognamen [2].
Anpassungen öffnen
Im Dropdown-Menü „Katalogeinstellungen“ wird standardmäßig die Seite „Kataloginformationen“ angezeigt. Klicken Sie auf den Link „Anpassungen“ .
Standarddesign kopieren
Wenn der Storefront Theme Editor aktiviert ist , klicken Sie auf die Schaltfläche "Standard-Theme kopieren" [1].
Alternativ können Sie auf der Standard-Designkachel auf die Schaltfläche "Kopie erstellen" klicken [2].
Editor öffnen
Klicken Sie im Kopierfenster auf die Schaltfläche „Design bearbeiten“ .
Allgemeiner Editor öffnen
Um allgemeine Anpassungen am Shop vorzunehmen, klicken Sie auf den Link „Allgemein“ .
Bilder auswählen
Um ein Bild für die Kopf- und Fußzeile auszuwählen, klicken Sie auf die Bildkachel „Kopfzeile“ [1].
Um ein Logo für die Listenkacheln, Beschreibungen, E-Mail-Benachrichtigungen, Anmeldeformulare und das Studenten-Dashboard auszuwählen, klicken Sie auf die Logo- Kachel [2].
Um ein Bild für Browser-Tabs und Lesezeichen auszuwählen, klicken Sie auf die Favicon- Kachel [3].
Farben auswählen
Um eine primäre Designfarbe auszuwählen, geben Sie einen Hexadezimalwert in das Feld Primärfarbe ein [1].
Um eine Filterpillenfarbe auszuwählen, geben Sie einen Hexadezimalwert in das Feld Filterpillenfarbe ein [2].
Um die Farbauswahl zu verwenden, klicken Sie auf ein Farbsymbol [3].
Wählen Sie im Farbauswahlfenster mithilfe des Farbmischers oder der Farbvoreinstellungen [4] eine Farbe aus. Um Ihre Auswahl zu speichern, klicken Sie auf die Schaltfläche „Anwenden“ [5].
Details zur Barrierefreiheit anzeigen
Während Sie die primäre Designfarbe auswählen, werden im Farbauswahlfenster Details zur Barrierefreiheit angezeigt.
Beim Auswählen oder Bearbeiten der Primärfarbe wird das aktuelle Kontrastverhältnis im Abschnitt „Kontrastverhältnis“ automatisch aktualisiert [1]. Das für die Barrierefreiheit erforderliche Mindestverhältnis beträgt 4,5:1.
Beschriftungen werden für normalen, großen und grafischen Text basierend auf den ausgewählten Hintergrund- und Vordergrundfarben angezeigt. Text, der die Mindestkontrastanforderungen nicht erfüllt, wird mit der Beschriftung „Nicht bestanden“ [2] gekennzeichnet. Text, der die Mindestkontrastanforderungen erfüllt, wird mit der Beschriftung „Bestanden“ [3] gekennzeichnet.
Um die Kopf- und Fußzeile des Katalogs anzupassen, klicken Sie auf den Link „Kopf- und Fußzeile“ .
Standardmäßig wird die Kopfzeile auf weißem Hintergrund angezeigt. Um die Kopfzeile auf dunklem Hintergrund anzuzeigen, klicken Sie auf die Optionsschaltfläche „ Umkehren “ [1].
Um die Farbe der Kopf- oder Fußzeile anzupassen, klicken Sie auf die Optionsschaltfläche „Benutzerdefiniert “ [2].
Standardmäßig hat die Kopfzeile die gleiche Breite wie der darunter liegende Inhalt. Um die Breite der Kopfzeile auf die gesamte Fensterbreite auszudehnen, klicken Sie auf die Option „ Volle Breite “ [3].
Standardmäßig ist im Shop kein Titelbild vorhanden. Um ein Bild hinzuzufügen, klicken Sie auf den Schalter „Titelbild“ unter [4]. Um anschließend ein Bild von Ihrem Computer auszuwählen, klicken Sie auf die Kachel „Bild hochladen“ [5].
Wenn die Kopfzeile in voller Breite angezeigt wird, erscheint hinter dem Bild eine Hintergrundfarbe. Um eine Hintergrundfarbe auszuwählen, geben Sie einen Hexadezimalwert in das Feld „Hintergrundfarbe“ [6] ein.
Um das Titelbild in voller Breite anzuzeigen, klicken Sie auf den Schalter „An volle Breite anpassen“ bei [7].
Standardmäßig sind die Trennlinien ober- und unterhalb des Listenbereichs schmal eingestellt. Um breitere Trennlinien auszuwählen, klicken Sie auf die Option „ Erweitert “ [8].
Um eine Farbe für die Trennzeichen auszuwählen, geben Sie einen Hexadezimalwert im Feld Trennzeichenfarbe ein [9].
Um mithilfe der Farbauswahl Farben für den Hintergrund oder die Trennlinien auszuwählen, klicken Sie auf ein Farbsymbol [10]. Wählen Sie anschließend im Farbauswahlfenster eine Farbe aus und klicken Sie auf die Schaltfläche „ Anwenden “ [11].
Um benutzerdefinierten Fußzeileninhalt hinzuzufügen, klicken Sie auf die Schaltfläche „Inhalt hinzufügen“ [12].
Um die Änderungen zu übernehmen, klicken Sie auf die Schaltfläche Speichern [13].
Name bearbeiten
Um einen neuen Namen für das Design einzugeben, klicken Sie auf das Bearbeitungssymbol .
Vorschau und Speichern
Das Vorschaufenster wird angezeigt.
Um weitere Anpassungsoptionen anzuzeigen, klicken Sie auf die Schaltfläche „ Zurück“ [1].
Um das Bearbeitungsfenster zu schließen, ohne Ihre Änderungen zu speichern, klicken Sie auf die Schaltfläche „Design-Editor schließen“ [2].
Um Ihre Änderungen zu speichern, klicken Sie auf die Schaltfläche Speichern [3].
Schaltfläche „Bearbeiten“ auf der Seite mit den Angebotsdetails anzeigen
Über eine Schaltfläche „Bearbeiten“ auf der Detailseite des Angebots können Katalog- und Unterkatalogadministratoren Angebote direkt über die moderne Shopoberfläche verwalten.
Design im Shop anwenden
Um das benutzerdefinierte Design im Shop zu aktivieren, klicken Sie auf das Symbol „Design anwenden“ .
Design löschen
Um ein Design zu löschen, klicken Sie auf das Symbol „Löschen“ [1].
Ein angewendetes Design kann nicht gelöscht werden. Um ein anderes Design anzuwenden, klicken Sie auf das Symbol „ Anwenden “ [2] und löschen Sie anschließend das aktuelle Design.
Hinweis: Ein Theme kann nur von dem Benutzer gelöscht werden, der es erstellt hat.
Shopfront-Einstellungen
Das Design des modernen Shops kann zentral auf Ebene des übergeordneten Katalogs verwaltet werden. Diese Einstellung gilt automatisch für alle zugehörigen Unterkataloge, einschließlich übernommener Branding-Elemente wie Logos, Farbschemata und Favicons, und kann nicht auf Unterkatalogebene angepasst werden.
Wenn der Hauptkatalog auf das Legacy Storefront-Design umgestellt wird, können Unterkataloge unabhängig voneinander das Modern Storefront aktivieren und ihre Branding-Einstellungen verwalten, was eine größere Flexibilität ermöglicht.
Um die Einstellungen für den Shop zu ändern, klicken Sie im Dropdown-Menü „Katalogeinstellungen“ auf die Registerkarte „Shop“ [1].
Um den Legacy Storefront zu aktivieren, klicken Sie auf den Schalter "Legacy Storefront verwenden" [2].
Vorschau auf moderne Ladenfront
Um die moderne Shopfront in einer Vorschau anzuzeigen, muss die Option „Legacy-Shopfront verwenden“ aktiviert werden [1].
Um eine Vorschau der modernen Shopfront zu erhalten, klicken Sie auf die Schaltfläche „Vorschau der modernen Shopfront“ [2].
