Child pages
  • Esplorare il front office

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Si noti che tutto questo contenuto può essere modificato dal proprietario del negozio dall'interno del back office, sia tramite le impostazioni di preferenza sia tramite la configurazione del modulo.

The left column

The default theme's left column only appears on a category page, when activated from the back office. It mainly serves as a handy placeholder for navigation and tools.

Categories block

A category is a hierarchical way of sorting items: it can contain any number of sub-categories, making it possible to easily browse from the more general category listings to the more specific products by following a logical path.

A PrestaShop shop can have as many categories and sub-categories as needed, with an infinite number of products in a given category level. All categories are actually sub-categories of the root category, "Home."

Faceted navigation

The faceted navigation displays a block with different criteria available to filter the products, mostly attributes, features, and price ranges. It is very handy to help the customers easily find a product.

The central section

This is where the magic happens. The central section changes constantly in response to the customer's choices.

The front page

The default front page gives the customer a broad overview of the shop and its possibilities. An image slider serves as an introduction to the shop, with three alterning images.

The slider is followed by a list of "Popular products" that highlights products depending on their popularity.

Tip

Most seasoned web surfers will visit a shop via a search engine, landing directly on a product or category. Few stumble upon the home page, and this is why it should be tailored to new users.

Product listing pages

Categories, tags, brands, suppliers, search, specials page, best sellers page or new products page: PrestaShop has many paths to a product, but in the end, the customers are given a familiar listing of products, within the chosen context.

Despite the differing content, these listing designs are very similar, in order to keep it familiar even for the newcomers. They all display a list of concerned products organized in a grid, with:

  • A thumbnail,
  • Discount or state flags on the top-left hand side,
  • Product name
  • Product price

This list view enables the customer to see at a glance the products' main information when they already know everything they need about a product, allowing for a quicker decision process.

Hovering over the product triggers a quick animation, displaying the different combinations and a "Quick view" link. By clicking the "Quick view" link, a pop-up window opens with the main product information and an "Add to cart" button.

Category header: image and image map

Categories can feature a header image with an introductory message, as set by the shop owner.

Product sorting

Product listing by category or brand can be further sorted by price (low to high or high to low), name (A to Z or Z to A) or relevancy.

Product page

This is where all the information entered by the shop owner is available to the user. Depending on the theme design, a product page can be very thorough, with extensive information, or simply present the most essential facts. The default theme is typical in that its most prominent feature is the product images, with a tool below it enabling customers to view the various available images.

Next to the images are two blocks:

  • A "summary" block, presenting the main facts for the current product.
  • The "Add to cart" block, with the option to choose among the available combinations (as defined by the shop owner) and the quantity to be ordered.

Below the cart block you will find a reassurance block, to let your customers know about the various benefits of buying on your shop, or to be more transparent on your payment and delivery policies.

At the bottom of the product page is a tab section. The most usual ones are:

  • Description. This gives the full description for the product, as entered by the shop owner.
  • Product detailsThis tab only appears if the shop owner has entered data in the product's "Features" sheet. This gives all the detailed features that were entered into database. The content of this tab is very sparsely written: these are just raw facts, far from the product description.

The cart page

Clicking on the "Cart: XX products" link in the header brings the customer to the shopping cart summary page, which is the first step in the order process, before entering the checkout page. It sums up the cart and shows again the reassurance block. This is where the customer makes sure that the order only contains the wanted products, no more, no less.

When clicking the "Checkout" button, the user is redirected to the one-page checkout, divided into 4 sections:

  1. Personnal information. Where the non-logged customer is asked to log in or create an account. This step is skipped over if the customer is already logged in. However, it is still available if the customer wants to sign in with another account.
  2. Addresses. Where the customer is presented with his or her currently registered addresses in PrestaShop, and has to choose the one where the delivery is to be made.
  3. Shipping method. Where the customer chose the shipping options.
  4. Payment. Where the customer is presented with the final price of the order (now including the shipping price), and is asked to choose a payment method.

The customer can come back to any previous step by clicking on its title.

The checkout page has been voluntarily stripped of any distraction such as the left column, the footer and other links that can lead the customer away from the purchase. It is still possible to exit the checkout process by clicking on the shop logo in the header.

Creating a customer account

Because it is one of the main sources of lost customers for online shops, PrestaShop makes it simple and straightforward to create a customer account.

When clicking the "Sign in" link in the header, the visitor is taken to the authentication page, where he or she can sign in. If he or she needs to create a new account, the link "No account? Create one here" will redirect to the account creation form.

...

La colonna di sinistra

TLa colonna a sinistra nell’impostazione predefinita viene visualizzata in una pagina di categoria quando viene attivata dal back office. Funziona principalmente come pratico segnaposto per la navigazione e per gli strumenti disponibili.

Il blocco categorie

Una categoria è una struttura gerarchica per l’ordinamento dei prodotti: può contenere un numero qualsiasi di sottocategorie, consentendo di navigare in modo semplice dalle liste di categorie partendo dalle più generali e giungendo a prodotti più specifici grazie a un percorso logico.

Un negozio PrestaShop può avere tutte le categorie e sottocategorie necessarie, con un numero infinito di prodotti all’interno di un determinato livello di categoria. Tutte le categorie sono in effetti sotto categorie della categoria radice "Home".

Navigazione dettagliata

La navigazione dettagliata visualizza un blocco con diversi criteri disponibili per filtrare i prodotti, i principali attributi, funzionalità e intervalli di prezzo. È molto utile nell’aiutare i clienti a trovare facilmente un prodotto.

La sezione centrale

È qui che avviene la magia. La sezione centrale cambia costantemente in risposta alle scelte dei clienti.

The front page

La prima pagina predefinita fornisce al cliente un'ampia panoramica del negozio e delle sue possibilità. Lo slider con immagini che si alternano è utile per fornire un quadro generale del negozio.

Lo slider è seguito da un elenco di "Prodotti popolari" evidenziati a seconda delle scelte più frequenti.

Tip

La maggior parte dei navigatori esperti visiterà il negozio tramite un motore di ricerca, atterrando direttamente su un prodotto o su una categoria. È bene che ci siano pochissimi ostacoli nella home page che dovrebbe essere su misura per i nuovi utenti.

Pagine delle liste dei prodotti

Categorie, tag, marchi, fornitori, ricerca, pagina speciali, pagina dei best sellers o nuovi prodotti: PrestaShop fornisce molti percorsi per un prodotto, ma i clienti hanno a disposizione un elenco familiare dei prodotti in base al contesto scelto.
Nonostante il diverso contenuto, il design di queste liste sono molto simili per far sì che sia familiare anche per i nuovi arrivati. Mostrano tutti un elenco di prodotti organizzati in una griglia, con:

  • Una bandiera,
  • Sconto o barra di stato in alto sul lato sinistro,
  • Nome del prodotto
  • Prezzo del prodotto

Questa visualizzazione in elenco consente al cliente di vedere in breve le informazioni principali dei prodotti quando già conoscono tutto ciò di cui hanno bisogno di quel prodotto, favorendo un processo decisionale più rapido.


Spostandosi sul prodotto si attiva una veloce animazione, si visualizzano le diverse combinazioni e un collegamento "Visualizzazione rapida". Facendo clic sul collegamento "Visualizzazione rapida" viene visualizzata una finestra popup con le informazioni principali del prodotto e un pulsante "Aggiungi al carrello".

Categoria header: immagine e immagine mappa

Le categorie possono disporre di un'immagine di intestazione con un messaggio introduttivo, come definito dal proprietario del negozio.

Ordine prodotti

L'elenco dei prodotti per categoria o marca può essere ulteriormente ordinato per prezzo (dal più basso al più alto o dal più alto al più basso), nome (da A a Z o da Z a A) o pertinenza.

Pagina prodotti

Qui tutte le informazioni inserite dal proprietario del negozio sono messe a disposizione dell'utente. A seconda del tema, una pagina del prodotto può essere molto approfondita con informazioni estese o semplicemente presentare le caratteristiche più importanti. La caratteristica principale del tema predefinito è quella delle immagini del prodotto, con uno strumento in basso che consente ai clienti di visualizzare le varie immagini disponibili.

Accanto alle immagini ci sono due blocchi:

  • Un blocco "Riepilogo" che riporta i principali caratteristiche del prodotto in questione
  • Il blocco "Aggiungi al carrello", che consente di scegliere tra le combinazioni disponibili (come definito dal proprietario del negozio) e la quantità da ordinare.

Sotto il blocco del carrello troverai un blocco di rassicurazione per far conoscere ai tuoi clienti i diversi vantaggi nell'acquistare nel tuo negozio o per essere più trasparente sui termini di pagamento e di consegna.

Nella parte inferiore della pagina prodotti è presente una tabella di sezione. Le più usuali sono:

  • Descrizione. Fornisce la descrizione completa del prodotto inserita dal proprietario del negozio.
  • Dettagli del prodottoQuesta tabella appare solo se il proprietario del negozio ha inserito i dati del prodotto attraverso il foglio “Caratteristiche”. Ciò fornisce tutte le caratteristiche dettagliate che sono state inserite nel database. Il contenuto di questa scheda è puramente esemplificativo: si tratta di bozze differenti dalla descrizione del prodotto.

La pagina carrello

Facendo clic sul link "Carrello: prodotti XX" nell'header, il cliente giunge alla pagina di riepilogo del carrello della spesa che rappresenta il primo passo del processo di ordine, prima di accedere alla pagina del pagamento. Riassume il contenuto del carrello e mostra nuovamente il blocco di rassicurazione. Qui è dove il cliente viene rassicurato che l'ordine contiene solo i prodotti desiderati, né più né meno.

Cliccando sul bottone "Checkout" l’utente è reindirizzato sulla pagina dedicata al checkout divisa in 4 sezioni:

  1. Informazioni personali. Se il cliente non ha effettuato l’accesso viene richiesto di accedere o creare un account. Questo passaggio viene ignorato se il cliente è già logato. Resta comunque disponibile nel caso il cliente desideri accedere con un altro account.
  2. Indirizzi. Qui appaiono gli indirizzi del cliente registrati in PrestaShop, il cliente deve scegliere quello della consegna
  3. Metodi di spedizione. Qui il cliente scelte l’opzione per la spedizione.
  4. Pagamento. Qui viene presentato al cliente il prezzo finale dell’ordine (qui incluso anche il prezzo di spedizione) e viene richiesto di scegliere un metodo di pagamento.

Il cliente può tornare indietro al passo precedente cliccando sul relativo titolo.

La pagina di pagamento è stata volontariamente privata di qualsiasi distrazione come ad esempio la colonna di sinistra, il piè di pagina e altri link che possono allontanare il cliente dall'acquisto. È ancora possibile uscire dal processo di pagamento facendo clic sul logo del negozio nell'intestazione.

Creare un account cliente

Poiché la registrazione è una delle principali cause di perdita clienti nei negozi online, PrestaShop semplifica la creazione di un account.

Quando clicca sul link "Accedi" nell'header il visitatore viene portato alla pagina di autenticazione in cui può accedere. Se ha bisogno di creare un nuovo account, il link "Nessun account? Creane qui uno" lo reindirizzerà al modulo di creazione account.

Il modulo di creazione dell’account si divide in due parti:

  • Personal information. There the customer should fill in everything that can uniquely identify the customer: first name, last name, e-mail, password, and date of birth.
  • Subscriptions. The customer can choose to subscribe to your newsletter and to receive or not your partner offers. Make sure you only display these fields if you actually send this kind of content.

...