Introduction to the Front Office

PrestaShop v1.7 comes preinstalled with the Classic theme, a simple but full-featured theme inspired by the Google Material Design language. The theme is made up of many modules installed in various hooks to make it easy to add, remove and reposition elements on the page (see Modules > Modules & Services tab and Design > Positions tab), and text can easily be searched for and changed (see International > Translations tab).

In this section, we'll have a look at the features on each page and the related modules and hooks, which you'll need to understand before you can add, remove and reposition elements.

Introduction to the header

At the top of the Classic theme is the header (see Figure 1). It is divided into two sections. In the top section, the displayNav1 hook on the left side contains a Contact us link added by the Contact information module.

On the right side, the displayNav2 hook contains various dropdowns and links. If your website has multiple languages installed, a language dropdown will be added by the Language selector block module. If your website has multiple currencies installed, a currency dropdown will be added by the Currency block module.

Next, a Sign in link is added by the Customer "Sign in" link module followed by the Cart summary added by the Shopping cart module. If a customer is signed in, a Sign out link followed by their name with a link to the Your account page is displayed instead.

In the bottom section of the header is the website logo, which can be changed on the Design > Theme &Logo tab of the Back Office. After that is the displayTop hook containing the Main menu module and then the displaySearch hook containing the Search bar module.

Note that on checkout pages, a simplified header is displayed with the website logo on the left and the displayNav1 hook with the Contact us link on the right (see Figure 2). This is designed to improve sales by encouraging customers to finish checking out before doing anything else.

Introduction to the footer

At the bottom of the Classic theme is the footer (see Figure 3). It is also divided into two sections. In the top section of the footer, the displayFooterBefore hook contains the Newsletter subscription module. If social media links have been configured, the Social media follow links module will also be displayed.

To configure the RSS button for products, install the free RSS products feed module on the Modules > Modules & Services tab and then enter the RSS URL as http://yourdomain.com/module/ps_feeder/rss on the Social media follow links module configuration page. Alternatively, enter the URL to your blog feed.

In the bottom section of the footer, the displayFooter hook contains the lists of links related to products and the company added by the Link List module. These blocks and links can be changed on the Design > Link Widget tab in the Back Office. Next is a list of links related to the customer account added by the My Account block module. Finally, there is a block with store information added by the Contact information module.

Below that is the copyright message. Note that on checkout pages, a simplified footer is displayed with only this copyright message. This is designed to improve sales by encouraging customers to finish checking out before doing anything else.

If you install the free Legal Compliance module and reposition it, you will see an additional Information list and the text All prices are mentioned tax included above the copyright text (see Figure 4).

Introduction to the homepage

The homepage is the first page that customers see when they visit your website. In the Classic theme, modules installed in the displayHome hook are displayed on the homepage (see Figure 5). At the top, there is the Image slider module with customizable images, text and links.

Next is the Featured products module, which lets you display products from a specified category. Each product is displayed as a card with the cover image with badges in the top-left corner to indicate whether a product is new or on special, and the name and price below the image. When hovering the mouse over a product card, a Quick view link slides up along with links to each color variant if they exist.

Below the Featured products module is the Banner module, which displays a single customizable image with a link, and the Custom text blocks module, which displays a single block of customizable text.

There are additional free modules that can be installed from the Modules > Modules & Services tab in the Back Office to display different types of products on the homepage including the Specials block, Top-sellers block and New products block to display discounted products, best-selling blocks and newest products, respectively (see Figure 6).

Introduction to the Quick view popup

Clicking the Quick view link on a product opens a popup with a larger version of the cover image and thumbnails of all the product images (see Figure 7). Clicking an image thumbnail replaces the cover image with a larger version of the thumbnail.

On the right side of the Quick view popup, the product name, price, tax information and short description are displayed. If a delivery time is configured on the Shop Parameters > Product Settings tab, it will be displayed after the tax information. If the product has attributes, dropdowns or color swatches may appear below the short description. Next, the Quantity spinner and Add to cart button are displayed followed by a message indicating whether the product is in stock. Across the bottom of the popup are social links to share the product on Facebook, Twitter, Google+ and Pinterest.

Introduction to the CMS pages

There are many CMS pages linked in the footer that have example content you can modify for your own needs or disable altogether using the Design > Pages tab in the Back Office. For example, the About us page has three columns: Our company, Our team and Testimonials (see Figure 8).

You can modify the Our company column to include a description of your company's products and services. The Our team column can include a photo of your shopfront and information about your team. Finally, you can add some testimonials from your customers to the Testimonials column. Alternatively, you can create your own design instead of using the example three columns.

There are many other example pages: Delivery, Legal notice, Terms and conditions of use and Secure payment. If you have installed the Legal Compliance module, there will be more pages: Revocation terms, Privacy, Shipping and payment, and Environment notice.

Introduction to the Our stores page

Clicking the Stores link in the footer opens the Our stores page, which displays a card for each store of your company with a picture, address and trading hours. You can manage the stores on the Shop Parameters > Contact > Stores tab in the Back Office.

If your company doesn't have multiple stores, you can remove the Stores link from the footer by going to the Design > Link Widget tab in the Back Office, clicking the Edit button next to Our company, unticking Stores in the Static content section, and then clicking the Save button.

Introduction to the Contact us page

Clicking the Contact us link in the header or footer opens the Contact us page with the store address and email on the left side and a contact form on the right side. The store information on the left side can be changed at the bottom of the Shop Parameters > Contact > Stores tab in the Back Office.

The contact form on the right side has a Subject dropdown that allows the customer to choose which department to send the email. The departments can be changed on the Shop Parameters > Contact > Contacts tab in the Back Office.

Below the dropdown is the Email address field, which is prefilled with the customer's email address if they are logged in. If the customer has made any orders, an Order reference dropdown is displayed so the customer can choose the order they need help with.

If the Allow file uploading option on the Customer Service > Customer Service tab is set to Yes, then the Attachment field is displayed next, which allows customers to attach a single file to their message. Lastly, there is the Message field that the customer can use to ask their question.

Introduction to the category page

...

Introduction to the New products page

...

Introduction to the Specials page

...

Introduction to the Best sellers page

...

Introduction to the Brands page

...

Introduction to the brand page

...

Introduction to the Suppliers page

...

Introduction to the supplier page

...

Introduction to the product page

...

Introduction to the shopping cart page

...

Introduction to the checkout page

...

Introduction to the login page

When the Sign in link in the header is clicked, the Log in to your account page is displayed (see Figure 9). It contains text fields for the customer to enter their email address and password. Next to the Password field is a Show button that can be used to unmask the password to check it is right before clicking the Sign in button to log in to the website. There is also a Forgot your password? link that customers can click if they need to reset their password. Clicking this link opens the Forgot your password? page (see Figure 10) with an Email address text field and a Send Reset Link button. There is also a Back to login link to return to the login page.

Below the login form is a No account? Create one here link that customers can use to create a new account. Clicking this link opens the Create an account page (see Figure 11).

At the top of the Create an account page, there is a link to return to the login page. Next, there are social titles including Mr. and Mrs. radio buttons, and text fields the customer can use to enter their first and last name, email address and password. The social titles can be changed on the Shop Parameters > Customer Settings > Titles tab in the Back Office.

Below these fields is an optional text field for the customer to enter their birthday. This can be removed if it's not needed by going to the Shop Parameters > Customer Settings > Customers tab and changing Ask for birth date to No.

Next, there is a Receive offers from our partners checkbox that customers can use to indicate whether they consent to receiving partner emails. This can be removed if it's not needed by going to the Shop Parameters > Customer Settings > Customers tab and changing Enable partner offers to No.

Below that is the Sign up for our newsletter checkbox that customers can use to indicate whether they content to receiving a company newsletter. This can be removed if it's not needing by going to the Modules > Modules & Services > Installed modules tab and then disabling or uninstalling the Newsletter subscription module, which will also remove the newsletter subscription from the footer.

If your country requires it, there is also a free Customer data privacy block module, installed through the Modules > Modules & Services > Selection tab, that adds an additional Customer data privacy checkbox the customer must tick to consent to storing their personal information.

Introduction to the account page

After signing up to your website, a customer will see the Your account page with cards to each of the available account pages and a Sign out link at the bottom (see Figure 12). The Information card links to the Your personal information page.

The Addresses card links to the Addresses page. If no customer address exists yet, the Add first address card is displayed instead, which links to the New address page. The Order history and details card links to the Order history page, which lists the customer's orders.

Next is the Credit slips card, which links to the Credit slips page with credit slips the customer has received from canceled orders. If you have added a cart rule on the Catalog > Discounts tab, a Vouchers card will be displayed that links to the Your vouchers page with vouchers that have limited to the logged-in customer.

If returns are enabled on the Customer Service > Merchandise Returns tab, a Merchandise returns card will be displayed next, which links to the Merchandise returns page with authorized returns. If the free Mail alerts module has been installed through the Modules > Modules & Services tab, a My alerts card will be displayed, which links to the My alerts page with customer notifications when their order changes or when an out-of-stock product they are interested in becomes available again.

Introduction to the Your personal information page

The Your personal information page displays a form that allows the customer to view and change the data they entered when they signed up for an account including social title, name, email address and birthdate (see Figure 13). There may be additional options including a Receive offers from our partners checkbox, Sign up for our newsletter checkbox and a Customer data privacy checkbox depending on the installed modules and settings.

The customer must enter their current password before they can change any of their data for security reasons. There is also a New password field that the customer can use to change their current password. Below the form, there are links to return to the Your account page and the homepage.

Introduction to the Addresses page

When the customer visits the Addresses page for the first time, the New address form will appear, so they can enter their first address (see Figure 14).

The customer's first and last name will be prefilled from their entered personal information. The customer must enter their street address in the Address field, city in the City field, and postcode in the Zip/Postal Code field. They must also choose a country from the Country dropdown and a state in the State dropdown if states are configured for the selected country.

There are also optional fields including an Alias field to enter a description (e.g., Dad's address) that is useful for customers who purchase products for friends and family, a Company field that can be used to enter a company name in the address, a VAT number field that can be used to add a tax identification number to the address, an Address Complement field that allows a second line to be added the address, and a Phone field that can be used to add a phone number to the address.

By default, only the country selected when installing PrestaShop will be displayed in the Country dropdown. Additional countries can be enabled on the International > Locations > Countries tab. There is also an option there to hide countries that are not covered by active carriers on the Shipping > Carriers tab. Some countries may require their states to be installed through the International > Localization tab.

The address fields and their order will dynamically change to match the selected country. It is possible to add and remove address fields and change their order by going to the International > Locations > Countries tab, editing the country, and then changing the address format.

To force the customer to enter a phone number or another field that is optional by default, click the Customer > Addresses tab in the Back Office and then click the Set required fields for this section button at the bottom of the page. Tick the optional fields to make required and then click the Save button.

Once the customer has saved an address, they will see each of their addresses as a card with Update and Delete options (see Figure 15). Below the address cards is a Create new address link and below that is the Back to your account and Home links to return to the Your account page and the homepage.

Introduction to the Order history page

...

Introduction to the Credit slips page

...

Introduction to the Your vouchers page

...

Introduction to the Merchandise returns page

...

Introduction to the My alerts page

...

Introduction to the Sitemap page

The sitemap can be accessed by added sitemap to the end of the homepage URL in your browser (see Figure 16). The sitemap is divided into four sections. The Our Offers section contains a list of links to the New products page, Brands page and individual brands, and the Suppliers page and individual suppliers.

The Categories section contains a list of links to all the product categories within the website. The Your Account section contains a list of links to all the customer's account pages, or to the pages to the Log in and Create new account pages if no customer is logged in.

The Pages section contains a list of links to all the CMS pages within the website, the Our stores page, the Contact us page and the sitemap itself.