The E-commerce: Search page window

Step 3 - Map >

The E-commerce: Search page window

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

The options in this window, which you can open by selecting the "E-Commerce: Search page" entry on the Map and clicking on the Edit button, are used to define which filters should be proposed and how the Products should be displayed in the e-commerce Search Page.

The window is divided into the following sections:

Search;
Settings.
Click to expand/collapseReference: The Search section

This section displays a list of available search tools: just click on a tool or filter to display it in the Search Page. Available tools and filters:

Search field: to search for a product by name and description. Use quotation marks to search by exact phrase: e.g., typing "blue t-shirt" only searches for products with both terms in the same order in the name or description.
Categories: to search for one or more categories.
Properties: search by Properties set for the products.
Price: to search by price, with a price range from the least expensive to the most expensive product in the catalog.
New Product: to search only for products marked "New".
Discounted product: to search for products that have been discounted, both singly and based on quantity.
Availability: to search only for products that are actually available.
Sort: to sort the search results.

In order to activate the Properties filters you first need to  set the Properties for the Products of your catalog on the Product Settings window.

Click to expand/collapseReference: The Settings section

The Search Page displays all the Products in the catalog that meet the search criteria: each Product is displayed in a separate Card.

Click to expand/collapse
Example for a Product Card on the Search Page

Product Cards include different elements: a part from the merely graphic ones, others take on the details you defined when setting up the Products using the Shopping Cart | Product Settings window. The elements you can find on the Cards are:

Background
Cover: the first picture of the product in the Image section of the Product Settings window is used here.
Name of the product,
Description;
Details: this includes the category, product models, availability, price, VAT display and the quantity field,
Button: to add a Product to the cart so to buy it.
Wishlist: to add a product to the Wishlist, namely the list of products customers may be interested in buying later.

If elements such as the cover or product models are not specified, the information is not included in the card.

If you are working with the Pro edition, both the icon for the Approximate quantity and the number indicating the Available quantity are displayed in the product card.

The first thing you can do to define the Card style is to choose the layout you prefer among the ones reported in the Cards Settings section:

Cover on the left, title and contents on the right

Title and contents on the left, cover on the right

Cover at the top, title and contents at the bottom

Title and contents at the top, cover at the bottom

Whichever type you choose, the name and/or image that may be included in the product card will be automatically associated with the link, created with the options in the Product Settings | Details window.

When you have decided on the display type, you can work on the following options:

Cards per row: how many product cards there are in a single row.
Rows per page: to set the maximum number of rows to be displayed in the Search Page.
Card height: the height in pixels of the product cards. The pictures of the products will be resized automatically according to the given height. If the product descriptions are too long to be displayed completely, a scroll bar is added.
Cards Margin: sets the pixel value of the distance that must be maintained between the cards.

The Card Style can also be defined using the following options:

Cover size (%): this defines the width of the cover picture with respect to the contents (if it is on the left or the right), or with respect to the card's height (if it is at the top, above or below the product name).
Cover margin / Content margin: these options indicate how much space (in pixels) is to left between the cover picture / contents (name and description) and the card's borders.

When you have defined the above options, you can then set the graphics for the various elements in the cards. Select the Element you want to work on in order to see the available options:

Visible: the element can be visible or invisible. This is not available for the Background or Cover. If the Details element is selected, you can specify whether information such as the Category, Availability and Price is to be shown, or not.
Font Type: this specifies the font, size and style of the text for the Name of the product, the Description, the Details and the Button. The menu shows the command for applying the Default Font (defined by the style of the Page Text item in the Text Style window), the list of safe fonts (those which are present on all devices and do not need to be published, and all the Google fonts and web fonts added in the Add web fonts window, which is opened by the Other font types command.
Text Color: this specifies the color to used for the text of the product's Name name, the Description, the Details and the Button. If you select the Details element, the text color is also used for the line under the Description.
Background Color: this specifies the color of the Background of the card and Button.
Thickness: this specifies the width of the borders of the Background of the card and Button.
Color: this specifies the color of the borders of the Background of the card and Button.
Rounded Corners: this gives the bevel value for the corners of the Background of the card and Button.
Drop Shadow: this applies a shadow to the Background of the card, setting the color, position, diffusion and size of it.
Fit to card: if selected, the cover picture will occupy the entire area of the card, in width and height, If the proportions do not correspond, the picture is centered and cropped. If this option is not selected, the cover picture is adapted to either the width or the height of the available space.
Show Category: this shows the category that the product was assigned to in the Shopping Cart | Product List window.
Show Quantity Field this displays a quantity field in the product card so that the customer can indicate how many items of a product he wants to add to the shopping cart.
Show Product Options: to display the Product Options, which are available if you activated them on the Shopping Cart | Product List section.
Show Availability: this displays both an icon for the Approximate quantity and the number indicating the Available quantity in the product card.

If you enable the Show Availability option, and there is at least one product which has this type of availability displayed, then the page that contains the Product Catalog Object must have a .PHP extension: use the File Name Format option in the Page Properties | Expert window to do this.

Show Price: this displays the product's price, with or without VAT, in the product card.
Type: specify whether you want to use a Text or an Image as the Button. In the first case, you can use the options to define the text link’s style. In the second case, you need to use the appropriate field to import the Image File to be used.
Margins: this sets the value (in pixels) of the margin between the writing and borders of the Button.
Add the Product without showing the Cart: this option is available for the Button element and you can use it to give Customers the possibility to order a product without displaying the Cart first.
Color: you can specify the color of heart-shaped icon which is used to add a product to the Wishlist.
Add the Product without showing the Wishlist: available for the element Wishlist only, with this option Customers can add the Product to the Wishlist without displaying it first.

In the Pro edition, you can add Ribbons to the product card, specifying:

Ribbon Type: you can define rosettes to add to product cards of a "New Product" or a "Discounted Product".
Image File: you can specify the image to be used for the rosette. Click on the arrow in the field to select an image from the library, or click on the button to import a graphic file (in .JPG, .GIF or .PNG format) of the image you want to use.
Alignment: you can specify how the rosette is aligned in the product card.
Width (%): you can specify the width of the rosette as a percentage of the product card's size.

Finally, you can use the options in the Options section to define:

Add the Product without showing the Cart: when a customer clicks on the Buy button, the product is added to the order, without being automatically redirected to the shopping cart.
Enable ShowBox Link over Image: this options enables a link to an enlarged version of the various pictures in the product card. These zoomed pictures are shown in the Showbox. If you have created a link in the Details section of the Product Settings | General window, it will replace this link.

You can customize the style of the Showbox: using the options in Step 2, in the Pop-up window Showbox window, you can define colors, shadows, opacity, entry effects, etc.

 


Read the guides:

-

How to create an e-commerce

-

How to work with the Product Catalog Object

-

How to create custom filters for the Product Search page