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

integration_documentation:instant_frontend:shopping_guide

integration_documentation:instant_frontend:shopping_guide

This is an old revision of the document!

Shopping Guide

You can find this feature in the Customer Account → Instant Frontend → Shopping Guide.

Setup

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

Settings

Questions

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

Flows

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.
Note that any CSS-based customization may cause problems as deployment for PLP may take place at any time. If you plan to do this, please check with your integration consultant or support.