The Homepage

Modified on Mon, 20 Nov, 2023 at 4:52 PM

The homepage is the first page a user sees when visiting a website. It serves as the main interface to present an overview of the content, functionalities and navigation of the site, allowing users to orient themselves and quickly find the information they seek.

Prerequisites: To get started on Prismic

Here is an example of a Homepage for a demo site of Lizee.

Find details about the part you are interested clicking on the number next to it.

Homepage mapping

TABLE OF CONTENT

Homepage mapping
- 23. Instagram

On the homepage (only), the header can be transparent, which prevents you from seeing the color you have defined for other pages. If you want it to be displayed over the Main Hero image of the Homepage (see point 12 of this page), check "Classic" in Homepage > Main. (remember to fill in the "transparent logo", which is only used on the homepage, when the header is transparent)
All other changes can be made in General > Header
Click on the small square to access the color picker or directly add the hexadecimal value
- Header background for the bar background
- Header text color for text color
- Header text hover color for text color on mouseover
Icons (shopping cart, account, faq) also take on the text and mouseover colors.
"Header sticky" option: only on scroll up = the header banner is no longer visible when you go down the page, it is only visible when you go up. Always = the banner remains even when you go down the page.

Modification of the text possible in the Banner document (exit from the Homepage document).
Ability to put hypertext links to other pages and small logos as in the example below
Option "is displayed banner on all pages": true = the banner is displayed on all pages, false = it is displayed only on the Homepage.
Banner color: editable only in css

2. Main Logo

Image uploaded in General > Main > Logo
Dimensions: 74 x 50 px (otherwise request css to make it bigger)
See part 0. Header to put a different logo when the header is transparent.

General > Header > Click on a big dark gray "+"
Choose "Primary Menu Item"
Fill:
- "Nav link": page to which the menu link will lead (if direct click on the menu without going through the sub-menu)
- "Nav link label": label of the menu, visible directly in the header
Ability to change the order of menu items with the up and down arrows, to the right of the Primary Menu Item bar

Add a submenu

In "Repeatable zone", in a "Primary Menu Item" block, "General header submenu background color", put as many submenus as desired, operation identical to the Primary Menu item.
Ability to change the order of submenu items by dragging and dropping from the 3 small bars at the end of each submenu.

Always in General > Header, in the part above > "General header submenu background color" for the background color of the submenu
"General header submenu text color" for the color of the submenu texts

The menu can be positioned in the center of the page as in the mapping or on the left, like this:
It is also possible to have no menu at all
Adjustable with the drop-down list in General > Header > Main menu (desktop only): Left, Center or No Menu

The 3 bars that represent the burger menu can be left or right, set it in General > Header > Burger Menu (mobile only): No Menu, Left, Right
The logo can be positioned in the center or on the left, with General > Header > "Logo Position (Mobile Only)"
To change the text used to close the burger menu, go to General > Header > "Menu Close Text". By default, the text is "Close" in French.

Direct access to other web pages, without submenu
Displayed to the left of the FAQ, account and shopping cart icons in desktop mode; under the menu in mobile mode
To be added from General > Header > Click on the big dark gray "+" > Secondary Menu Item
"Nav link": page to which the secondary menu link will lead
"Nav link label": Label of the sub-menu, visible directly in the header

5. Access to the customer account

To change the label of the customer account access button: General > Header > "Account Menu text"
For the link to always lead to the account login page before opening the account, set "account_link_to_register" to "true"
To only see icons and not labels in desktop format, set "Menu icon only" to "true" (in mobile format, you cannot display the labels)
To modify the icon for accessing the customer account: Account > Login > Account button

6. Access FAQs

By default, the link leads to https://urlsite/faq
If you want to put a custom link, put it in General > Header > "Custom faq link"
To change the label: General > Header > "Faq menu text"
To only see the icons and not the labels in desktop format, set "Menu icon only" to "true" (in mobile format, you cannot display the labels)
To change the FAQ access icon: FAQ > Main > Faq button

6a. Multi-languages

If several languages are available on the site, initials to change languages are between the FAQ button and the basket button in the header
The pop-up informing that "Be careful, you are about to change languages. If you have items in your cart, your cart will be lost." appears (English pop-up by default)
To change these texts: General > Header
- "change language modal title" to replace 'Change language' in the title
- "change language modal text" to replace 'Be careful, you are about to change languages. If you have items in your cart, your cart will be lost.'
- "change language modal cancel text" to replace 'to cancel'
- "change language modal validation text" to replace 'Change language'

7. Access to the basket

To change the wording of the button which wide opens the basket: General > Header > "General header basket menu text"
To only see icons and not labels in desktop format, set "Menu icon only" to "true" (in mobile format, you cannot display the labels)
To modify the basket access icon: Basket > Main > Basket button

8. Title and subtitle

In desktop mode, possibility to display the title and the subtitle on the left, in the center or on the right: Homepage > Main > Hero Layout (Desktop only): Left, Center or Right

When titles are in the center, the product category thumbnails are in the center and the Header image or video takes up more space vertically.

To the left :

In the center :

To the right :

The color of the title, the subtitle and the sentence below adjust with Homepage > Main > "Hero text color"
Main title defined in Homepage > Main > "Main Title" (possibility to wrap as above) -> all text will be in H1 (css), regardless of the layout made in Prismic
Subtitle defined in Homepage > Main > "Description Text" -> layout taken into account this time.

9. Date picker (date picker)

Possibility to change the text that appears under the date calendar in General > Date Picker > "small text under calendar"
Change the label of the "start" or "Rent" button: General > Date Picker > "start_button" (See here if this button does not work)
The content of the "confirm" button is used in the Shop, pack and product pages, when the person modifies their rental dates at the top of the page
If a price reduction is applied according to the selected dates, fill in the beginning of the text for the tooltip that appears once the dates have been chosen. General > Date Picker > "you save". The percentage is added automatically at the end of the message. For example: "Degressive prices: with these dates, you save" + percentage added automatically.
Possibility of detailing a duration of less than one day when the start and end dates are identical. General > Date Picker > Morning, afternoon, full day and evening. (don't forget the CleverCloud variable ENABLE_HALF_DAY )

When you choose morning or afternoon, the rental period is half a day. When you choose "Full day" or "evening", the duration is one day. 
For the "evening" option, the rental date is not adjusted accordingly, which can be a little disturbing for the customer (to be clarified in the explanations given in the FAQ for example).

9a. Additional button

Ability to add additional buttons by going to Homepage > Main > Hero cta > Add a new element in Hero ctas
"CTA link": url to which the button leads
"CTA Label": what will be displayed in the button
CTA style: Contained: the color will be present throughout the button, Outlined: only the outline will be colored, the background is transparent
CTA color: primary and secondary are defined at the css level, identical for the whole site.

10. Statements

Transparent thumbnails, with an often openwork logo, used on the homepage and in emails if desired
Add from Statements > Main > Add a new element in Statements
To be activated in the homepage via Homepage > Main > Show statements = true
Addition of a sentence in "bottom sentence" and a following link in "link"

11. Main Hero Products

Ability to add thumbnails with image + text, displayed in carousel via the option Homepage > MainHeroProduct > Use carousel = true + Homepage > Main > Show Featured Products =
No limit on the number of thumbnails
Be sure to put a reduced image size so as not to lengthen the loading time of the homepage
Put a link to which each thumbnail will lead
The image format respects what is defined in General > Config > Thumbnail ratio (portrait, square, landscape)

12. Header Image or Video (Main Image or Main Video)

If a video is added in Homepage > Main > Background video, then it takes precedence over the display of the image defined in Homepage > Main > Hero Image.
Video of maximum size 1Mb, mp4 format, recommendation 10s approximately (go here to compress)
Ability to put a different Hero image depending on the desktop (1920 x 855 px), tablet (1440 x 855 px), mobile (1024 x 855 px) format
Mobile format, using video (750 x 1214px) added in Background Video Mobile if Enable Background video mobile is enabled, otherwise using 3rd image from Hero Image.

What if a white rectangle wanders in the middle of the Image hand?

Go to HomePage, MainHeroProducts and remove the image which is there by default:

Could be added elsewhere in the page (except above the Header image or video) but makes more sense just below the Header image or video. -> Adjustment via the increasing position of the sections at the bottom of Homepage > Main
Homepage > Menu > Display Menu: Enabled > Add a new element in Menu list
No limit on the number of items on the menu, more a matter of visual balance

14. Free Link

Homepage > Menu > CTA Label and Link menu: Last item in the menu, on the far right of the menu visually

15. Savings

Adjustable position in relation to other blocks on the page -> Adjustment via the increasing position of the sections at the bottom of Homepage > Main
Homepage > Savings > Display section = true
Button that redirects either to the shop or to the packs (Link destination): Homepage > Savings > Link Label for the label of the button
Title centered above block: Homepage > Savings > Section Title
Fixed structure: "For X€, you can..." in the left part, "buy X products or rent X products" in the right part. The best is to try the block to see what it gives before adjusting
- Start saving text: "for"
- End saving text: "you can"
- Buy Savings text: "buy"
- Rent saving text: "or rent"
- In each element of Saving range:
  - Budget: amount that will be in the left part
  - Buy; what can be bought with this amount
  - Rent: what can be rented with the same amount.

16. Hero section

Section that allows inserting an image that spans 50, 60, 70, 80, 90, or 100% of the screen width with text overlaid on it.
Recommended image sizes in SVG:
- 1920 x 1200 px (desktop)
- 1440 x 900 px (tablet)
- 1024 x 1024 px (mobile)
Configurable in Homepage > Hero Sections with "is_herosections_Active" set to true.
If multiple Hero Section blocks are added, they are necessarily placed one after the other.
The text can be aligned to the left, center, or right: Align content.
Use title sizes in ascending order H2, then H3, then H4, rather than H2, H4, and H3, as not adhering to this order is detrimental to SEO -> in Hero Content.
Ability to include a link within the body of the text.
Hero CTA Link and Hero CTA Label to populate the button that appears after the text, still on the image.

17. How it works

Section containing at least 3 side-by-side blocks commonly used to explain how the service works.
Each of the blocks includes an image, often an icon (80 x 80 px, preferably in SVG), followed by a centered title and explanatory text below.
Homepage > HowItWorks > Display section = true
"Display slider hiw section on mobile": If set to false, the How It Works blocks appear stacked on top of each other on mobile (left image). If set to true, you need to slide to the side to view them (right image).

2 description texts displayed above the How It Works blocks: descHowItWorks1 and descHowItWorks2
Button at the end of the block: "cta how it works" for the button label and "cta hiw link" for the button destination.

18. Information

Structure of 1 image on one side and text on the other (image followed by text in the mobile version).
Homepage > Information > Display section = true
"Background" allows setting a background color behind the entire image + text section (extending to the edges of the screen).
Image size: 476 x 400 px, preferably in SVG.
To maintain the image dimensions, set "Fullscreen Layout" to False; otherwise, the images are stretched to fill half the screen (or the entire screen in the mobile version, with text below).
Possibility to add multiple elements (alternating between left and right, for example) that follow each other sequentially.
Definition of the image side (and hence, by default, the text) via "image align."
Definition of text alignment as left, center, or right via the dropdown list "align content."
All content possibilities present in the roadmap for this section.

19. Universe - Product categories (grid or carousel)

Common settings for sections 19, 20, and 21:

The sections 19, 20, and 21 are activated via Homepage > Universe > Display section = true.
If at least 2 sections are filled, they are displayed in the following order: 19, then 20, then 21.
The choice between grid and carousel is the same for all 3 sections: Layout: Classic Grid or Carousel (if there are not enough elements to fill an entire row in carousel mode, the elements are displayed on the left).

The image size is defined in General > Config > 'Medium image size' (in pixels).
The design of the text display can only be modified via CSS (to be requested in your revisions).
By default, it is at the bottom left, within a white frame for the carousel. It is centered in a box above the image in grid mode, as follows.

It is possible to add a centered title above the grids or carousels: 'title_universe'.
The image format adheres to what is defined in General > Config > Thumbnail ratio (portrait, square, landscape).

Settings for the carousel:
- With or without arrows on the sides. 'Carrousel arrows': hide or show.

Spacing between thumbnails (desktop only): no spacing, small, medium, large. 'Carousel cards spacing': no spacing, small, medium, large.

Parameter for the grid: number of thumbnails in width before moving to the next row. 'Classic Grid Columns,' between 3 and 6. For example, with 4 as shown below:

Parameters for product categories:

To activate, use 'Enable taxon product' = true.
Title for the grid or carousel of product categories: 'subtitle_universe1' -> Aligned to the left by default, not possible to center without CSS customization.
Description paragraph aligned to the left: 'paragraph_universe1'.
Definition of the maximum number of categories to display, a mandatory parameter for the module's proper functioning: 'Product Taxon number limit (MANDATORY)'.

The product categories displayed are not chosen individually; by default, they are the first categories from the list defined in Sylius, under "Product Categories." For more control over which product categories are displayed, please refer to the "Manage Product Categories" section.

The image representing a product category comes from the media associated with that product category in Sylius.

20. Universe - Products or Packs (grid or carousel)

Grid or carousel of free-form elements consisting of an image with a title, a subtitle, and a hyperlink behind the thumbnail.
Typically used to showcase products or packs, with their price as the subtitle.
Activation via Homepage > Universe > Enable Products Carousel = true
Title for the grid or carousel: 'subtitle_universe3' -> Aligned to the left by default, not possible to center without CSS customization.
Description paragraph aligned to the left: 'paragraph_universe3'
The carousel's content is entirely configured using the 'Carousel Products' elements. If you display a price per day, don't forget to include the unit. The hyperlink is not mandatory but recommended to direct users to the featured product.

21. Universe - Packs categories (grid or carousel)

To activate, use 'Enable taxon pack' = true.
Title for the grid or carousel of pack categories: 'subtitle_universe2' -> Aligned to the left by default, not possible to center without CSS customization.
Description paragraph aligned to the left: 'paragraph_universe2'.
Definition of the maximum number of pack categories to display, a mandatory parameter for the module's proper functioning: 'Pack Taxon limit number (MANDATORY)'.
The product categories displayed are not chosen individually; by default, they are the first categories from the list defined in Sylius, under "Pack Categories." For more control over which pack categories are displayed, please refer to the configuration of your Sylius settings and categories.

The image representing a pack category comes from the media associated with that pack category in Sylius.

22. Commitment + Community

Different tabs on the Homepage but always used together, with "Commitment" on the left and "Community" on the right. In the mobile version, "Commitment" is placed above "Community." Here are some examples:

These sections can be activated using "Homepage > Commitment > Display section = true" and "Homepage > Community > Display section = true." The background color of the commitment frame can be adjusted via CSS; please request this in one of your revisions.
You can add an icon (60 x 60 px, preferably in SVG), title, and description as follows:

For the Community section, you can adjust the text color for "Savings" to match your default brand colors using CSS customization. The image size should be 117 x 131 px. Please make these adjustments through CSS during your revisions.

23. Instagram

Unlike other sections, this part is not in the Homepage document because it is also used on the order confirmation page.
Images are not extracted from real Instagram posts and must be added manually to 'Instagram + Add a new element in instagramImages.'
The image size should be 355 x 355 px, preferably in SVG format.
On mobile devices, only the first 4 images are displayed.
Colors, font size, and rounding should be defined through CSS customization during your revisions.

Please follow the example below for filling in this section:

24. More information

A section with the exact same functionality as the "Information" section, which can be positioned at a different location on the page.

25. Testimonials

You can activate this section via "Homepage > Testimonials > Display section = true."
It displays thumbnails containing a cropped image to fit into a circle (150 x 150 px, preferably in SVG), a title, a subtitle, and a description.
In mobile mode, these thumbnails are displayed in a carousel format.
Here's an example and an idea for customization:

26. Homepage FAQ

You can activate this section via "Homepage > FAQ > Display FAQ = true."
This section is entirely independent of the FAQ page on the website, meaning that any modifications made to the FAQ on the homepage should be mirrored on the general FAQ page and vice versa.
In general, it contains a selection of key questions commonly asked by customers, with the aim of immediately reassuring customers.
You can use 'Faq title' and 'Faq description' to add optional title and description text.
The design of questions and answers can be customized through CSS; please request this during your project. Here are some design examples:

You have the option to automatically close an open question when opening a second question by setting "Homepage > FAQ > 'close others on click' = true."
Additionally, you can configure a button at the end of the FAQ section using 'Faq CTA Label' for the button label and 'Faq CTA' for the button destination.

27. Partners

You can activate and configure this section with thumbnail images and hyperlinks behind them in "Homepage > Partners > Display section = true."
The ideal format for the images is 300 x 300 px, preferably in SVG format. There should be no margin between the thumbnails, and no specific centering is required.
Here's an example:

This section is not mandatory and can be activated via "General > Footer > 'Show Footer Top' = Show."
You can set the left phrase in "General > Footer > 'Footer Top Baseline.'"
For the right button, you can configure the label with 'Footer Top Link Label' and the link with 'Footer Top Link.'
Colors can only be adjusted through CSS customization by developers.

The footer logo is taken from "General > Footer > footer_logo." It should ideally have a size of 500 x 200 px and is preferably in SVG format.

30. Baseline

The tagline is displayed adjacent to the logo and can be configured in "General > Footer > Footer tagline."

31. Contact & FAQ buttons

The FAQ button, not visible on the roadmap, could be displayed to the left of the contact button (always side by side in the mobile version).
The redirection pages for the buttons can be set in "General > Footer > 'Contact mail'" and 'faq link'.
Tip: To enable the direct opening of an email template behind the button, use 'mailto:email_address' in the link, as shown below.

You can adjust the label for the Contact button in the "General > Footer > 'contact us button'" section, which is located further down the page.

You have the option to add icons and links to your brand's social media profiles via "General > Footer > '+Add a new element in Social Networks'."
Please note that the label for these social media icons is not displayed. The recommended size for the logo icons is 24 x 24px, preferably in SVG format.
The social media icons and links are displayed under the Contact and FAQ buttons in the mobile version of the footer.

You can add as many links as you want in the "General > Footer > '+Add a new element in Social Networks'" section.
By default, these links are displayed one after the other in the mobile version, as shown in the image. If you prefer them to be vertically aligned, you can request this alignment during the CSS customization phase. Here's an example:

You can add new elements to the footer menu by going to "General > Footer > '+ Add a new element in footer menu'" and providing a link and a label for each element you want to add.

34. Powered by Lizee

Mandatory (except negociation in your contract)
Text in General > Footer > Copyright