Shop page

Modified on Thu, 14 Dec, 2023 at 1:31 PM

The Shop page displays all the products side by side, whether they are for rent or for purchase.

Prerequisites: Getting Started with Prismic

What should you do if the Shop page isn't displaying? You must have a product category called "Category" and place the other categories within it in Sylius. Please check this.

Mapping

Shop page mapping

Filters

Classic Subscription plans

TABLE OF CONTENTS

Mapping

Mapping Elements

1. Subtitle

Optional, to be placed in Shop > Main > Hero Top Title
Color coming from General > Main > Hero Text color (please note, this color is also applied to the main title above the main image or main video on the Homepage)

2. Title

Shop > Main > Hero Title (max 230 characters)
Title color of the Shop adjustable in General > Main > Hero Title color
Banner color of the shop in General > Main > Hero Background color
Possibility to automatically vary it based on the selected product category by enabling Shop > Main > Use taxon title = true (beneficial for SEO and user navigation).

General > Main > Hero Banner : desktop (1440 x 178px), xl (1920 x 178px), tablet and mobile (375 x 196px)

4. Confirm button(identical for the packs page)

General > Date picker > Confirm button

5. Date promises

Funnel > Shipping > 'Delivered on' : Livré le
Funnel > Shipping > 'To return before' : A retourner le

6. Shop description

It's important to know that there are two display modes for desktop: horizontal and vertical. The horizontal mode is the most commonly used. In mobile, these modes have no impact.
Adjustable via General > Config > Page Shop Layout: Full width (horizontal) or Column (Vertical)
Horizontal Mode:

Vertical Mode:

The description and delivery box are optional.
In the mobile format, they can be collapsed under a "Learn more" button by enabling Shop > Main > 'is display accordion on mobile page' = true. You can choose the name of the accordion in 'accordion shop title'.

Title in Shop > titleShop
Description in Shop > Shop description
To preserve line breaks and other formatting in your description, set 'raw formatted shop description' to true.

7. Delivery box

Comprised of a logo (60 x 60 px) and text.
Color can be modified through CSS only.
Enabled with 'Has shipping card' = true.
Fill in shipping image and shipping description.

8. Filters button

Shop > Filters > Filter

9. Show only available products

Checkbox is not mandatory.
By default, when you arrive at the shop, it is checked so that only available products are displayed.
If there are no available products in a given category, the message from Shop > Main > 'no stock available text' is displayed in the middle of the page. (e.g., "This category of products is not available for rent in your store.")
Shop > Main > activate 'show only available checkbox' = true
Shop > Main > 'Show only available text'. Default: 'Show only available products

10. Packs button

Only if the pack page is activated (General > Config > 'Pack page available' = true)
Shop > Main > 'shop to packs button'

11. Display product price

Translation of the mention "day" or "month" in General > Config > 'Day or month' and 'Day or month short' for the short version of the price.
If discounts are applied based on the duration, it is possible to display:
- The price without a discount, even if there is a promotion -> General > Config > 'discounted price display format' = 'price without discount'.
- The discounted price only -> General > Config > 'discounted price display format' = 'discounted price only'.
- The old price hidden and the discounted price -> General > Config > 'discounted price display format' = 'discounted price with details'.

The "old price and discounted price" option doesn't appear for packs; you only have the choice between the price without a discount and the price with a discount.

For the Flex model: Displaying product prices per day instead of per month can be enabled in General > Config > Display flex price a day = true. This allows you to display the price per day in:
- The shop
- Product pages
- Cart
- Customer account
- Packs

12. Select quantity

If the product has only one size OR if a size filter has already been applied, then you can display the quantity selector directly.
If the product has multiple sizes, you should display the size selection modal (see point 14).
If you don't want the quantity selector and prefer just a "+" button: General > Config > Quantity selector = false. In this case, you will have a simple "+" button to add the product to the cart for products with only one size or if the size is already filtered.
If you don't want the "+" button or the size selector because you want users to enter the product details before adding it to the cart: General > Config > 'prevent adding to cart without details' = true.

13. Image format and size

There are four possible image formats, and the one chosen is also used for the MainHeroProducts on the Homepage.
Images are cropped to fit the chosen format, which can create a zoom effect.
Tip: Import images of the same format for all products in Sylius to maintain a cohesive look.
General > Config > Thumbnail ratio:
- Square
- Portrait
- Landscape 4:3
- Landscape 16:9

The size of images directly depends on the number of products to be displayed per row on the desktop: General > Config > 'Page shop desktop columns': 3, 4, 5, or 6

For products with multiple available sizes, the "+" button allows access to the size selection modal.
Please refer to point 19 for the configuration of this modal.
If you don't want the "+" button or the size selector because you want users to enter the product details before adding it to the cart: General > Config > 'prevent adding to cart without details' = true.

15. Price of the product to buy

The price of products available for purchase comes from Sylius, within the product details.
It is possible to display products available for purchase alongside products available for rent if they are placed in the same product category in Sylius.
You can also display a small text indicating that the product is available for purchase: General > Config > 'display buyable mention'. For example, "(for purchase)".
For second-hand products, a "second-hand" label is directly added to the product thumbnail.

16. Sold out

Shop > Main > Sold out
This field is only applicable to the Shop page and not for the Single Product, Packs, or Single Pack pages.

17. Previous and Next buttons

Either you have these buttons and, as a result, product pages, or you have the block described in point 18 to load more products. For buttons, choose "pages" in Shop > Main > Pagination mode.

Shop > Main > Pagination Previous
Shop > Main > Pagination Next

18. Button to load more products: "See more"

Either you have this "See more" block or the "Previous" and "Next" buttons described in point 17 of this article. For "See more," choose "Load more" in Shop > Main > Pagination mode.

Displaying 48 products by default, and with each additional load, the number can be changed via Shop > Main > product_limit_per_load.
Button label: Shop > Main > Load more button.
Beginning of the sentence (by default "you have seen"): Shop > Main > you have seen XXX.
End of the sentence (by default "items on"): Shop > Main > items on XXX.

Shop > Size Modal > 'Title size modal': For example, "Select the size before adding to the cart:"
Shop > Size Modal > 'product size modal cta add': Button to add to cart.
Display of available sizes: As long as the number of sizes is below a certain threshold, the sizes are displayed in boxes; above that threshold, they are displayed in a dropdown list. This threshold is defined in General > Config > Modal size select display limit. If this number is set to 5, sizes will be displayed in boxes only if there are a maximum of 5 sizes; if there are 6 or more sizes, they will be displayed in a dropdown list.

20. Filter pannel

For a rental website, the default filter panel includes:
- Categories
- Sizes
- Price range

For a second-hand website, the default filter panel includes:
- Categories
- Sizes
- Product conditions

You can add more different filters by adding attribute values to the products in Sylius.
To modify the names of size filters, refer to the article: "Manage Product Categories."
Automatically, when the number of categories exceeds 10, an accordion groups all the categories at the top of the filter panel. This behavior cannot be modified.

The order of product categories directly depends on the order in Sylius. To change this order, refer to the article "Manage Product Categories."
To see the impact of subcategories, also refer to the article on product categories mentioned above.
If you want to remove the price range filter, request to add the front environment variable: NO_PRICE_FILTER = True.

On Prismic > Shop, you can configure various fields related to the filter panel:

filter : Corresponds to the button on the shop page. Default value: Filters
close button: Corresponds to the button for closing the filter panel. Default value: Close
categories title: Corresponds to the title of the accordion that groups all categories (when there are more than 10). Default value: Categories
apply button: Corresponds to the button for applying the selected filters. Default value: Apply
reset button: Allows resetting all selected filters. Default value: Reset
states: Corresponds to the label for displaying states. Default value: States
filter_by: Corresponds to the text above the sizes. Default value: Filter by:
filter_price: Corresponds to the title of the "price range" accordion. Default value: Price:
price_fork: Corresponds to the text above the price range. Default value: Select your price range
between: Corresponds to the text before the lowest price. Default value: Between
and: Corresponds to the text after the lowest price and before the highest price. Default value: and
return: Corresponds to the button for going back when a category has been opened to show subcategories (child categories). Default value: Back

21. Presentation box for subscription plans

Title: Classic subscription spec > RateCard > Title
Subtitle: Classic subscription spec > RateCard > subtitle (default: "Your package adjusts based on your selection.")

22. Maximum products

Article: Classic subscription spec > RateCard > article singular and article plural
Maximum: Classic subscription spec > RateCard > maximum