> For the complete documentation index, see [llms.txt](https://docs.fact-finder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fact-finder.com/shopify-connector/shopify-app/web-components-integration-beta.md).

# Web Components Integration (Beta)

{% hint style="warning" %}
Web Components integration is in Beta. It is not ready for customer use.

It is optimized for Shopify Horizon themes. Other OS 2.0 themes may not have full layout or styling compatibility.
{% endhint %}

[FactFinder Web Components](https://web-components.fact-finder.de/) replace the standard Shopify search and collection filtering with FactFinder components directly inside the Shopify Theme Editor. Add them through Shopify Theme App Extensions (App Embeds and App Blocks), without writing custom code.

### Before you begin

Before adding blocks:

* Publish products to the correct sales channel and catalog.
* Configure the translations your storefront requires.

{% hint style="info" %}
The app exports the default value when a translation is unavailable.
{% endhint %}

### Enable the core library

Enable the library before adding interface blocks.

{% stepper %}
{% step %}

#### Open your theme

In Shopify Admin, open **Online Store**. Select **Edit theme** for your active Horizon theme.
{% endstep %}

{% step %}

#### Enable the library

Open **App embeds** in the sidebar. Turn on **FactFinder Web Components Library**.
{% endstep %}

{% step %}

#### Save your changes

Click **Save** in the top-right corner.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
The library loads required bundles and handles search-query URLs. Configure the FactFinder API key first.
{% endhint %}

### Add and place blocks

Add a FactFinder block from the Shopify Theme Editor. Select it to configure its settings.

| Component                    | Purpose                                                                                 | Use it on                                                   | Configure                                                                  | Default                             |
| ---------------------------- | --------------------------------------------------------------------------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------- | ----------------------------------- |
| **FactFinder Searchbox**     | Show a search input with suggestions, categories, brands, and product previews.         | Header, home, or search template                            | Placeholder, width from 200px to 800px, and suggestion headings            | `Search our store...`               |
| **FactFinder Filter ASN**    | Show facets and active filters. Choose a vertical sidebar or horizontal top-bar layout. | Search or collection template                               | Active filter cloud and reset-button text                                  | `Clear all`                         |
| **FactFinder Record List**   | Display the product grid with dynamic variant prices and images.                        | Search results template                                     | Two to five desktop columns, product descriptions, and details-button text | Four columns and `View Details`     |
| **FactFinder Sortbox**       | Let customers sort results.                                                             | Above the product grid on search results templates          | Label and left, center, or right alignment                                 | `Sort by:`                          |
| **FactFinder Per Page List** | Let customers select results per page.                                                  | Above or below the product grid on search results templates | Comma-separated values, prefix, suffix, and alignment                      | `10,20,30`, `Show:`, and `per page` |
| **FactFinder Paging**        | Show first, previous, page-number, next, and last controls.                             | Above or below the product grid on search results templates | Left, center, or right alignment                                           | —                                   |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.fact-finder.com/shopify-connector/shopify-app/web-components-integration-beta.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.