integration_documentation:instant_frontend:product_listing
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
integration_documentation:instant_frontend:product_listing [2023/02/28 08:12] rihad [CI] |
integration_documentation:instant_frontend:product_listing [2023/03/29 15:54] (current) rihad |
||
|---|---|---|---|
| Line 23: | Line 23: | ||
| * **Navigation active**: Activates the Product Listing for all categories. | * **Navigation active**: Activates the Product Listing for all categories. | ||
| + | ==== General ==== | ||
| - | ==== Product ==== | + | {{:account21:if_general_tab.png?600|}} |
| - | {{:account21:plp_product.png?1200|}} | + | * Show Summary |
| + | * Brand display: whether below/above the product name or hidden | ||
| + | * Specify the property that should be used to display variants (at the moment only color variants are supported) | ||
| - | * **Show product code (SKU)**: The product code is whichever ordernumber was exported first. If no ordernumber was exported, the ID is used in case of CSV export, and nothing is available in case of XML export | + | ---- |
| - | * **Show summary**: Show the summary of the product in the product box. | + | |
| - | * **Brand display**: Choose where the brand is displayed in the product cart. | + | |
| - | * **Image Orientation**: Adjust the orientation the product image. | + | |
| - | * **URL of product thumbnail image**: Specify the URL to your product thumbnail. | + | |
| - | * **Show cart button**: Define the text and enable the icon of the Add to Cart Button. | + | |
| - | * **Enable quick view**: Clicking on the product card will open the an overlay with some product information, Details and the add-to-cart button. | + | |
| - | * **Image gallery**: Define multiple product images and configure how they should be displayed. | + | |
| - | <note important>Only information provided within the datafeed can be shown. If you notice discrepancies please check your datafeed or [[mailto:support@findologic.com|contact our support team]].</note> | + | ==== Product Image ==== |
| + | |||
| + | {{:account21:if_product_image.png?600|}} | ||
| + | |||
| + | * Set the behavior for the Image gallery in the Quick-View Overlay | ||
| + | * Image Orientation: Auto, Portrait or Landscape Mode will change the orientation for the whole Product Listing Page | ||
| + | * Setting of the Image Gallery Behavior and definition of the related image properties | ||
| + | * Set the URL of the product thumbnail images | ||
| + | * Setting of the related image properties | ||
| + | |||
| + | ---- | ||
| + | |||
| + | ==== Meta ==== | ||
| + | |||
| + | {{:account21:if_meta_tab.png?600|}} | ||
| + | |||
| + | * Show product code: the product code is whichever ordernumber was exported first. If no ordernumber was exported, the ID is used in case of CSV export, and nothing is available in case of XML export | ||
| + | |||
| + | * Set the properties for: | ||
| + | * Delivery Time information | ||
| + | * Immediately deliverable products information | ||
| + | * Additional Text | ||
| + | |||
| + | ---- | ||
| ==== Price ==== | ==== Price ==== | ||
| - | {{:account21:plp_price.png|1200}} | + | {{:account21:if_price_tab.png?600|}} |
| - | * **Show product price**: Show/ hide the product price. | + | * Show/hide product price |
| - | * **Show decimals**: Toggles the use of decimals. If deactivated the price will be rounded. | + | * Show/hide decimals |
| - | * **Property containing old price**: Define if you want to show an instead price of the product (If available in the Export). | + | * Define properties for the old price and the base price if needed |
| + | |||
| + | ---- | ||
| + | |||
| + | ==== Cart ==== | ||
| + | |||
| + | {{:account21:if_cart_tab.png?600|}} | ||
| + | |||
| + | * Within the cart tab you can specify whether the cart button should be shown or hidden on the product list page | ||
| + | * Add an Input Field for the article count on the Product cards - Note: in that case only the icon for the cart will be displayed on the card | ||
| + | * Your own behaviour can be used by providing the Post URL or use the shops specific default implementation | ||
| + | * If using the own shops behaviour you can also specify the property for the stock data | ||
| + | |||
| + | ---- | ||
| ==== Badges ==== | ==== Badges ==== | ||
| - | {{:account21:plp_badges.png|1200}} | + | {{:account21:if_badges_tab.png?400|}} |
| - | * **Property**: Specify the name of the property that should be used as indicator for a certain badge. | + | * In the badges Tab you have the possibility to add multiple badges that should be displayed within the product cards |
| - | * **Text**: Specify the text for your badge. | + | * Set the triggering property, the relevant color for the badge and the Text that should be displayed |
| - | * **Background color**: Specify the background color of your badge. | + | |
| - | <note tip>You can configure multiple badges here.</note> | + | ---- |
| ==== CI ==== | ==== CI ==== | ||
| - | {{:account21:plp_ci.png?1200|}} | + | {{:account21:if_ci_tab.png?600|}} |
| + | |||
| + | * In the CI Tab you can set the Filter Position for Desktop and the colors to use for the product list page | ||
| + | * Additionally you can set the primary (CTA’s) and secondary colors (e.g. delete all filters) for the PLP | ||
| + | * By default we inherit the shops font face for the product listing page frontend with the typography they can change the font size displayed on the PLP | ||
| + | * Set the grid layouts for different device sizes | ||
| + | * Products per page allows to define how many products should be shown before the pagination will be applied | ||
| - | * **Filter Position**: Define where the filters should be displayed in the Product List Page (desktop only). | ||
| - | * **Colors**: Set the primary and secondary color for your Product List Page. | ||
| - | * **Typography**: Select a base font size for Instant Frontend. | ||
| - | * **Grid Layout**: Choose how many products should be displayed depending on the screen size. | ||
| - | * **Products per page**: Define how many products should be displayed per page. | ||
| ---- | ---- | ||