The Single Product Page - Rental and Second-hand

Modified on Tue, 12 Sep, 2023 at 4:54 PM

The Single Product Page provides all the details about a product.

Prerequisites : Getting started on Prismic

Mapping of the Single Product Page

Rental Product Page

Second-hand Product Page

Special case of a page for a product available for rent and for sale as second-hand.

TABLE OF CONTENT

Mapping of the Single Product Page

Elements of the mapping

1. Header title

General > Main > Baseline

Display the header if Single Product > Layout > Display Hero section = Show
For General > Main > Hero Banner, you can use the following formats:

- Desktop (1440 x 178px)

- XL (1920 x 178px)

- Tablet and Mobile (375 x 196px)

Alternatively, you can set a background color by going to General > Main > Hero Background Color, which will be displayed if the Hero Banner is empty.
You also have the option to add a black overlay over the image by setting General > Main > Hero Banner Overlay = true.

Versus without a fade:

3. Return button

General > Common Product/Pack Texts > Previous_button

4. Image size compared to the text (desktop only)

The product photo is always on the left, and the text is on the right, and this is not customizable.
The image size is indicated based on the width occupied by the description text: Single Product > Layout > Column Layout:
- 2/3 - 1/3: Ideal if the images are of very good quality and there is little text because the image takes up 2/3 of the screen width, and the text takes up the remaining 1/3.
- 1/2 - 1/2: Equal distribution in screen width between the image and the text.
- 1/3 - 2/3: The image only takes up 1/3 of the screen width, ideal if the image is of poor quality.

5. Product name

Comes from the product sheet defined in the Sylius OMS.
Size, color, and font are defined during the CSS styling performed by Lizee developers.

6. Product price

The amount comes from the product variant in the Sylius OMS
The unit comes from General > Config > [Configuration]

7. Total amount over the duration of the rental (from start to end date)

Optional, to be activated via Single Product > Main > display total rental price = true.
Always displayed below the daily price.
A phrase to be completed, where the total amount and the number of rental days are inserted between the text snippets:

'Total rental price text' (no default value) + Total amount + Currency + 'total rental price for' (default: for) + Duration + 'total rental price day singular or plural' (depending on the rental duration, default: day or days).

8. Product description

Comes from the product description in the OMS.
Respects the formatting of the description, including bullet lists, images, and hyperlinks.
In the example, indicating that a product is available in different colors is done in this way: Indicate that a product is available in different colors.

9. Sizes

General > Common Product/Pack Texts > Sizes. Par défaut : Tailles

10. Product unavailable for the selected dates

For products with multiple sizes or variants, this mention only appears after clicking on a size.
The mention is valid for the selected dates in date-to-date mode, based on the current stock in flex and classic subscription.
Possible texts from General > Stock Texts
- few_products_left: For example, "Only a few products left."
- back_soon: For example, "Coming back soon."
- in_stock: "In stock."

11. Display of the next availability of the product (date-to-date only)

To set up an alert for the return of products in stock for Flex and Classic subscription, follow these steps:
Enable the Availability Checker for DAD (date-to-date) mode: Single Product > Availability Checker > Availability Checker (DAD only) = Enable
Define the text displayed above the "Louer" (Rent) button: Single Product > Availability Checker > Availability Checker Text
Provide a link to display the availability calendar: Single Product > Availability Checker > Availability Checker Link

Title of the modal: Single Product > Availability Checker > Availability Checker Modal Title. For example: "Check Availability."
A brief explanatory text: Single Product > Availability Checker > Availability Checker Modal Description. For example: "The item is not available when the dates are grayed out."

Implement an alert for the return of products in stock (Flex and Classic subscription)

Displayed above the product description, for example:

Title "This kit is no longer in stock": Single Product > Main > Single product Main stock alert Title
For packs, the alert is placed in the same location within Single Product; only the title changes, which is taken from Single Product > Main > Single Product Main Stock Alert Pack Title.
Phrase "To be alerted when it is back in stock...": Single Product > Main > Single product Main Stock alert Text
Placeholder (example text in the email field to indicate the format): Single Product > Main > Single product Main Stock alert input placeholder
Button label (default: "Notify me"): Single Product > Main > Single product Main Stock alert Button
Red error message when the email address is not valid: Single Product > Main > Single Product Main Stock Alert Already Fail Message.

Green message when everything is successful after clicking the button: Single Product > Main > Single Product Main Stock Alert Validation Message. Default: "Thank you for your interest in this product. You will be notified by email as soon as it becomes available again."

Orange message if the customer has already set an alert for this product: Single Product > Main > Single Product Main Stock Alert Fail Message. Default: "You have already provided this email for this item."

12. Rent button

Text in Single Product > Main > choose_button
Option to choose its position: Single Product > Layout > 'Add to cart button'
- Above the product price and description
- Below the description
- Both above and below the description
For products with variants, the button is grayed out until a size is chosen. To better guide the customer, you can use a tooltip (desktop version only) to indicate that a size must be selected: Single Product > Main > Choose button tooltip

13. Try-on button

To enable the try-on option for certain products, check the 'Try-on enabled' box in the variant of the relevant product sheet in the Sylius OMS.

By default, the button label contains the try-on fee, which is specified in the 'Try-on price' field of the product variant. This fee covers the entire rental duration and is not proportional to the duration.
There is an option to display text before the try-on price, in Single Product > Main > 'try_out_button'. For example: "Try-on option |"
The operation of the try-on option at Lizee is as follows: You can only try on a product if there is another product in the cart available for rent. So, "1 rented product entitles you to try on 1 product." If there are 2 products available for rent in the cart, you can try on 2 other products, whether they are of the same reference as the rented products or not.
A tooltip can be added to indicate when the try-on button becomes active: Single Product > Main > 'try out tooltip'

14. Tab of information identical on all product and pack sheets

General > Common Product/Pack Texts > '+ Add a new element in Informations'
Title in Label, Content in Content
Hyperlinks are accepted
You can display this content in tab form (as shown in the mapping example) or as an accordion, as described below.

15. Display of other product photos

Either in the form of a carousel with navigation arrows (same for mobile): Single Product > Layout > 'Product layout' = Carousel
Or one below the other: Single Product > Layout > 'Product layout' = Sticky, as in the preview below:

16. Hyperlinks common to all product and pack sheets

You can add hyperlinks, displayed in a small size, identical on all product and pack sheets, to reassure the customer, for example.
General > Common Product/Pack Texts > '+ Add a new element in bottom menu links' and provide the Name and Link.

17. Associated products

Associated products displayed if Single Product > Main > Display associations = Show
Definition of associated products to the product sheet in Sylius > Product sheet > Association > List of products

Title displayed above associated products : Single Product > Main > Association text
If multiple type of associations are defined, they will all have this same title.

18. + button on associated products

Possible to display it or not with Single Product > Main > 'display add to cart button on associated item'

19. Label "Second hand" under the product name

TakeBack > Product Page > Second Hand label

20. From

TakeBack > Product Page > Price start

21. Initial price

TakeBack > Product Page > Original Price

22. Select a size

General > Common Product/Pack Texts > Sizes

23. Condition

TakeBack > Product Page > state label

24. Specific comment to this second-hand product

TakeBack > Product Page > take back description

25. Rental and Second-hand tabs

Useful only for the brands offering rent and second-hand in the same website
TakeBack > Product Page > Tab label Second Hand
TakeBack > Product Page > Tab label Rental