1. You are here
  3. integration_documentation
  4. instant_frontend
  5. product_listing

integration_documentation:instant_frontend:product_listing

integration_documentation:instant_frontend:product_listing

This is an old revision of the document!

Product List Page

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

1200

  • 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.
  • 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.
  • Shop system: Adapt the logic by setting the relevant shop system or show the button provided from the shopsystem.
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

1200

  • Filter Position: Define where the filters should be displayed in the Product List Page (desktop only).
  • Colors: Set the primary, secondary and accent color for your Product List Page.
  • Pagination: Define how much 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.