Veröffentlicht am

Beste Tipps zum Anpassen einer PrestaShop-Website

Beste Tipps zum Anpassen einer Prestashop-Website

Es ist gut zu wählen Prestashop um Ihre E-Commerce-Website zu erstellen. Doch wie machen Sie Ihre Website einzigartig und attraktiv für Ihre Kunden? Durch Ihre Anpassungen unterscheidet sich Ihre E-Commerce-Website von den Plattformen der Mitbewerber. Sie finden mehr Verkehr und mehr Verkäufe. Sie benötigen keine besonderen Fähigkeiten, um Ihre Prestashop-Website anzupassen. Lesen Sie diese Anleitung und beginnen Sie mit der Arbeit an Ihrer Website.

Schritte zum Erstellen Ihres PrestaShop-Website-Themas - Verwenden Ihrer Codes

Laden Sie das Thema herunter

Besuchen Sie die Website, github PrestaShop Starter-Theme. Sie können eine Reihe von Startthemen finden. Wählen Sie eine aus, die am besten zu Ihrem Unternehmen passt.

Bearbeiten Sie Ihr gewähltes Thema

Da Sie Ihr Thema bereits ausgewählt haben, können Sie die Dateien kopieren, um sie in das richtige Themenverzeichnis einzufügen. Sie müssen den Prozess der Theme-Anpassung starten. Es präsentiert Ihnen ein einzigartiges Thema für Ihre Website.
Im PrestaShop-Installationsmenü finden Sie die Option zum Erstellen benutzerdefinierter Themenordner. Sie können jetzt Ihre themenbezogenen Dateien einfügen.

Fügen Sie Ihren Themen einen neuen Namen hinzu

Gehen Sie zur Option Umbenennen für Ihren Themenordner, und wählen Sie dann Konfiguration. Basierend auf dem Namen Ihres Themes können Sie den Ordnernamen bearbeiten.

name: testtheme                     (Theme folder name)
display_name: Test Theme             (Theme display name)
version: 1.0.0
author:
name: "PrestaShop Team"
email: "pub@prestashop.com"
url: "http://www.prestashop.com"

meta:
compatibility:
from: 1.7.2.0
to: ~

Ordnen Sie Ihre Dateien an

Ihr Theme-Ordner enthält einige Dateien, die Sie löschen müssen. In diesem Schritt können Sie die CSS-Dateien an Ihre Bedürfnisse anpassen.

#header { text-align: center; } .header-nav { Hintergrundfarbe:#333; Rand-unten: 50px; Polsterung-Oberseite: 10px; Polsterung-unten: 10px; } .header-nav > * { vertikale Ausrichtung: Mitte; } .cart-preview .body { padding: 12px; Schriftgröße: 14px; } .menu ul { Marge: 0; Polsterung: 0; } .header-top { margin-top: 50px; Rand-unten: 20px; Hintergrund:#222; Textausrichtung: Mitte; } .menu { float: keine; } .menu > ul > li > a { background-color:#333; } .menu a, .menu a:visited { Textdekoration: keine; Farbe:#FFF; Schriftgröße: 1em; Polsterung: 10px 15px; Bildschirmsperre; Hintergrund:#333; } .header-top::after { clear: Both; Inhalt: keiner; } .Produktminiatur {max-Breite: 350px; Textausrichtung: Mitte; } a.add-to-cart, a.add-to-cart:hover { color:#FFF; Polsterung: 8px 15px; Hintergrundfarbe:#222; Schriftdicke: fett; Texttransformation: Großbuchstaben; Schriftgröße: 14px; } .Preis {Farbe:#F0544A; Schriftgröße: 18px; Schriftdicke: fett; } .variant-links, .product-price-and-shipping { Marge: 10px 0; } #Fußzeile { Hintergrund:#F3F3F3; Farbe:#222; Textausrichtung: Mitte; Polsterung: 30px; Rand oben: 50px; }

Benutzerdefiniertes CSS und JavaScript einbetten

Der Kopfteil des Themas ist editierbar. Sie können das JavaScript auch mit wenigen Schritten einfügen. Im Ordner Theme finden Sie Vorlagen. Dann müssen Sie head.tpl auswählen.

{block name='stylesheets'} {include file="_partials/stylesheets.tpl" stylesheets=$stylesheets} {/block} {block name='javascript_head'} {include file="_partials/javascript.tpl" javascript=$ javascript.head vars=$js_custom_vars} {/block}

Umgang mit der Struktur von PrestaShop-Vorlagen

Prestashop-Themen ist hochinnovativ, und Sie werden eine unverwechselbare Template-Struktur finden. Daher müssen Sie die Vorlagendateien unter dem Ordner erstellen. Zur Einrichtung eines Prestashop-Verbindung, müssen Sie Prestashop herunterladen und installieren.

Bearbeiten Sie das HTML-Design der Startseite

Sie können das ursprüngliche Homepage-Design ändern, indem Sie auf den PrestaShop-Ordner zugreifen. Sie müssen Ihren Theme-Ordner auswählen und layout-both-columns.tpl eingeben.
Sie finden den HTML-Code aus der Datei. Wenn Sie daran denken, den Inhalt zu bearbeiten, ist die Datei wichtig. Sie können diese Anpassungen jedoch jederzeit vornehmen.
Die Seitenleiste und andere Module können ebenfalls an Ihre Bedürfnisse angepasst werden. Sie können mit Vorlagen und CSS-Modulen umgehen, um das Thema zu personalisieren.
Das Theme ist nun bereit für Ihre Website. Sie können weitere Anpassungen vornehmen und benutzerdefinierte Codes in Ihre CSS-Dateien einfügen. Sie müssen jedoch über JavaScript-, HTML- und CSS-Kenntnisse verfügen, um dies zu tun.

Beste Tipps zum Anpassen einer Prestashop-Website - 01.Homepage 2 14

Verwenden Sie TemplateToaster für die Themenerstellung

Um Ihr PrestaShop-Theme zu erstellen, können Sie die Software TemplateToaster verwenden. Mit ein paar einfachen Schritten können Sie es schaffen.

  • Wählen Sie die Plattform
Beste Tipps zum Anpassen einer Prestashop-Website - Wählen Sie Prestashop Cms Templatetoaster

Installieren Sie die Software TemplateToaster und Sie müssen auf die Option PrestaShop klicken. Nachdem Sie die CMS-Plattform ausgewählt haben, finden Sie ein Fenster. Gehen Sie von dort aus zur Gestaltungsoption. Wenn Sie das vorgefertigte Design bearbeiten möchten, müssen Sie die Option sorgfältig auswählen.

  • Wählen Sie visuelle Elemente

Sie finden Optionen zur Auswahl von Typografie und Farbe. Sie erhalten ein Konzept der Benutzeroberfläche Ihres Website-Themes. Dann müssen Sie sich für das Thema der PrestaShop-Website entscheiden. Fluid und Fixed – dies sind verfügbare Optionen für Sie. Durch die Auswahl der Hintergrundfarbe können Sie ein ansprechendes Menü gestalten.

Beste Tipps zum Anpassen einer Prestashop-Website - Set Elements Templatetoaster 1
  • Gestalten Sie die Diashow, die Fußzeile und den Inhalt

Das Diashow-Design für Ihre Website ist nach Ihren Wünschen anpassbar. Sie können die Registerkarte Inhalt auswählen, um den Inhalt zu verwalten. Anschließend müssen Sie die Fußzeile mit verschiedenen Optionen wie Effekten, Bildern, sozialen Symbolen und Typografie erstellen. So können Sie das Design der Fußzeile anpassen. Die Fußzeile Ihrer Site hilft Ihnen, Funktionalitäten und Widgets anzuzeigen. Darüber hinaus sind Social-Sharing-Symbole wichtig, damit E-Shopper jeden Produktlink mit ihren Familien und Freunden teilen können.
Andere Dinge, die Sie für Ihre Website anpassen können-

Entwerfen Sie die Diashow, die Fußzeile und den Inhalt
  • Banner oben

Es ist ein dünnes Banner, das Sie auf Ihrer Seite anzeigen können, um Ihre Sonderrabatte und Angebote anzuzeigen.

  • CMS-Symbol

Um zusätzliche Informationen zum PrestaShop-Shop anzuzeigen, z. B. Rückerstattungsrichtlinien und Zahlungsoptionen, können Sie die CMS-Symbole verwenden.

CMS-Symbole

Dies sind einige Schritte zum Anpassen Ihrer PrestaShop-Website. Angepasste Funktionalitäten, die Ihrer Website hinzugefügt werden, helfen Ihnen beim Wachstum Ihres Unternehmens. Sie können mehr Kunden auf Ihre E-Commerce-Website locken.