Theme-Konfigurator

Theme-Konfigurator

Nötige Dateien
Die Datei settings_schema.json kann genutzt werden, um die Konfigurationsmöglichkeiten des Konfigurators zu verändern. Im Theme Editor ist die Datei im Bereich config zu finden.

mein-design/config/settings_data.json


Beispiel einer settings.json

[
{
"name": "ALLGEMEIN",
"settings": [
{
"type": "color",
"id": "border_color",
"label": "Border colors",
default": "#fffff
},
{
"type": "checkbox",
"id": "show_logo",
"label": "Show Logo",
value": "1
}
]
},
{
"name": "THIRD PARTY",
"settings": [
{
"type": "text",
"id": "facebook_url",
label": "Facebook Link
}
]
}
]

Obiger Befehl würde den vom Benutzer eingegebenen Text aus dem Textfeld “tagline” ausgeben. Maßgeblich ist das “name”-Attribut des Textfeldes für die Namensgebung der Settingsvariable


Attributes für input settings

Attribute --- Required? ----- Description

type yes Name of the type of settings.
id yes The unique name for this setting. It must only contain alphanumeric characters, underscores, and dashes.
label yes A label for this setting.
placeholder no A value for the input's placeholder text. This is for text-based setting types only.
default no A value to which the setting can default.
info no Additional information about the setting.



Links können zum Label und den Info Feldern kann durch das Pattern [link text](link URL) hinzugefügt werden. Zum Beispiel:

{
"type": "checkbox",
"id": "favicon_enable",
label": "Use [custom icon](https://en.wikipedia.org/wiki/Favicon)
}


Basic inout setting types

Das type Attribute für Basic Input fields kann einer der Werte der folgenden Tabelle sein:

Value	        Application
text	                Single-line text fields
textarea	        Multi-line text areas
image_picker	Image uploads
radio	        Radio buttons
select	        Selection drop-downs
checkbox	Checkboxes
range	        Range sliders


Single-line text fields

Mit dieser Einstellung des Text Felds können kurze Zeichenketten, wie URLs, Benutzernamen, Banner, text, etc dargestellt werden

{
"type":      "text",
"id":        "id",
"label":     "Text",
"default":   "value",
"info":      "Text",
placeholder": "Text
}


Multi-line text areas

A setting of type textarea is used for capturing larger blocks of text, such as embed codes. Mit dieser Einstellung für Textfelder können längere Textblöcke wie Code dargestellt werden.

{
"type":      "textarea",
"id":        "id",
"label":     "Text",
"default":   "value",
"info":      "Text",
placeholder": "Text
}


Image

Händler können mit dieser Einstellung vom Typ image_picker assets wie Logos,flavicons und Slideshow images hochladen.

{
"type": "image_picker",
"id": "logo",
label": "Logo image
}


Radio button

Mit der Einstellung vom Typ Radio können unterschiedliche sich ausschliessende Einstellungen für den Händler konfiguriert werden z.B. Alignment des Logos.
{
"type": "radio",
"id": "icon_cart",
"options": [
{ "value": "none", "label": "None"},
{ "value": "light", "label": "Light"},
{ "value": "dark", "label": "Dark"}
],
label": "Cart icon
}


Selection drop-down

Mit dieser Einstellung können für den Händler eine Auswahl mit vielen Optionen dargestellt werden z.B. die Anzahl der Produkte auf der Seite.

{
"type": "select",
"id": "products_per_page",
"options": [
{ "value": "8", "label": "8 Products"},
{ "value": "12", "label": "12 Products"},
{ "value": "16", "label": "16 Products"}
],
label": "Products per page
}


Checkbox

Einstellung zum darstellen einer Checkbox im Konfigurator.

{
"type": "checkbox",
"id": "collection_sort",
"default": true,
label": "Enable sorting
}



Range

Mit dem Range input kann eine Reichweite von Werten für das Input Feld dargestellt werden.

{
"type":      "range",
"id":        "font_size",
"min":       12,
"max":        18,
"step":       1,
"unit":       "px",
"label":     "Font size",
"default":   16
}


Color picker:

Darstellen einer Farbauswahl

{
"type": "color",
"id": "background_color",
"label": "Background color",
default": "#ffffff
}


Collections drop-down

Diese Einstellung erzeugt ein Dropdown Menu gefüllt mit denKollektionen des Shops.

{
"type": "collection",
"id": "feature_collection",
label": "Feature collection
}


Products drop-down

Diese Einstellung erzeugt ein Dropdown Menu gefüllt mit den Produkten des Shops.

{
"type": "product",
"id": "feature_product",
label": "Feature product
}


Blogs drop-down

Diese Einstellung erzeugt ein Dropdown Menu gefüllt mit den Namen der Blogs des Shops.

{
"type": "blog",
"id": "sidebar_blog",
label": "Blog for sidebar
}


Pages drop-down

Diese Einstellung erzeugt ein Dropdown Menu gefüllt mit den Namen der Seiten des Shops.

{
"type": "page",
"id": "homepage",
label": "Front page
}

Diese Einstellung erzeugt ein Dropdown Menu gefüllt mit den Namen aller Linklisten(Navigation) des Shops.

{
"type": "link_list",
"id": "main_nav",
label": "Main navigation
}

Mit den Einstellungen vom Typ Header können styles in der Sidebar hinzugefügt werden.

{
"type": "header",
content": "Body Styles
}


Paragraph

Mit der Einstellung vom Typ Paragraph können gestylte Texte für weiter Informationen zur Sidebar hinzugefügt werden.

{
"type": "paragraph",
content": "Thanks for buying my theme.  Please contact me at support@theme.com for support details.
}

    • Related Articles

    • theme

      Ordner mein-design/templates/cart.html Beispiel-URL demoshop.versacommerce.de/cart Diese beiden Liquid-Objekt müssen in der theme.html enthalten sein. Andernfalls wird das Theme nicht richtig funktionieren. {{ content_for_header }} and ...
    • Layout-Theme

      In diesem Template wird neben den Layout meist folgendes definiert: Kopfbereich / Logo Navigationen Produkt-Suchfeld Fussbereich In dieser theme.html werden alle anderen Templates eingebunden. Die weiteren Templates werden abhänig von der URL im Shop ...
    • Eigenes Theme erstellen

      Im Folgenden werden wir anhand von einfachen Beispielen alle notwendigen Dateien vorstellen. Sie werden sehen, dass Sie mit wenig Aufwand einen lauffähigen Online-Shop erstellen können. Es sind Ihnen keine Grenzen gesetzt, wenn Sie Ihr eigenes ...
    • article

      Die Datei article.html stellt einen Blogeintrag und optional auch dessen Kommentare dar. Ordner mein-design/templates/article.html Beispiel-URL demoshop.versacommerce.de/collections/meine-gruppe Wichtige Hinweise Wenn ein Besucher einen Kommentar ...
    • cart

      Ordner mein-design/templates/cart.html Beispiel-URL demoshop.versacommerce.de/cart Positionen Jede Position im Warenkorb ist als item in der Variable cart.items gespeichert. Ein Item „weiß“, welche Variante eines Produktes es ist. Außerdem werden ...