PrestaShop 1.7.6.1 – Installation fehlerfrei

Unsere Webagentur erhielt viele Anfragen, dass PrestaShop 1.7.6 nicht installiert werden könne.

Die neuste PrestaShop Version bringt aber sehr viele interessante Updates mit, deshalb haben wir das Thema natürlich aktiv beobachtet.

PrestaShop 1.7.6.1 – Fehlerfrei installieren

In unserem Test haben wir die neuste Version, PrestaShop 1.7.6.1, Stable, installiert.

Die Installation klappte fehlerfrei, sowohl das Front- als auch das Backend werden sofort angezeigt und es entstehen auch keine Error-Logs.

Voraussetzungen:

  • Download der neusten Version: PrestaShop 1.7.6.1 Stable
  • PHP-Version 7.3
  • CHMOD: Inhaber sollte der Benutzer sein.
    Bei Root-Servern vor allem ein wichtiges Thema.
    Haben Sie einen Server gemietet, sollte der Benutzer somit bereits gesetzt sein.

PrestaShop 1.7.6.1 Stable – Installationsanleitung

Um die neuste PrestaShop Version korrekt zu installieren, muss neu auch das zip-File auf den Server geladen werden.

Eine genaue Anleitung wie Sie PrestaShop installieren, finden Sie hier.

 

Fehler korrekt auslesen

Sollte die Installation oder der Abruf von Frontend- oder Backend nicht korrekt funktionieren, sollten im ersten Schritt die Fehler korrekt ausgelesen werden.

Dazu haben Sie 2 Möglichkeiten:

1.) Server Error-Logs prüfen
Falls Sie diese Error-Logs nicht finden können, kontaktieren Sie kurz Ihren Webhoster

2.) PrestaShop verfügt bereits über einen Debug-Mode, welcher unter configs/defines.inc.php aktiviert werden kann.
Dieser ermöglicht es Ihnen, Fehler auszulesen, auch wenn PrestaShop beispielsweise eine weisse Seite anzeigen sollte.

Zuerst ein Backup des Files anlegen, danach können Sie mit einem einfachen Editor das File öffnen.
Danach sehen Sie direkt folgende Zeilen und sollten die fettmarkierten Stellen von „false“ auf „true“ umstellen und speichern.
(weitere je nach Bedarf)

/* Debug only */
if (!defined(‚_PS_MODE_DEV_‘)) {
define(‚_PS_MODE_DEV_‘, true);
}
/* Compatibility warning */
define(‚_PS_DISPLAY_COMPATIBILITY_WARNING_‘, false);
if (_PS_MODE_DEV_ === true) {
@ini_set(‚display_errors‘, ‚on‘);
@error_reporting(E_ALL | E_STRICT);
define(‚_PS_DEBUG_SQL_‘, true);
} else {
@ini_set(‚display_errors‘, ‚off‘);
define(‚_PS_DEBUG_SQL_‘, false);
}

define(‚_PS_DEBUG_PROFILING_‘, false);
define(‚_PS_MODE_DEMO_‘, false);

SSL Zertifikate mit Let`s Encrypt

Wie in unserem Artikel zum Thema SSL Verschlüsselung im 2018 erwähnt, stellte Google neue Bedingungen in Bezug auf SSL-Verschlüsselungen von Domainnamen.

Diese Warnung das eine Verbindung per http und somit unsicher sei, wurde mittlerweile auch von weiteren Browsern übernommen.

 

Website mit SSL – Was bringt mir das?

Grundsätzlich gilt: Ein Besuch mittels https:// ist sicherer, da die Daten nicht von Dritten eingesehen werden können.

Gerade heute ist das Thema Sicherheit allgegenwärtig und beschäftigt sowohl Unternehmen als auch Privatpersonen.

Ein SSL-Zertifikat sorgt somit für mehr Sicherheit bei einem Besuch, sei es ein Online-Shop oder eine Website.

Google selber möchte natürlich verschlüsselte Websites sehen, somit ist es auch für Unternehmen ein wichtiges Thema.

 

Was kostet mich ein SSL-Zertifikat?

Noch vor einigen Jahren waren günstigere sowie auch teurere SSL-Zertifikate erhältlich.

Heute gibt es mit Let`s Encrypt einen kostenlosen Service, welcher SSL-Zertifikate für alle Domains ermöglicht.

Let`s Encrypt ist ein Non-Profit Projekt und möchte sicherstellen, dass Verbindungen zu Websites sicherer, aber gratis bleiben.
Hinter dem Projekt stehen sehr viele Gönner und Sponsoren, wodurch sich Let`s Encrypt finanziert.

Bereits heute sind Let`s Encrypt Zertifikate bei vielen Hostern per Klick erhältlich.

Weitere Informationen: www.letsencrypt.org

 

Let`s Encrypt SSL-Zertifikat aktivieren

Die meisten Hosting-Anbieter bieten bereits per Klick ein Let`s Encrypt Zertifikat an.

Sehen Sie keinen solchen Menupunkt, kontaktieren Sie am besten kurz den technischen Support.

Sobald das Let`s Encrypt SSL-Zertifikat für eine Domain aktiviert wurde, dauert es ca. 15 Minuten.
In dieser Zeit wird eine Domain geprüft, das Zertifikat automatisch generiert und aktiviert.

Danach können Sie zusätzlich die Option „Automatische Weiterleitung auf SSL“ aktivieren, womit jeder Besucher automatisch auf die SSL verschlüsselte Seite umgeleitet wird.

Wie Sie sehen ist Let`s Encrypt eine wirklich sinnvolle Lösung für SSL-Zertifikate und erst noch kostenlos!

 

PrestaShop Menu – Schriftgrösse & Schriftfarbe ändern

PrestaShop wird sowohl von selbstständigen Personen sowie auch kleinen- und mittelgrossen Unternehmen eingesetzt.

Allerdings möchte man keinen 0815 Online-Shop, sondern sich von der Konkurrenz abheben – In diesem Fall sind einzelne Anpassungen des eigenen PrestaShop natürlich notwendig.

In diesem Beitrag befassen wir uns mit der Anpassung der Linkfarbe sowie der Schriftgrösse im PrestaShop Hauptmenu.
Dies gilt für die Versionen von PrestaShop 1.7.x.

PrestaShop CSS-File

PrestaShop 1.7.x ist aufgebaut auf Bootstrap und steuert darüber sämtliche Styleangaben, sowohl für Desktop- als auch für mobile Geräte.

CSS-Datei: themes/classic/assets/css/theme.css
(Wurde ein Theme eingekauft, so kann der Ordner classics auch nach dem Theme benannt worden sein)

Wichtig: PrestaShop verfügt ab der Version 1.7.x nur noch über 1 zentrales CSS-File.
Im PrestaShop 1.6.x waren in den Modulen noch einzelne CSS-Files enthalten.

Als Beispiel das PrestaShop Hauptmenu:

Wir befassen uns als Beispiel einmal mit dem PrestaShop Hauptmenu für Desktop, also Computer.

Beim Menu können Sie die Schriftfarbe oder Schriftgrösse ganz einfach anpassen, in dem Sie die folgende Codezeile suchen:

#header .top-menu a

Beim Mouseover (Hover), suchen Sie nach folgendem Tag, welcher sich im CSS-File direkt dahinter befindet:

#header .top-menu a:hover

Konnten Sie diesen Tag im CSS-File finden, können Sie die Textfarbe oder Textgrösse ganz einfach anpassen.

PrestaShop Menu Schriftgrösse und Linkfarbe

Gehen wir im Beispiel davon aus, dass wir die Farbe gerne in Rot und die Schriftgrösse auf 25 Pixel setzen möchten, so wäre der Code wie folgt:

#header .top-menu a {font-size:25px; color:#ff0000}

Ein solcher Tag beinhaltet meistens bereits gewisse Angaben.
So können Sie selber entscheiden, ob Sie diese weiterhin stehen lassen oder je nach Design gerne ändern möchten.

Wollen Sie im PrestaShop Menu nur die Schriftgrösse- oder Schriftfarbe ändern, dann lassen Sie den restlichen Code bestehen.
Möchten Sie weitere Elemente wie Breite, Abstände, Höhe usw. anpassen, dann sind in jedem Fall sehr gute Kenntnisse im CSS bzw. CSS3 empfehlenswert!

Sehr wichtig: Erstellen Sie vor der Anpassung ein Backup Ihres PrestaShop CSS-Files!

 

Apple Touch Icon für Websites & Online-Shops

Viele Personen speichern beim surfen sogenannte Favoriten oder bauen Schnellzugriffe ein, um Links möglichst schnell abzurufen.

Bei Smartphones gibt es aber auch die Möglichkeit, einen gewünschten Link direkt ins Menu des Smartphones zu legen – Ein sogenanntes Apple Touch Icon.

 

Apple Touch Icon erstellen

Ein Touch Icon besteht normalerweise wie ein Favicon nur aus einem Symbol, welches Ihre Website oder Ihren Online-Shop symbolisiert.

Falls Sie bereits eines besitzen, können Sie daher auch eine grössere Version des Favicons nutzen.

Wichtig ist, dass Sie das Icon als PNG-Bilddatei anlegen, um den Hintergrund transparent zu halten.

Speichern Sie das Icon mit dem Namen „apple-touch-icon.png“ in der Grösse von 180 x 180 Pixel.

 

Apple Touch Icon einbauen

Öffnen Sie via FTP-Programm den Zugriff zu Ihrer Website.

Als erster Schritt laden Sie die erstellte Datei apple-touch-icon.png in den Bilderordner, meistens unter images oder img.

Anschliessend kopieren Sie den folgenden Code und bauen diesen innerhalb des <head></head> Tags ein:

  <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">

Hinweis: Anstelle von img/ muss der Name des eigenen Bilderordners angepasst werden.

Ab sofort können iPhone-Nutzer einen Schnellzugriff anlegen, welcher jedoch aus Ihrem Symbol besteht, was ganz einfach schöner aussieht und den Personen besser in Erinnerung bleibt.

 

Touch Icon ohne Kanten und Glanz

Das iPhone macht automatisch Kanten sowie einen Glanz um das Icon.
Möchten Sie das Ihr Icon ohne diesen Effekt platziert wird?

Dann sind 2 Schritte notwendig:

1.) Speichern Sie das Icon mit dem Namen apple-touch-icon-precomposed.png
Sie fügen also ganz einfach das Wort -precomposed hinzu.

Dann nutzen Sie innerhalb des <head></head> Tags den folgenden Code anstelle des obenstehenden:

  <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon-precomposed.png">


Hinweis:

Die Entfernung der Kanten sowie des Glanzeffekt sind für Safari + iOS 7 sowie ältere Versionen nicht kompatibel.

PrestaShop 1.7 Design / Layout anpassen

Jeder der einen Online-Shop mit Prestashop betreibt, fragt sich natürlich, ob er auf PrestaShop 1.7.x umsteigen soll.

Lohnt sich PrestaShop 1.7 oder soll man lieber mit PrestaShop 1.6 weiterhin arbeiten?

PrestaShop 1.7 vs. PrestaShop 1.6

Mittlerweile ist PrestaShop 1.7.x bereits einige Zeit erhältlich und erste positive und negative Punkte lassen sich feststellen.

Ganz wichtig ist natürlich, dass PrestaShop 1.6.x ins Alter kommt, Updates gibt es vereinzelt nur noch für Module, da können durchaus auch Fehler mit Server- bzw. PHP-Version nicht ausgeschlossen werden.
Möchte man diese selbstständig beheben, sind meistens grössere Arbeiten nötig – Diese Zeit hat kaum jemand, schliesslich möchte man verkaufen und Geld verdienen.

Deshalb lohnt sich ein Blick auf PrestaShop 1.7 in jedem Fall, denn die Entwickler haben eine stabile und gute Shopsoftware entwickelt.

PrestaShop 1.7 – Ordnerstruktur

Natürlich möchte man ein eigenes Design, bestenfalls das bisherige übernehmen oder direkt ein Redesign.
Auf den ersten Blick kommen viele an ihre Grenzen – Aber das ist normal, denn das System sowie die Struktur wurden neu überarbeitet.

Die Anpassung ist aber einfacher gemacht als viele denken.

Design:
PrestaShop basiert weiterhin auf Bootstrap, dieses steuert natürlich die Breite einzelner Tabellen im Layout.

Im Ordner „themes/classic/templates“ sind einige Ordner vorhanden, diese sind so aufgebaut, dass je nach Wunsch einzelne Bereiche einen anderen Kopf- und Fussbereich erhalten können.

Als Beispiel: Soll der Kunde im Warenkorb sowie in der Kasse nicht mehr abgelenkt werden, so kann unter „checkout/_partials“ der Kopf- und Fussbereich eingeschränkt werden.
Dadurch soll der Fokus nur noch auf den Kaufabschluss gelegt werden, was durchaus sinnvoll ist.

Also sollten keinesfalls einfach per Hand neue Tabellen unüberlegt im CSS erstellt, sondern zwingend Bootstrap angewendet werden.

PrestaShop Design anpassen

Möchte man das Logo ändern, kann man dies weiterhin via Admin-Panel erledigen.
Farben können aber auch weiterhin über das „theme.css“ bearbeitet werden.

Möchten Sie einzelne Objekte an anderen Orten, so können diese im Admin-Panel unter „Positionen“ als sogenannte Hooks angesetzt werden.
Möchten Sie einzelne Tabellen zum Beispiel in der Breite bearbeiten, öffnen Sie die Templates (beispielsweise Header oder Footer) oder je nach Objekt die dazugehörigen Module.

Zu beachten gilt:
Öffnen Sie den Ordner „themes/classic/modules“ Und nicht „modules“ im Hauptverzeichnis (root).

 

PrestaShop 1.7 Menu bearbeiten

Gehen wir im Beispiel davon aus, man möchte das Hauptmenu für Desktop, also Computer-Ansicht, in der Breite bearbeiten.

Dabei öffnet man direkt das Modul, welches für das Menu zuständig ist.
Dieses ist unter „themes/classic/modules/ps_mainmenu/ps_mainmenu.tpl“ zu finden.

Sehr wichtig: Legen Sie vorher kurz eine Kopie, also ein Backup an, damit Sie immer darauf zurückgreifen können!

Das HTML-Angabe befindet sich unten in der Zeile 36:

<div class=“menu col-lg-12 col-md-7 js-top-menu position-static hidden-sm-down“ id=“_desktop_top_menu“>

Die Angabe „col-lg-12“ ist im Bootstrap hinterlegt mit 100%, also volle Breite.
Möchten Sie das Menu kürzen, damit rechts beispielsweise etwas Platz vorhanden ist, können Sie diese Zahl nach unten rechnen.

 

Weitere Anpassungen im PrestaShop 1.7

Der Grundsatz ist immer derselbe, es muss lediglich nur die Breitenangabe gewählt werden, welche im theme.css (Bootstrap) hinterlegt ist.

Auf dieselbe Weise können wie erwähnt auch die Farben sowie Effekte (hover) angepasst werden.

Möchten Sie weitere Anpassungen vornehmen, öffnen Sie einfach die Module oder die Template-Files dazu.

Auch hier gilt: Immer mit Backups arbeiten, denn gerade wenn viel Code vorhanden ist wie im theme.css, sind Fehler kaum auffindbar, deshalb lohnt sich ein Backup immer!

 

Fazit zum neuen PrestaShop

Die neue Version ist im Vergleich natürlich überarbeitet worden und benötigt einige Zeit, um sich darin den Überblick zu verschaffen.

Allerdings ist es eine stabile und vor allem moderne Shopversion, welche für den alltäglichen Betrieb keine Wünsche offen lässt!
Aber jedes Unternehmen muss natürlich selber die Checkliste erarbeiten, ob PrestaShop 1.7 alle nötigen Funktionen, eventuell auch durch zusätzliche Module mitbringt, um erfolgreich zu arbeiten.

Wir können PrestaShop 1.7 aber definitiv empfehlen.
Es ist einfach aufgebaut und auch ohne Kenntnisse können die Tagesgeschäfte problemlos mit etwas Übung erledigt werden.

Wir wünschen Ihnen viel Erfolg!

 

Webdesign Responsive – Optimierung für mobile Geräte

Immer wieder werden wir gefragt, ob es denn wichtig sei, eine mobile Version der Website oder des Online-Shops anzubieten.

Und natürlich die grosse Frage, wie diese Optimierung überhaupt umgesetzt wird.

Webdesign Responsive / Mobile Version

Bis zu 50% der Besucher eines Online-Shops oder einer Website, surfen heute mit einem mobilen Gerät.
Die Optimierung einer Website oder eines Online-Shops für mobile Geräte (Smartphones / Tablets) ist also heute wichtiger denn je!

Allerdings gibt es 2 Möglichkeiten zur Optimierung:

1.) Webdesign Responsive

Das Webdesign Responsive passt sich der jeweiligen Bildschirmauflösung immer automatisch an.
Die Inhalte wie Texte und Bilder werden also immer 1:1 übernommen, ausser Elemente, also „DIV’s“ werden für die PC- oder mobile Version deaktiviert.

Die Optimierung findet aber nicht im PHP-Code oder in der Datenbank, sondern im CSS (Stylesheet) statt.

Einziger Nachteil ist jedoch, dass ein Wechsel von der mobilen- zur PC-Version nicht möglich ist, da es fix an die Bildschirmauflösung gebunden ist.

2.) Ein einzelnes mobiles Layout

Eine weitere Möglichkeit ist, dass nebst der PC-Version noch ein Layout für mobile Geräte realisiert wird.
Dabei wird also klassisch die Website ein 2. Mal erstellt und im Design für mobile Geräte speziell angepasst.

Ein Vorteil dabei ist, dass ein Wechsel zwischen der mobilen- und der PC-Version jederzeit möglich ist.
Ein Nachteil ist jedoch die doppelte Arbeit, denn das Layout / Webdesign wird als einzelne Website sozusagen betrachtet.

Zusätzlich kommt noch hinzu, dass in dieser Version über die .htaccess gearbeitet werden sollte, um das hin- und her bei den Layouts zu ermöglichen.

 

 

Google und mobile Version (Responsive)

Google erkennt automatisch, ob eine Website oder ein Online-Shop optimiert wurde für mobile Geräte.
Bevorzugt wird heute mit „Responsive“ gearbeitet, wobei es für Online-Shops oder Medienseiten auch häufig noch klassisch mit dem separaten Layout realisiert wird.

Google betrachtet aber vor allem den Code, sobald dieser also sauber und hochwertig realisiert wurde, spielt es keinen grossen Unterschied, welche Variante gewählt wird.

Wenn man jedoch die technische Entwicklung beachtet, wird gestützt immer stärker auf Webdesign-Responsive gearbeitet.

 

 

 

PrestaShop im Alltag für KMU & Start Ups

Online-Shops sind im Alltag der Konsumenten bereits fest integriert,  denn es ist beinahe alles online erhältlich.

Wir erklären Ihnen aber kurz und knackig, was die Vorteile für Betreiber mit PrestaShop sind.

 

 

Technische Anforderungen

PrestaShop ist nicht nur kostenlos, sondern liefert wirklich die wichtigsten Leistungen und Funktionen für den täglichen Betrieb.
Für den Betreiber werden damit bereits sehr viele wichtige Anforderungen in einem Shopsystem erfüllt.

Darunter zu verstehen ist eine einfache Lagerverwaltung, mehrere Währungen, Sprachen und Zahlungsmöglichkeiten.
Weiter ist auch bereits eine Optimierung für mobile Geräte (Smartphones und Tablets) enthalten, das Design kann (mit Kenntnissen) jederzeit angepasst werden.

Eigene Grafiken (Banner) können zudem auf der Startseite oder im Kopfbereich selbstständig ohne Kenntnisse eingebaut werden.
Dank dem passenden Modul ist auch eine Facebook-Verknüpfung per Klick vorhanden – Dies ermöglicht eine selbstständige Anbindung an Social Media.

 

 

PrestaShop Webhosting

Für den Betrieb eines einfachen Online-Shops mit PrestaShop, wird kein kompletter Root-Server benötigt!

PrestaShop benötigt natürlich eine gewisse Leistung, welche ein Webserver erfüllen muss.
Niemand kauft gerne ein, wenn pro Klick 5-10 Sekunden für die Ladezeit benötigt wird.

Deshalb ist eine optimale Serverbelastung sehr wichtig, andernfalls wird es nicht nur für Sie, sondern auch für den Besucher zu einer Geduldsprobe.

 

 

PrestaShop im Alltag für KMU

Start Ups sowie KMU sind mit PrestaShop in jedem Fall sehr gut bedient.
Für einfache sowie auch mittelgrosse Online-Shops ist PrestaShop bestens geeignet und bietet eine professionelle Basis.

Das Shopsystem kann nach der Einrichtung ohne Kenntnisse selbstständig betreut und betrieben werden.
Genügend kostenlose sowie auch kostenpflichtige Module sorgen für optimale Erweiterungen im täglichen Betrieb.

Weiter sind auch genaue Auswertungen über Besucher- und Verkaufszahlen möglich, was für eine Optimierung im Online-Shop unheimlich wichtig ist.

Einer optimalen Umsatzsteigerung mittels Online-Shop steht somit nichts mehr im Weg!

 

Haben Sie Fragen oder Anliegen zum Thema?

Kontaktieren Sie uns im Kommentarfeld, per E-Mail oder Telefon.

 

 

Zahlungen mit PostFinance und Kreditkarten

Wird ein Online-Shop eröffnet, werden viele Einzelheiten berücksichtigt, welche für den Betrieb wichtig sind.

Dabei kommt auch das Thema mit den Zahlungsmöglichkeiten zum Gespräch.
Allerdings gibt es dafür in den meisten Shopsystemen bereits sehr gute Lösungen.

Bezahlung im Online-Shop

Für den Kunden und auch den Betreiber kann eine Direktzahlung im Online-Shop sehr angenehm sein.
Dabei stehen heute moderne Lösungen zur Verfügung, welche Vollautomatisch arbeiten und kein weiteres Fachwissen benötigen.

Als Beispiel die PostFinance, die PostCard ist sehr beliebt, PostFinance E-Finance wird ja ebenso häufig verwendet.
Umso wichtiger deshalb, dass die Zahlungslösung mit der PostCard sowie PostFinance E-Finance angeboten wird.

Für den Betreiber wird sofort ersichtlich, ob eine Zahlung erfolgreich war, was die Lieferzeit natürlich senken kann.

E-Payment im Tagesgeschäft

Am einfachsten ohne Fachwissen ist direkt das Angebot der PostFinance.
Denn die PostFinance bietet einen kompletten Service und übernimmt die Sicherheitsvorkehrungen sowohl für den Betreiber als auch für den Endkunden.

Möchte der Kunde also beispielsweise bei Ihnen ein elektronisches Gerät bestellen, wählt er bei der Kasse, dass er PostCard oder PostFinance E-Finance nutzen möchte.
Danach wird er automatisch auf die Zahlungsmaske der PostFinance umgeleitet, in welcher er die Zahlung bestätigen kann.

Nach erfolgter Zahlungsbestätigung wird der Kunde automatisch zurück in Ihren Online-Shop geführt, meistens auf eine Bestätigungsseite, dass die Bestellung erfolgreich war.

Ihnen wird übrigens die Transaktion einerseits von der Postfinance bestätigt und natürlich auch in der Bestellbestätigung  intern übermittelt.

Einbau im Online-Shop

Ob Sie xt:Commerce, Magento, PrestaShop, Gambio usw. nutzen, spielt keine Rolle.
Die Zahlungsarten können mittels Modul mittlerweile für extrem viele Shopsysteme eingebaut, konfiguriert, getestet und aufgeschaltet werden.

Während dem Einbau, normalerweise durch unsere Webagentur, sorgen wir bereits im Hintergrund dafür, dass Sie direkt von der verantwortlichen Person der PostFinance die Unterlagen erhalten.

Sind die Unterlagen unterzeichnet, kann die Live-Schaltung der Zahlungsart vorgenommen werden.
Diese Arbeit besprechen wir jeweils kurz mit unseren Kunden, da meistens noch Fragen entstehen, welche wir damit direkt beantworten können.

Preislich ist der Service ebenfalls sehr attraktiv, denn er ist bereits ab monatlich 16.20.- ohne Kommissionsgebühren (Gebühr pro Zahlung) erhältlich!

Haben Sie noch Fragen zu den Zahlungslösungen?
Kontaktieren Sie uns, wir unterstützen Sie gerne!

Wir wünschen Ihnen gute Geschäfte!