Epic: #2
Responsive's issue: #7

Link to Figma prototype

Info

Contains every information of the product: Prices, availability, attributes, quantity and add to cart button.
Also contains block reassurance module

UX and design explanations

• Unavailable colors are crossed out
• Buttons have 4px radius
• Selected combinations are highlighted
• The name of the selected color is indicated, useful for color blind people

Mockups

Default

Disable

Dropdown

Boxes

Product pack

Epic: #2
Responsive's issue: #4

Link to Figma prototype

UX explanations

• Layout changes and image thumbnails are now placed on the left side of the main image to save space from scrolling
• The selected image is still visually indicated by a purple outline to let customers know which image is selected
• Horizontal Scroll

Mockup

Epic: #2

Link to Figma prototype

UX explanation

Features

• PrestaShop/PrestaShop#24758
• PrestaShop/PrestaShop#14572
• PrestaShop/PrestaShop#23659
• PrestaShop/PrestaShop#24766
• PrestaShop/PrestaShop#24767
• PrestaShop/PrestaShop#25994
• PrestaShop/PrestaShop#24768
• #512
• PrestaShop/PrestaShop#24929
• PrestaShop/PrestaShop#24759

• PrestaShop/PrestaShop#16713

Bugs

• PrestaShop/PrestaShop#9590
• PrestaShop/PrestaShop#21477 - PR available
• PrestaShop/PrestaShop#26576

We need to refacto the webpack configuration in order to be able to use webpack dev server for a better development experience.

@Oksydan wants to do it, lets go :)

Epic: #2
Responsive's issue: #30

Link to Figma prototype

UX and design explanations

• A "download" icon has been added to both "Get my data to PDF" and "Get my data to CSV" button to emphasize that it's downloadable

Mockup

Epic: #2

Link to Figma prototype

UX explanation

Epic: #2
Desktop's issue: #45

Link to Figma prototype

UX and design explanations

• Tags have a 8px margin
• Text is aligned on the left
• First letter of the text is in capital
• No quick view on responsive

Mockup

Epic: #2

Link to Figma prototype

UX explanation

Epic: #2
Responsive's issue: #25

Link to Figma prototype

UX and design explanations

• Navigation menu is always available on the left side because it allows users to easily navigate between different pages in 1 click
• This account page serves as a true “home base” by including all pages account features
• Icons are used to communicate the location of each page so users can identify them quickly
• A short description has been added to each page to inform its content to users
• The Sign out button is highlighted in red

Mockup

Epic: #2

Link to Figma prototype

UX explanation

Here is the list of the task needed to create the new theme of PS 8.0

Figma link for mockups

Desktop tasks

Home page

• #37
• #40
• #41
• #43
• #45
• #55
• #56

Product page

• #3
• #6
• #33
• #45
• #55
• #56

Category page

• #45
• #55
• #47
• #49
• #56

Cart page

• #51
• #56

Checkout page

• #5
• #8
• #9
• #10
• #11

Sign in page

• #17

My account page

• #19
• #20
• #21
• #22
• #23
• #24

Manufacturer, Store, Sitemap, and Contact us pages

• #70
• #85
• #83
• #91

Components

• #53
• #45
• #55
• #56
• #60

Responsive tasks

Home page

• #38
• #39
• #42
• #44
• #46
• #57

Product page

• #4
• #7
• #32
• #46
• #57

Category page

• #46
• #48
• #50
• #57

Cart page

• #52
• #57

Checkout page

• #12
• #13
• #14
• #15
• #16

Sign in page

• #18

My account page

• #25
• #26
• #27
• #28
• #29
• #30

Manufacturer, Store, Sitemap, and Contact us pages

• #90
• #86
• #84
• #92

Components

• #54
• #46
• #57
• #58
• #61

Epic: #2
Desktop's issue: #5

Link to Figma prototype

UX and design explanations

Mockups

Epic: #2
Desktop's issue: #23

Link to Figma prototype

UX and design explanations

• The header text in the first column is differentiated from the second column text by a heavier weight. It makes the header easy to read with its contrast.

Mockups

Credit slips

Empty credit slips

Epic: #2
Desktop's issue: #19

Link to Figma prototype

UX and design explanations

• This account page serves as a true “home base” by including all pages account features
• Icons are used to communicate the location of each page so users can identify them quickly
• A short description has been added to each page to inform its content to users
• The Sign out button is highlighted in red

Mockup

Epic: #2

Link to Figma prototype

UX explanation

Epic: #2

Link to Figma prototype

UX explanation

Epic: #2
Desktop's issue: #24

Link to Figma prototype

UX and design explanations

• A "download" icon has been added to both "Get my data to PDF" and "Get my data to CSV" button to emphasize that it's downloadable

Mockup

Is your feature request related to a problem? Please describe.
The problem starts when a customer decides to use the add the cart button from the home screen. This step uses default combinations to add items to the cart; therefore, store owners will get a wrong order and eventually have to return the item.

Describe the solution you'd like
To solve this problem, a feature should be introduced. In the BO if a default product combination is not selected then the customer should be forced to select combinations to ensure correct products are added to cart for an order.

In the below image - default style and size are selected. Even though the user wants a t-shirt for a girl with size L.

Epic: #2

Link to Figma prototype

UX explanation

Epic: #2

Link to Figma prototype

UX explanation

Epic: #2
Responsive's issue: #46

Link to Figma prototype

UX and design explanations

• Tags have a 8px margin
• Text is aligned on the left
• First letter of the text is in capital
• On hover, the card has a shadow
• On hover, the button "quick view" appears

Mockups

Home Page and Product Page

Category Page

Hover behaviors

Epic: #2
Desktop's issue: #21

Link to Figma prototype

UX and design explanations

• When adding a new address, the button "Save" has been replaced by "Add new address"
• When editing an existing address, the wording "Update" has been replaced by "Edit". The button is still "Save".

Mockups

List of addresses

Add new address

Edit address

Epic: #2
Responsive's issue: #26

Link to Figma prototype

UX and design explanations

• The "Mx." social title has been added for gender-neutral, people who don't identify themself as male or female (of course, social titles can be managed by users in the back office)
• Mandatory inputs have a red asterisk

Mockup

Epic: #2
Desktop's issue: #41

Link to Figma prototype

UX and design explanations

• The banner is full width
• It has been redesigned and brought up to date

Mockup

Epic: #2
Desktop's issue: #22

Link to Figma prototype

UX and design explanations

Breadcrumbs

• Ellipsis is used for breadcrumb, which means that some words have been shortened to fit the breadcrumb in a single line

Alignement

• The header text in the first column is differentiated from the second column text by a heavier weight. It makes the header easy to read with its contrast.
• The numeric alignment is applied for data related to size (e.g. the currency). The font used for numeric alignment is "Monospace", also known as "Tabular" font. This means that a wide letter such as "W" that is bigger than "I" will have the same width. It allows users to scan numerical data easier.
• First column of data is aligned to the left and the second one is aligned to the right

Order details

• Sections are better defined and identifiable by dividers and section titles (e.g. Addresses, Products, Tracking, etc)
• In terms of alignment, the same rules apply
• Image of the purchased product has been added so customers can remember the look of the product
• Total price is differentiated from the rest by a heavier weight to create a contrast so it can easily be identified
• Affordance has been improved by transforming the "Reorder" link into a button

Mockups

Order history and details

Order details

Epic: #2
Desktop's issue: #43

Link to Figma prototype

UX and design explanations

• Font has been replaced by "Inter" which is an open source font family

Mockup

This issue has been migrated from the Forge. Read the original ticket here.

• Reporter: marion_francois
• Created at: Thu, 12 Apr 2018 09:10:49 +0200

Before in 1.6 version we had the CMS block module allowing to configure links in the footer and display or not the copyright "powered by PrestaShop".

This module has been replaced in 1.7 by the tab Design > Link Widget.
But we can't anymore choosing to display or not the copyright.

So, if I want to remove it, I have to edit the file in templates/_partials/footer.tpl, which isn't easy for a merchant

Specs

1. In Shop parameters > General page, under "Display best sellers", add a toggle "Display PrestaShop copyright in the footer" Yes/no, set on Yes by default.
2. If the toggle is set on No, then the following sentence will not be displayed:
   

Epic: #2
Desktop's issue: #37

Link to Figma prototype

UX and design explanations

• Image slider is full-width
• Arrows allow users to view other images in the slider
• The slider indicator allows users to know how many images the image slider has

Mockups

Epic: #2

Link to Figma prototype

UX explanation

Epic: #2
Responsive's issue: #32

Link to Figma prototype

UX and design explanations

• Description and details section are now positioned on the left side to avoid blank space in the middle of the product page
• Description and details section is now an accordion where you can click to expand/reduce elements

Mockups

Default

Expand

Epic: #2
Desktop's issue: #40

Link to Figma prototype

UX and design explanations

• The category section allows users to easily access a specific category
• It also allows merchants to showcase some of their categories
• This section is positioned between the banner and the popular products

Mockup

Epic: #2
Responsive's issue: #12

Link to Figma prototype

UX and design explanations

Mockups

Epic: #2

Link to Figma prototype

UX explanation

Epic: #2

Link to Figma prototype

UX explanation

Epic: #2
Desktop's issue: #3

Link to Figma prototype

UX and design explanations

• Main image is full width
• Image thumbnails allow users to jump directly from an image to another one
• Image thumbnails are positioned below the main image because it's closer to users' thumb, so more reachable
• The selected image is still visually indicated by a purple outline to let customers know which image is selected
• It's also important to indicate how many image thumbnails the product has, with the slider indicator at the bottom of the main image
• Arrows indicates if users can swipe left and/or right
• When clicking on the main image, it activates the full screen

Mockups

Full screen when clicking on the main image

Epic: #2
Desktop's issue: #20

Link to Figma prototype

UX and design explanations

• The "Mx." social title has been added for gender-neutral, people who don't identify themself as male or female (of course, social titles can be managed by users in the back office)
• Mandatory inputs have a red asterisk

Mockup

Epic: #2
Responsive's issue: #39

Link to Figma prototype

UX and design explanations

• The category section allows users to access a specific category
• It also allows merchants to showcase some of their categories
• This section is positioned between the banner and the popular products

Mockup

Epic: #2
Responsive's issue: #42

Link to Figma prototype

UX and design explanations

• The banner is full width (1440px x 200px)
• It has been redesigned and brought up to date

Mockup

Here is the list of the task needed to create the new theme of PS 8.0

Desktop tasks

• [] #

Epic: #2
Responsive's issue: #29

Link to Figma prototype

UX and design explanations

• The header text is differentiated from column text by a heavier weight. It makes the header easy to read with its contrast.

Mockups

Credit slips

Empty credit slips

Epic: #2
Responsive's issue: #28

Link to Figma prototype

UX and design explanations

Alignement

• The header text is differentiated from column text by a heavier weight. It makes the header easy to read with its contrast.
• The numeric alignment is applied for data related to size (e.g. the currency). The font used for numeric alignment is "Monospace", also known as "Tabular" font. This means that a wide letter such as "W" that is bigger than "I" will have the same width. It allows users to scan numerical data easier.
• Textual data is aligned to the left (e.g. Order reference or Payment)
• Headers are aligned according to their column data

Order details

• Sections are better defined and identifiable by dividers and section titles (e.g. Addresses, Products, Tracking, etc)
• In terms of alignment, the same rules apply
• Image of the purchased product has been added so customers can remember the look of the product
• Total price is differentiated from the rest by a heavier weight to create a contrast so it can easily be identified
• Affordance has been improved by transforming the "Reorder" link into a button

Mockups

Order history and details

Order details

Epic: #2

Link to Figma prototype

UX explanation

Epic: #2
Responsive's issue: #44

Link to Figma prototype

UX and design explanations

• Font has been replaced by "Inter" which is an open source font family

Mockup

Epic: #2

Link to Figma prototype

UX explanation

Epic: #2
Desktop's issue: #33

Link to Figma prototype

UX and design explanations

• Description and details section is now an accordion where you can click to expand/reduce elements

Mockups

Default

Expand

Epic: #2
Responsive's issue: #38

Link to Figma prototype

UX and design explanations

• Image slider is full-width
• Arrows allow users to view other image in the slider
• The slider indicator allows users to know how many images the image slider has

Mockups

Epic: #2
Desktop's issue: #6

Link to Figma prototype

Info

Contains every information of the product: Prices, availability, attributes, quantity and add to cart button.
Also contains block reassurance module

UX and design explanations

• Unavailable colors are crossed out
• Buttons have 4px radius
• Selected combinations are highlighted
• The name of the selected color is indicated, useful for color blind people

Mockups

Default

Disable

Dropdown

Boxes

Product pack

Epic: #2
Responsive's issue: #27

Link to Figma prototype

UX and design explanations

• Navigation menu on the left allows users to go to navigate to other pages with only 1 click
• When adding a new address, the button "Save" has been replaced by "Add new address"
• When editing an existing address, the wording "Update" has been replaced by "Edit". The button is still "Save".

Mockups

List of addresses

Add new address

Edit address

Is your feature request related to a problem?

As a visitor, I want to know easily how many products are in stock when I am in the product page.
Currently, this information is displayed in the "product details" tab of the product page and not highlighted enough.

Describe the solution you'd like

If the "Display available quantities on the product page" is enabled in BO product settings page and if the product quantity is > 0, we should display the number of items in stock before “add to cart” button and just before the stock label:
Availability: X in stock - Delivered within 48 hours (in stock here is the "label of in stock product" defined by the merchant in product settings) in green #5A9166

The stock quantity should change according to the combination selected.

Detail of specs and mockups