> For the complete documentation index, see [llms.txt](https://fredhopper.gitbook.io/product-discovery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fredhopper.gitbook.io/product-discovery/building-the-front-end-experience-with-fhr/step-by-step-to-your-front-end-integration.md).

# Step by Step to your Front-End Integration

Ensure that all [prerequisites for successful front-end integration](/product-discovery/getting-started/fhr-integration-checklist.md#before-you-begin-4) are met before you begin.

{% stepper %}
{% step %}

#### Choose an integration method

To connect to the [Fredhopper Query API](/product-discovery/building-the-front-end-experience-with-fhr/what-is-the-query-api.md) you can use either the [SOAP interface](/product-discovery/building-the-front-end-experience-with-fhr/sending-queries.md#soap-wsdl) or the [REST interface](/product-discovery/building-the-front-end-experience-with-fhr/sending-queries.md#rest-xml-json) with either XML or JSON reponses.

For more information see also [Front-End Integration Best Practice](/product-discovery/building-the-front-end-experience-with-fhr/best-practice/integration-best-practices.md).
{% endstep %}

{% step %}

#### Understand your use cases

**Identify all areas** in your webshop where **Fredhopper can be utilized**, such as search, navigation or merchandising. Which parts of the shopper's journey (i.e. browse, search, refine, sort-by) will be powered by Fredhopper?

{% hint style="success" %}
If you are working on your Fredhopper implementation together with us, your technical consultant will have mapped out the use cases with you in the [preparation phase](/product-discovery/getting-started/fhr-integration-checklist.md#prepare-for-integration-1).
{% endhint %}

For each context:

* **Identify the types of queries you have to send** (see [Sending Queries to the Query API](/product-discovery/building-the-front-end-experience-with-fhr/sending-queries.md) and [Constructing Queries](/product-discovery/building-the-front-end-experience-with-fhr/fredhopper-query-language.md)).
* **Determine the context parameters** for your query (see [Constructing Queries](/product-discovery/building-the-front-end-experience-with-fhr/fredhopper-query-language.md)).

Lastly, ensure that **all necessary information is available** to populate the required parameters and correctly formulate the required queries, e.g. consistent category IDs and parent categories.
{% endstep %}

{% step %}

#### Try out queries

Using a tool such as Postman, **send sample queries** to the Fredhopper Query API to identify any potential issues by taking a **close look at the responses** (see [Understanding the FHR Query Response](/product-discovery/building-the-front-end-experience-with-fhr/understanding-the-fhr-query-response.md))**:**

* Does it include the facets, breadcrumbs, items-section, themes/campaigns as expected?
* Are all the display fields and attribute types you need present?

{% hint style="warning" %}
[Display fields](https://support.rezolve.com/hc/en-us/articles/11135780373661-FHR-How-to-see-the-same-item-attributes-in-published-and-pre-published-pages) are defined in the Merchandising Studio (*System > Display fields*).
{% endhint %}

* Is there any excess information that you do not need in your front-end?

{% hint style="success" %}
You can [**suppress any excess response content**](/product-discovery/building-the-front-end-experience-with-fhr/fredhopper-query-language.md#front-endintegrationspecification-suppressingresponseelements) not needed in the front-end to improve performance. Note that [only certain information can be suppressed](https://support.rezolve.com/hc/en-us/articles/11135737406237-Fredhopper-Query-Language#h_01HD64XH64GBYHWJNH1BV857TA). You can't suppress the following information in the response: *info*, *breadcrumb*, *footer*.

For more information see also [Query Response Best Practice](/product-discovery/building-the-front-end-experience-with-fhr/best-practice/fredhopper-query-response-best-practices.md).
{% endhint %}
{% endstep %}

{% step %}

#### Optimize and maintain your integration

Beyond functional integration, focus on optimizing how your front end interacts with the Fredhopper Query API. Follow recommended strategies for minimizing latency, reducing payload size, caching, and limiting unnecessary queries. Regularly review your setup against Fredhopper’s evolving [best-practice documentation](/product-discovery/building-the-front-end-experience-with-fhr/best-practice.md).
{% endstep %}
{% endstepper %}