integration_documentation:instant_frontend:product_listing

integration_documentation:instant_frontend:product_listing

You can find this feature in the Customer Account → Instant Frontend → Product list.

Our feature Product List allows you to fairly easy configure the Product Listing Page of your shop.

Settings

  • Selector: Specify the selector where the Product List Page shoud be placed within the Website. Use a selector that covers most of the content (e.g. .fl-outer-container).
  • Location: Set the location of the container. The following locations can be used:
    • before: Displays Product List Page before the chosen selector.
    • unordered List Itemafter: Displays Product List Page after the chosen selector.
    • replace: Replaces the container (selector) with the Product List Page container.
    • replaceContent: Replaces the content of the given container (selector).
    • append: The Product List Page container will be appended within the set container (selector).
    • prepend: The Product List Page container will be prepended within the set container (selector).
Active: Please be aware that this Toggle enables the Instant Frontend in the chosen shop. Choose the “Preview Mode” to test the Product List Page without activating it for your shop.
  • Navigation active: Activates the Product Listing for all categories.

Product

  • 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.
Only information provided within the datafeed can be shown. If you notice discrepancies please check your datafeed or contact our support team.

Price

1200

  • Show product price: Show/ hide the product price.
  • Show decimals: Toggles the use of decimals. If deactivated the price will be rounded.
  • Property containing old price: Define if you want to show an instead price of the product (If available in the Export).

Badges

1200

  • Property: Specify the name of the property that should be used as indicator for a certain badge.
  • Text: Specify the text for your badge.
  • Background color: Specify the background color of your badge.
You can configure multiple badges here.

CI

  • 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.

If you are using Shopware 6 and want to use the add-to-cart button you have to change the CSRF mode to “ajax”. To change the CSRF mode in a Shopware 6 shop, change the property storefront.csrf.mode to “ajax” in vendor/shopware/storefront/Resources/config/packages/storefront.yaml and clear the cache.