integration_documentation:instant_frontend:shopping_guide

integration_documentation:instant_frontend: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).
  • Color: The following depiction shows how the colours will apply to the Shopping Guide.

Please be aware that those Settings are globally applied to all Shopping Guides.

Settings

  • Name: Give the Shopping Guide a proper Name
  • Title: Specify the Title of the Shopping Guide. This will be displayed in the Shops Frontend.
  • Subtitle: Add a Subtitle. This will be displayed in the Shops Frontend.
  • Category: Specify on which Category the Shopping Guide should be triggered
  • Default flow: Select the default flow that should be used for the Shopping Guide. According to the flow chosen you can specify the order of the Questions.

Questions

  • Here we have different types of questions
  • All of the questions that should be considered within the Shopping Guide can be added here

Add Questions

  1. Select an Attribute from the Dropdown
  2. Edit the question and set the configurations for the question
  • Define a different Display Name
  • Change the used Attribute for the question
  • Unordered List ItemSelect how the filters/answers should be displayed in the flow
  • Set the order that should applicable
  • Define the question
  • If needed add a Icon for the Header with an Image URL
  • Define if multiple options can be used
  • Define if the Question is required

Add Answers

  1. From the dropdown you can specify the filter values that should be shown for the question
  2. Every answer can be edited with the following options:
  • Display Name
  • Set an Image URL if needed

Add branching questions (optional)

  • Branching questions can help to guide a User in a certain direction with a different flow of questions

1. Configure the branching question

  • Set a display name
  • Add a question/headline
  • Choose the displaying option that should be applied
  • Add a Header Icon if needed

2. Move to answers

  • Add/Edit an answer
  • Set display name
  • Add image Url for the attribute value
  • Select which flow should be triggered after answering the question

Flows

If a branching question is used you can specify within this section the flow that should be applied for the following questions. By default there is already one flow specified.

  • Edit the flow
  • Add the display name within the Account
  • Add a question from the dropdown = all available questions for this Shopping Guide
  • Change the order of the questions via Drag’n’Drop