diff --git a/packages/x-components/src/plugins/x-emitters.ts b/packages/x-components/src/plugins/x-emitters.ts
index c254295e5d..c9502b0621 100644
--- a/packages/x-components/src/plugins/x-emitters.ts
+++ b/packages/x-components/src/plugins/x-emitters.ts
@@ -31,9 +31,9 @@ export function registerStoreEmitters(
       selector(store.state.x[name], safeGettersProxy);
     const emit: (
       newValue: XEventPayload<typeof event>,
-      oldValue: XEventPayload<typeof event>
+      oldValue?: XEventPayload<typeof event>
     ) => void = (newValue, oldValue) => {
-      if (filter(newValue, oldValue)) {
+      if (filter(newValue, oldValue, store.state.x[name])) {
         bus.emit(event, newValue, { ...metadata, moduleName: name, oldValue });
       }
     };
diff --git a/packages/x-components/src/store/utils/store-emitters.utils.ts b/packages/x-components/src/store/utils/store-emitters.utils.ts
index d2c41153fb..0b0e5c7221 100644
--- a/packages/x-components/src/store/utils/store-emitters.utils.ts
+++ b/packages/x-components/src/store/utils/store-emitters.utils.ts
@@ -35,7 +35,8 @@ export interface StateSelector<ReturnType, State extends Dictionary, Getters ext
   extends WatchOptions {
   selector: SimpleStateSelector<ReturnType, State, Getters>;
   /**
-   * Checks if the value of the selector has changed.
+   * Asserts if the event should really be emitted taking into account the new and old values and
+   * the module state.
    *
    * @remarks
    * This function exist because Vue will not stop reactivity propagation if the observed variable
@@ -43,9 +44,10 @@ export interface StateSelector<ReturnType, State extends Dictionary, Getters ext
    *
    * @param newValue - The new value.
    * @param oldValue - The old value.
+   * @param state - The state of the {@link XModule} where this selector is used.
    * @returns True if the value has really changed.
    */
-  filter?(newValue: ReturnType, oldValue: ReturnType): boolean;
+  filter?(newValue: ReturnType, oldValue: ReturnType, state: State): boolean;
   metadata?: Partial<WireMetadata>;
 }
 
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index 953241aa72..f47669051f 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -248,12 +248,17 @@
               <LocationProvider location="no_results">
                 <QueryPreviewList
                   :debounceTimeMs="250"
-                  :queries="queriesToPreview"
-                  #default="{ query, totalResults, results }"
+                  :queriesPreviewInfo="queriesPreviewInfo"
+                  #default="{ queryPreviewInfo, totalResults, results }"
                   data-test="brand-recommendation"
                 >
                   <div class="x-flex x-flex-col x-gap-8 x-mb-16">
-                    <h1 class="x-title2">{{ query }} ({{ totalResults }})</h1>
+                    <QueryPreviewButton
+                      class="x-w-fit x-button-xl x-button-ghost"
+                      :queryPreviewInfo="queryPreviewInfo"
+                    >
+                      {{ `${queryPreviewInfo.query} (${totalResults})` }}
+                    </QueryPreviewButton>
                     <SlidingPanel :resetOnContentChange="false">
                       <div class="x-flex x-gap-8">
                         <Result
@@ -348,8 +353,8 @@
                 </h1>
                 <LocationProvider :location="$x.noResults ? 'no_results' : 'low_results'">
                   <QueryPreviewList
-                    :queries="queries"
-                    #default="{ query, results }"
+                    :queries-preview-info="queries.map(q => ({ query: q }))"
+                    #default="{ queryPreviewInfo: { query }, results }"
                     queryFeature="semantics"
                   >
                     <div
@@ -496,6 +501,8 @@
   import SemanticQueries from '../../x-modules/semantic-queries/components/semantic-queries.vue';
   import SemanticQuery from '../../x-modules/semantic-queries/components/semantic-query.vue';
   import { useQueriesPreview } from '../../x-modules/queries-preview/composables/use-queries-preview.composable';
+  import { QueryPreviewInfo } from '../../x-modules/queries-preview/store/types';
+  import QueryPreviewButton from '../../x-modules/queries-preview/components/query-preview-button.vue';
   import Aside from './aside.vue';
   import PredictiveLayer from './predictive-layer.vue';
   import Result from './result.vue';
@@ -507,6 +514,7 @@
       infiniteScroll
     },
     components: {
+      QueryPreviewButton,
       DisplayResultProvider,
       FallbackDisclaimer,
       QueryPreviewList,
@@ -615,7 +623,29 @@
       }
     };
 
-    protected queriesToPreview = ['sunglasses', 'handbag', 'earrings', 'jeans', 't-shirt'];
+    protected queriesPreviewInfo: QueryPreviewInfo[] = [
+      {
+        query: 'cortina',
+        extraParams: { store: 'Gijón' }
+      },
+      {
+        query: 'marni summer dress'
+      },
+      {
+        query: 'woven hat'
+      },
+      {
+        query: 'jeans',
+        extraParams: { store: 'Gijón' }
+      },
+      {
+        query: 't-shirt'
+      }
+    ];
+
+    protected get queries(): string[] {
+      return this.queriesPreviewInfo.map(item => item.query);
+    }
 
     toggleE2EAdapter(): void {
       adapterConfig.e2e = !adapterConfig.e2e;
diff --git a/packages/x-components/src/x-installer/api/api.types.ts b/packages/x-components/src/x-installer/api/api.types.ts
index c44c9deb2d..20396732cc 100644
--- a/packages/x-components/src/x-installer/api/api.types.ts
+++ b/packages/x-components/src/x-installer/api/api.types.ts
@@ -3,6 +3,7 @@ import { XBus } from '@empathyco/x-bus';
 import { DocumentDirection } from '../../plugins/x-plugin.types';
 import { XEvent, XEventPayload, XEventsTypes } from '../../wiring/events.types';
 import { WireMetadata } from '../../wiring/wiring.types';
+import { QueryPreviewInfo } from '../../x-modules/queries-preview/index';
 
 /**
  * Interface with the API functions exposes as X
@@ -126,17 +127,3 @@ export interface SnippetConfig {
  * @public
  */
 export type NormalisedSnippetConfig = RequiredProperties<SnippetConfig, 'uiLang'>;
-
-/**
- * Information to render a query preview with.
- *
- * @public
- */
-export interface QueryPreviewInfo {
-  /** The query to search for. */
-  query: string;
-  /** An optional title for the container. */
-  title?: string;
-  /** Any other additional information to render the preview with. */
-  [extra: string]: unknown;
-}
diff --git a/packages/x-components/src/x-modules/history-queries/wiring.ts b/packages/x-components/src/x-modules/history-queries/wiring.ts
index 2100d45000..3563261866 100644
--- a/packages/x-components/src/x-modules/history-queries/wiring.ts
+++ b/packages/x-components/src/x-modules/history-queries/wiring.ts
@@ -39,6 +39,16 @@ const wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleNa
  */
 export const addQueryToHistoryQueries = wireDispatch('addQueryToHistory');
 
+/**
+ * Saves the selectedQueryPreview query into the history queries.
+ *
+ * @public
+ */
+export const addQueryToHistoryQueriesFromPreview = wireDispatch(
+  'addQueryToHistory',
+  ({ eventPayload: { query } }) => query
+);
+
 /**
  * Sets the query of the history queries module. Used for searching into the history queries.
  *
@@ -46,6 +56,17 @@ export const addQueryToHistoryQueries = wireDispatch('addQueryToHistory');
  */
 export const setHistoryQueriesQuery = wireCommit('setQuery');
 
+/**
+ * Sets the query of the history queries module from a selectedQueryPreview's query.
+ * Used for searching into the history queries.
+ *
+ * @public
+ */
+export const setHistoryQueriesQueryFromPreview = wireCommit(
+  'setQuery',
+  ({ eventPayload: { query } }) => query
+);
+
 /**
  * Sets the history queries state `query` from url.
  *
@@ -169,5 +190,9 @@ export const historyQueriesWiring = createWiring({
   },
   SearchResponseChanged: {
     updateHistoryQueriesWithSearchResponse
+  },
+  UserAcceptedAQueryPreview: {
+    setHistoryQueriesQueryFromPreview,
+    addQueryToHistoryQueriesFromPreview
   }
 });
diff --git a/packages/x-components/src/x-modules/identifier-results/wiring.ts b/packages/x-components/src/x-modules/identifier-results/wiring.ts
index bcd958e4ff..6dc9c2eb37 100644
--- a/packages/x-components/src/x-modules/identifier-results/wiring.ts
+++ b/packages/x-components/src/x-modules/identifier-results/wiring.ts
@@ -39,6 +39,16 @@ const wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleNa
  */
 export const setIdentifierResultsQuery = wireDispatch('saveQuery');
 
+/**
+ * Sets the identifier-results module query from a selectedQueryPreview's query.
+ *
+ * @public
+ */
+export const setIdentifierResultsQueryFromPreview = wireDispatch(
+  'saveQuery',
+  ({ eventPayload: { query } }) => query
+);
+
 /**
  * Clears the identifier-results module query.
  *
@@ -127,5 +137,9 @@ export const identifierResultsWiring = createWiring({
   },
   UserClickedOutOfMainModal: {
     clearIdentifierResultsQuery
+  },
+  UserAcceptedAQueryPreview: {
+    setIdentifierResultsQueryFromPreview,
+    saveIdentifierResultsOriginWire
   }
 });
diff --git a/packages/x-components/src/x-modules/next-queries/wiring.ts b/packages/x-components/src/x-modules/next-queries/wiring.ts
index a6118fb652..567ce949d9 100644
--- a/packages/x-components/src/x-modules/next-queries/wiring.ts
+++ b/packages/x-components/src/x-modules/next-queries/wiring.ts
@@ -45,6 +45,16 @@ const wireDispatch: NamespacedWireDispatch<typeof moduleName> = namespacedWireDi
  */
 export const setNextQueriesQuery = wireCommit('setQuery');
 
+/**
+ * Sets the next queries state `query` with a selectedQueryPreview's query.
+ *
+ * @public
+ */
+export const setNextQueriesQueryFromPreview = wireCommit(
+  'setParams',
+  ({ eventPayload: { query } }) => query
+);
+
 /**
  * Sets the next queries state `query` from url.
  *
@@ -59,6 +69,16 @@ const setUrlParams = wireDispatch('setUrlParams');
  */
 export const setNextQueriesExtraParams = wireCommit('setParams');
 
+/**
+ * Sets the next queries state `params` with a selectedQueryPreview's extraParams.
+ *
+ * @public
+ */
+export const setNextQueriesExtraParamsFromPreview = wireCommit(
+  'setParams',
+  ({ eventPayload: { extraParams } }) => extraParams
+);
+
 /**
  * Requests and stores the next queries.
  *
@@ -129,5 +149,9 @@ export const nextQueriesWiring = createWiring({
   },
   NextQueryPreviewMountedHook: {
     fetchAndSaveNextQueryPreviewWire
+  },
+  UserAcceptedAQueryPreview: {
+    setNextQueriesQueryFromPreview,
+    setNextQueriesExtraParamsFromPreview
   }
 });
diff --git a/packages/x-components/src/x-modules/popular-searches/wiring.ts b/packages/x-components/src/x-modules/popular-searches/wiring.ts
index 10b2a6337a..decbfc4cbd 100644
--- a/packages/x-components/src/x-modules/popular-searches/wiring.ts
+++ b/packages/x-components/src/x-modules/popular-searches/wiring.ts
@@ -12,7 +12,7 @@ import { createWiring } from '../../wiring/wiring.utils';
  */
 const moduleName = 'popularSearches';
 /**
- * WireDispatchfor {@link PopularSearchesXModule}.
+ * WireDispatch for {@link PopularSearchesXModule}.
  *
  * @internal
  */
diff --git a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-button.spec.ts b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-button.spec.ts
new file mode 100644
index 0000000000..be8bcd2c14
--- /dev/null
+++ b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-button.spec.ts
@@ -0,0 +1,138 @@
+import Vuex, { Store } from 'vuex';
+import { mount, createLocalVue, Wrapper, WrapperArray } from '@vue/test-utils';
+import { DeepPartial, Dictionary } from '@empathyco/x-utils';
+import Vue from 'vue';
+import { RootXStoreState } from '../../../../store/index';
+import { findTestDataById, installNewXPlugin } from '../../../../__tests__/utils';
+import { XPlugin } from '../../../../plugins/index';
+import { queriesPreviewXModule } from '../../x-module';
+import QueryPreviewButton from '../query-preview-button.vue';
+import { QueryPreviewInfo } from '../../store/index';
+import { getXComponentXModuleName, isXComponent } from '../../../../components/index';
+
+function renderQueryPreviewButton({
+  queryPreviewInfo = { query: 'milk', extraParams: { store: 'Magrathea' } },
+  template = `<QueryPreviewButton v-bind="$attrs" />`
+}: RenderQueryPreviewButtonOptions = {}): RenderQueryPreviewButtonAPI {
+  const localVue = createLocalVue();
+  localVue.use(Vuex);
+
+  const store = new Store<DeepPartial<RootXStoreState>>({});
+  installNewXPlugin({ store }, localVue);
+  XPlugin.registerXModule(queriesPreviewXModule);
+
+  const queryPreviewButtonEmitSpy = jest.fn();
+  XPlugin.bus.on('UserAcceptedAQueryPreview').subscribe(queryPreviewButtonEmitSpy);
+
+  const wrapper = mount(
+    {
+      components: { QueryPreviewButton },
+      template
+    },
+    {
+      localVue,
+      store,
+      propsData: {
+        queryPreviewInfo
+      }
+    }
+  ).findComponent(QueryPreviewButton);
+
+  const findTestDataByIdInButton = findTestDataById.bind(undefined, wrapper);
+
+  return {
+    wrapper,
+    queryPreviewButtonEmitSpy,
+    queryPreviewInfo,
+    findTestDataById: findTestDataByIdInButton,
+    clickQueryPreviewButton: () =>
+      findTestDataByIdInButton('query-preview-button').trigger('click'),
+    updateExtraParams: async params => {
+      store.commit('x/queriesPreview/setParams', params);
+      await localVue.nextTick();
+    }
+  };
+}
+
+describe('query preview button', () => {
+  jest.useFakeTimers();
+  afterEach(() => {
+    jest.runAllTimers();
+    jest.resetAllMocks();
+  });
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  it('is an XComponent which has an XModule', () => {
+    const { wrapper } = renderQueryPreviewButton();
+    expect(isXComponent(wrapper.vm)).toEqual(true);
+    expect(getXComponentXModuleName(wrapper.vm)).toBe('queriesPreview');
+  });
+
+  it('default slot with the query text of the query preview', () => {
+    const { wrapper } = renderQueryPreviewButton();
+    expect(wrapper.text()).toBe('milk');
+  });
+
+  it('can override the content of the slot', () => {
+    const { findTestDataById } = renderQueryPreviewButton({
+      template: `
+        <QueryPreviewButton v-bind="$attrs">
+          <template #default="{ queryPreviewInfo }">
+            <span data-test="custom-content">{{ 'View more ' + queryPreviewInfo.query }}</span>
+          </template>
+        </QueryPreviewButton>
+      `
+    });
+    expect(findTestDataById('custom-content')).toBeTruthy();
+  });
+
+  it('sends the `UserAcceptedAQueryPreview` event when the button is clicked', async () => {
+    const { clickQueryPreviewButton, queryPreviewButtonEmitSpy, updateExtraParams } =
+      renderQueryPreviewButton();
+
+    clickQueryPreviewButton();
+    expect(queryPreviewButtonEmitSpy).toHaveBeenCalledTimes(1);
+    expect(queryPreviewButtonEmitSpy).toHaveBeenCalledWith({
+      query: 'milk',
+      extraParams: {
+        store: 'Magrathea'
+      }
+    });
+
+    await updateExtraParams({ warehouse: 42 });
+
+    clickQueryPreviewButton();
+    expect(queryPreviewButtonEmitSpy).toHaveBeenCalledTimes(2);
+    expect(queryPreviewButtonEmitSpy).toHaveBeenCalledWith({
+      query: 'milk',
+      extraParams: {
+        store: 'Magrathea',
+        warehouse: 42
+      }
+    });
+  });
+});
+
+interface RenderQueryPreviewButtonOptions {
+  /** The query preview info to be used in the component. */
+  queryPreviewInfo?: QueryPreviewInfo;
+  /** The template to be rendered. */
+  template?: string;
+}
+
+interface RenderQueryPreviewButtonAPI {
+  /** The wrapper of the rendered component. */
+  wrapper: Wrapper<Vue>;
+  /** The spy to check if the event was emitted. */
+  queryPreviewButtonEmitSpy: jest.Mock;
+  /** The query preview info to be used in the component. */
+  queryPreviewInfo: QueryPreviewInfo;
+  /** The function to find a data-test by its id. */
+  findTestDataById: (id: string) => WrapperArray<Vue>;
+  /** Clicks the query preview button. */
+  clickQueryPreviewButton: () => void;
+  /** Updates the extra params of the query preview module. */
+  updateExtraParams: (params: Dictionary<unknown>) => Promise<void>;
+}
diff --git a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-list.spec.ts b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-list.spec.ts
index fdd5080262..851c4ab5ce 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-list.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-list.spec.ts
@@ -10,13 +10,14 @@ import { XComponentsAdapterDummy } from '../../../../__tests__/adapter.dummy';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { queriesPreviewXModule } from '../../x-module';
 import QueryPreviewList from '../query-preview-list.vue';
+import { QueryPreviewInfo } from '../../store/types';
 
 function renderQueryPreviewList({
   template = `
-        <QueryPreviewList v-bind="$attrs" #default="{ query, results }">
-          {{ query }} - {{results[0].name}}
+        <QueryPreviewList v-bind="$attrs" #default="{ queryPreviewInfo, results }">
+          {{ queryPreviewInfo.query }} - {{results[0].name}}
         </QueryPreviewList>`,
-  queries = ['milk'],
+  queriesPreviewInfo = [{ query: 'milk' }],
   results = { milk: getResultsStub(1) }
 }: RenderQueryPreviewListOptions): RenderQueryPreviewListAPI {
   const localVue = createLocalVue();
@@ -42,7 +43,7 @@ function renderQueryPreviewList({
     {
       localVue,
       propsData: {
-        queries
+        queriesPreviewInfo
       }
     }
   );
@@ -62,7 +63,7 @@ function renderQueryPreviewList({
 describe('testing QueryPreviewList', () => {
   it('renders a list of queries one by one', async () => {
     const { getQueryPreviewItemWrappers, reRender } = renderQueryPreviewList({
-      queries: ['shirt', 'jeans'],
+      queriesPreviewInfo: [{ query: 'shirt' }, { query: 'jeans' }],
       results: { shirt: [createResultStub('Cool shirt')], jeans: [createResultStub('Sick jeans')] }
     });
 
@@ -87,7 +88,7 @@ describe('testing QueryPreviewList', () => {
 
   it('hides queries with no results', async () => {
     const { getQueryPreviewItemWrappers, reRender } = renderQueryPreviewList({
-      queries: ['noResults', 'shoes'],
+      queriesPreviewInfo: [{ query: 'noResults' }, { query: 'shoes' }],
       results: { noResults: [], shoes: [createResultStub('Crazy shoes')] }
     });
 
@@ -105,7 +106,7 @@ describe('testing QueryPreviewList', () => {
 
   it('hides queries that failed', async () => {
     const { adapter, getQueryPreviewItemWrappers, reRender } = renderQueryPreviewList({
-      queries: ['willFail', 'shoes'],
+      queriesPreviewInfo: [{ query: 'willFail' }, { query: 'shoes' }],
       results: {
         willFail: [createResultStub('Will fail')],
         shoes: [createResultStub('Crazy shoes')]
@@ -131,7 +132,7 @@ interface RenderQueryPreviewListOptions {
   /** The template to render the {@link QueryPreviewList} component. */
   template?: string;
   /** The queries for which preview its results. */
-  queries?: string[];
+  queriesPreviewInfo?: QueryPreviewInfo[];
   /** The results to return from the mocked search endpoint adapter. */
   results?: Record<string, Result[]>;
 }
diff --git a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
index 93672edb6c..8fabdef16b 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
@@ -11,81 +11,81 @@ import { XComponentsAdapterDummy } from '../../../../__tests__/adapter.dummy';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import { RootXStoreState } from '../../../../store/store.types';
 import { XPlugin } from '../../../../plugins/x-plugin';
-import { QueryPreviewItem } from '../../store/types';
+import { QueryPreviewInfo, QueryPreviewItem } from '../../store/types';
 import { queriesPreviewXModule } from '../../x-module';
 import QueryPreview from '../query-preview.vue';
 import { getEmptySearchResponseStub } from '../../../../__stubs__/index';
 import { resetXQueriesPreviewStateWith } from './utils';
 
-describe('query preview', () => {
-  function renderQueryPreview({
-    maxItemsToRender,
-    query = 'milk',
-    location,
-    queryFeature,
-    debounceTimeMs = 0,
-    template = `<QueryPreview v-bind="$attrs" />`,
-    queryPreview = {
-      request: {
-        query
-      },
-      results: getResultsStub(4),
-      status: 'success',
-      totalResults: 100
-    }
-  }: RenderQueryPreviewOptions = {}): RenderQueryPreviewAPI {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
-
-    const store = new Store<DeepPartial<RootXStoreState>>({});
-    installNewXPlugin({ store }, localVue);
-    XPlugin.registerXModule(queriesPreviewXModule);
-
-    const QueryPreviewRequestUpdatedSpy = jest.fn();
-    XPlugin.bus.on('QueryPreviewRequestUpdated').subscribe(QueryPreviewRequestUpdatedSpy);
-
-    if (queryPreview) {
-      resetXQueriesPreviewStateWith(store, {
-        queriesPreview: {
-          [query]: queryPreview
-        }
-      });
-    }
+function renderQueryPreview({
+  maxItemsToRender,
+  queryPreviewInfo = { query: 'milk' },
+  location,
+  queryFeature,
+  debounceTimeMs = 0,
+  template = `<QueryPreview v-bind="$attrs" />`,
+  queryPreview = {
+    request: {
+      query: queryPreviewInfo.query
+    },
+    results: getResultsStub(4),
+    status: 'success',
+    totalResults: 100
+  }
+}: RenderQueryPreviewOptions = {}): RenderQueryPreviewAPI {
+  const localVue = createLocalVue();
+  localVue.use(Vuex);
 
-    const wrapper = mount(
-      {
-        components: { QueryPreview },
-        template,
-        provide: {
-          location
-        }
-      },
-      {
-        localVue,
-        store,
-        propsData: {
-          maxItemsToRender,
-          query,
-          queryFeature,
-          debounceTimeMs
-        }
+  const store = new Store<DeepPartial<RootXStoreState>>({});
+  installNewXPlugin({ store }, localVue);
+  XPlugin.registerXModule(queriesPreviewXModule);
+
+  const queryPreviewRequestUpdatedSpy = jest.fn();
+  XPlugin.bus.on('QueryPreviewRequestUpdated').subscribe(queryPreviewRequestUpdatedSpy);
+
+  if (queryPreview) {
+    resetXQueriesPreviewStateWith(store, {
+      queriesPreview: {
+        [queryPreviewInfo.query]: queryPreview
       }
-    ).findComponent(QueryPreview);
-
-    return {
-      wrapper,
-      QueryPreviewRequestUpdatedSpy,
-      query,
-      queryPreview,
-      findTestDataById: findTestDataById.bind(undefined, wrapper),
-      updateExtraParams: async params => {
-        store.commit('x/queriesPreview/setParams', params);
-        await localVue.nextTick();
-      },
-      reRender: () => new Promise(resolve => setTimeout(resolve))
-    };
+    });
   }
 
+  const wrapper = mount(
+    {
+      components: { QueryPreview },
+      template,
+      provide: {
+        location
+      }
+    },
+    {
+      localVue,
+      store,
+      propsData: {
+        maxItemsToRender,
+        queryPreviewInfo,
+        queryFeature,
+        debounceTimeMs
+      }
+    }
+  ).findComponent(QueryPreview);
+
+  return {
+    wrapper,
+    queryPreviewRequestUpdatedSpy,
+    queryPreviewInfo,
+    queryPreview,
+    findTestDataById: findTestDataById.bind(undefined, wrapper),
+    updateExtraParams: async params => {
+      store.commit('x/queriesPreview/setParams', params);
+      await localVue.nextTick();
+    },
+    reRender: () => new Promise(resolve => setTimeout(resolve))
+  };
+}
+
+describe('query preview', () => {
   jest.useFakeTimers();
   afterEach(() => {
     jest.runAllTimers();
@@ -102,14 +102,18 @@ describe('query preview', () => {
   });
 
   it('sends the `QueryPreviewRequestUpdated` event', async () => {
-    const { QueryPreviewRequestUpdatedSpy, wrapper, updateExtraParams } = renderQueryPreview({});
+    const { queryPreviewRequestUpdatedSpy, wrapper, updateExtraParams } = renderQueryPreview({
+      queryPreviewInfo: { query: 'shoes', extraParams: { directory: 'Magrathea' } }
+    });
 
     jest.advanceTimersByTime(0); // Wait for first emission.
-    expect(QueryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
-    expect(QueryPreviewRequestUpdatedSpy).toHaveBeenCalledWith({
-      extraParams: {},
+    expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
+    expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledWith({
+      extraParams: {
+        directory: 'Magrathea'
+      },
       origin: undefined,
-      query: 'milk',
+      query: 'shoes',
       rows: 24
     });
 
@@ -118,33 +122,38 @@ describe('query preview', () => {
     // fast-forward until next timer should be executed
     jest.advanceTimersToNextTimer();
 
-    expect(QueryPreviewRequestUpdatedSpy).toHaveBeenNthCalledWith(2, {
-      extraParams: {},
+    expect(queryPreviewRequestUpdatedSpy).toHaveBeenNthCalledWith(2, {
+      extraParams: {
+        directory: 'Magrathea'
+      },
       origin: 'popular_search:none',
-      query: 'milk',
+      query: 'shoes',
       rows: 24
     });
 
     await updateExtraParams({ store: 'Uganda' });
     jest.advanceTimersToNextTimer();
 
-    expect(QueryPreviewRequestUpdatedSpy).toHaveBeenNthCalledWith(3, {
-      extraParams: { store: 'Uganda' },
+    expect(queryPreviewRequestUpdatedSpy).toHaveBeenNthCalledWith(3, {
+      extraParams: {
+        directory: 'Magrathea',
+        store: 'Uganda'
+      },
       origin: 'popular_search:none',
-      query: 'milk',
+      query: 'shoes',
       rows: 24
     });
   });
 
   it('sends the `QueryPreviewRequestUpdated` event with the correct location provided', () => {
-    const { QueryPreviewRequestUpdatedSpy } = renderQueryPreview({
+    const { queryPreviewRequestUpdatedSpy } = renderQueryPreview({
       location: 'predictive_layer',
-      query: 'shoes',
+      queryPreviewInfo: { query: 'shoes' },
       queryFeature: 'query_suggestion'
     });
 
     jest.advanceTimersToNextTimer();
-    expect(QueryPreviewRequestUpdatedSpy).toHaveBeenNthCalledWith(1, {
+    expect(queryPreviewRequestUpdatedSpy).toHaveBeenNthCalledWith(1, {
       extraParams: {},
       origin: 'query_suggestion:predictive_layer',
       query: 'shoes',
@@ -174,10 +183,10 @@ describe('query preview', () => {
   it('exposes the query, the results and the totalResults in the default slot', () => {
     const template = `
       <QueryPreview
-          :query="$attrs.query"
-          #default="{ results, query, totalResults}">
+          :queryPreviewInfo="$attrs.queryPreviewInfo"
+          #default="{ results, queryPreviewInfo, totalResults}">
         <div>
-          <span data-test="query-preview-query">{{ query }}</span>
+          <span data-test="query-preview-query">{{ queryPreviewInfo.query }}</span>
           <span data-test="total-results">{{ totalResults }}</span>
           <div v-for="result in results" :key="result.id">
             <span data-test="result-name">{{result.name}}</span>
@@ -185,12 +194,12 @@ describe('query preview', () => {
         </div>
       </QueryPreview>`;
 
-    const { query, wrapper, queryPreview, findTestDataById } = renderQueryPreview({
+    const { queryPreviewInfo, wrapper, queryPreview, findTestDataById } = renderQueryPreview({
       template
     });
 
     expect(wrapper.find(getDataTestSelector('query-preview-query')).element).toHaveTextContent(
-      query
+      queryPreviewInfo.query
     );
     expect(wrapper.find(getDataTestSelector('total-results')).element).toHaveTextContent(
       queryPreview!.totalResults.toString()
@@ -205,7 +214,7 @@ describe('query preview', () => {
 
   it('allows changing the result content', () => {
     const template = `
-      <QueryPreview :query="$attrs.query" #result="{ result }">
+      <QueryPreview :queryPreviewInfo="$attrs.queryPreviewInfo" #result="{ result }">
         <span data-test="result-content">{{result.id}} - {{result.name}}</span>
       </QueryPreview>
     `;
@@ -236,9 +245,7 @@ describe('query preview', () => {
   it('emits load event on success', async () => {
     jest.useRealTimers();
 
-    const { wrapper, reRender } = renderQueryPreview({
-      query: 'milk'
-    });
+    const { wrapper, reRender } = renderQueryPreview();
 
     (XComponentsAdapterDummy.search as jest.Mock).mockResolvedValueOnce({
       ...getEmptySearchResponseStub(),
@@ -258,9 +265,7 @@ describe('query preview', () => {
   it('emits error event on success if results are empty', async () => {
     jest.useRealTimers();
 
-    const { wrapper, reRender } = renderQueryPreview({
-      query: 'milk'
-    });
+    const { wrapper, reRender } = renderQueryPreview();
 
     // The status will be success
     (XComponentsAdapterDummy.search as jest.Mock).mockResolvedValueOnce({
@@ -281,9 +286,7 @@ describe('query preview', () => {
   it('emits error event on error', async () => {
     jest.useRealTimers();
 
-    const { wrapper, reRender } = renderQueryPreview({
-      query: 'milk'
-    });
+    const { wrapper, reRender } = renderQueryPreview();
 
     (XComponentsAdapterDummy.search as jest.Mock).mockRejectedValueOnce('Some error');
 
@@ -298,14 +301,14 @@ describe('query preview', () => {
 
   describe('debounce', () => {
     it('requests immediately when debounce is set to 0', () => {
-      const { QueryPreviewRequestUpdatedSpy } = renderQueryPreview({
+      const { queryPreviewRequestUpdatedSpy } = renderQueryPreview({
         debounceTimeMs: 0,
-        query: 'bull'
+        queryPreviewInfo: { query: 'bull' }
       });
 
       jest.advanceTimersByTime(0);
-      expect(QueryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
-      expect(QueryPreviewRequestUpdatedSpy).toHaveBeenNthCalledWith(1, {
+      expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
+      expect(queryPreviewRequestUpdatedSpy).toHaveBeenNthCalledWith(1, {
         extraParams: {},
         query: 'bull',
         rows: 24
@@ -313,39 +316,39 @@ describe('query preview', () => {
     });
 
     it('does not emit subsequent requests that happen in less than the debounce time', async () => {
-      const { wrapper, QueryPreviewRequestUpdatedSpy } = renderQueryPreview({
+      const { wrapper, queryPreviewRequestUpdatedSpy } = renderQueryPreview({
         debounceTimeMs: 250,
-        query: 'bull'
+        queryPreviewInfo: { query: 'bull' }
       });
 
       jest.advanceTimersByTime(249);
-      expect(QueryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
+      expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
 
       jest.advanceTimersByTime(1); // 250ms since mounting the component, the debounce tested
-      expect(QueryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
-      expect(QueryPreviewRequestUpdatedSpy).toHaveBeenNthCalledWith(1, {
+      expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
+      expect(queryPreviewRequestUpdatedSpy).toHaveBeenNthCalledWith(1, {
         extraParams: {},
         query: 'bull',
         rows: 24
       });
 
       jest.advanceTimersByTime(249);
-      expect(QueryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
+      expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
 
       // Emulates user is typing a new query
-      await wrapper.setProps({ query: 'secall' }); // Timer relaunched
+      await wrapper.setProps({ queryPreviewInfo: { query: 'secall' } }); // Timer relaunched
 
       jest.advanceTimersByTime(249);
-      expect(QueryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
+      expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
 
-      await wrapper.setProps({ query: 'secallona' }); // Timer relaunched
+      await wrapper.setProps({ queryPreviewInfo: { query: 'secallona' } }); // Timer relaunched
 
       jest.advanceTimersByTime(249);
-      expect(QueryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
+      expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
 
-      jest.advanceTimersByTime(1);
-      expect(QueryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(2);
-      expect(QueryPreviewRequestUpdatedSpy).toHaveBeenNthCalledWith(2, {
+      jest.advanceTimersByTime(251);
+      expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(2);
+      expect(queryPreviewRequestUpdatedSpy).toHaveBeenNthCalledWith(2, {
         extraParams: {},
         query: 'secallona',
         rows: 24
@@ -354,34 +357,34 @@ describe('query preview', () => {
 
     // eslint-disable-next-line max-len
     it('updates the debounced request reactively when the debounceTimeMs prop changes', async () => {
-      const { wrapper, QueryPreviewRequestUpdatedSpy } = renderQueryPreview({
+      const { wrapper, queryPreviewRequestUpdatedSpy } = renderQueryPreview({
         debounceTimeMs: 250,
-        query: 'bull'
+        queryPreviewInfo: { query: 'bull' }
       });
 
       jest.advanceTimersByTime(249);
-      expect(QueryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
+      expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
 
       // Updating the debounce time aborts previous running timers
       await wrapper.setProps({ debounceTimeMs: 100 });
       jest.advanceTimersByTime(99);
-      expect(QueryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
+      expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
 
       jest.advanceTimersByTime(1); // 100ms since mounting the component, the debounce tested
-      expect(QueryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
+      expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
     });
 
     it('cancels pending requests when the component is destroyed', () => {
-      const { wrapper, QueryPreviewRequestUpdatedSpy } = renderQueryPreview({
+      const { wrapper, queryPreviewRequestUpdatedSpy } = renderQueryPreview({
         debounceTimeMs: 250,
-        query: 'bull'
+        queryPreviewInfo: { query: 'bull' }
       });
       jest.advanceTimersByTime(249);
-      expect(QueryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
+      expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
 
       wrapper.destroy();
       jest.advanceTimersByTime(1);
-      expect(QueryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
+      expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
     });
   });
 });
@@ -389,8 +392,8 @@ describe('query preview', () => {
 interface RenderQueryPreviewOptions {
   /** The maximum number of results to render. */
   maxItemsToRender?: number;
-  /** The query for which preview its results. */
-  query?: string;
+  /** The query preview info for which preview its results. */
+  queryPreviewInfo?: QueryPreviewInfo;
   /** The location of the query preview in the DOM. */
   location?: string;
   /** The name of the tool that generated the query. */
@@ -410,9 +413,9 @@ interface RenderQueryPreviewAPI {
   /** The Vue testing utils wrapper for the {@link QueryPreview} component. */
   wrapper: Wrapper<Vue>;
   /** A Jest spy set in the {@link XPlugin} `on` function. */
-  QueryPreviewRequestUpdatedSpy?: jest.Mock;
+  queryPreviewRequestUpdatedSpy?: jest.Mock;
   /** The query for which preview its results. */
-  query: string;
+  queryPreviewInfo: QueryPreviewInfo;
   /** The results preview for the passed query. */
   queryPreview: QueryPreviewItem | null;
   /** Find test data in the wrapper for the {@link QueryPreview} component. */
diff --git a/packages/x-components/src/x-modules/queries-preview/components/index.ts b/packages/x-components/src/x-modules/queries-preview/components/index.ts
index 63cc4c4874..8001b2d0fa 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/index.ts
+++ b/packages/x-components/src/x-modules/queries-preview/components/index.ts
@@ -1,2 +1,3 @@
 export { default as QueryPreview } from './query-preview.vue';
+export { default as QueryPreviewButton } from './query-preview-button.vue';
 export { default as QueryPreviewList } from './query-preview-list.vue';
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue
new file mode 100644
index 0000000000..cbd110be42
--- /dev/null
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue
@@ -0,0 +1,151 @@
+<template>
+  <BaseEventButton
+    v-on="$listeners"
+    :events="events"
+    class="x-query-preview-button x-button"
+    data-test="query-preview-button"
+  >
+    <!-- @slot Button content with a text, an icon or both -->
+    <slot :queryPreviewInfo="fullQueryPreviewInfo">
+      {{ queryPreviewInfo.query }}
+    </slot>
+  </BaseEventButton>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+  import { Component, Prop } from 'vue-property-decorator';
+  import { Dictionary } from '@empathyco/x-utils';
+  import { State } from '../../../components/decorators/store.decorators';
+  import { QueryPreviewInfo } from '../store/types';
+  import { XEventsTypes } from '../../../wiring/events.types';
+  import { BaseEventButton, xComponentMixin } from '../../../components';
+  import { queriesPreviewXModule } from '../x-module';
+
+  /**
+   * Component containing an event button that emits
+   * {@link QueriesPreviewXEvents.UserAcceptedAQueryPreview} when clicked with
+   * the full query preview info as payload.
+   *
+   * It has a default slot to customize its contents.
+   *
+   * @public
+   */
+  @Component({
+    components: { BaseEventButton },
+    mixins: [xComponentMixin(queriesPreviewXModule)]
+  })
+  export default class QueryPreviewButton extends Vue {
+    /**
+     * The information about the request of the query preview.
+     *
+     * @public
+     */
+    @Prop({ required: true })
+    protected queryPreviewInfo!: QueryPreviewInfo;
+
+    /**
+     * We use the module extra params to combine them with the query preview's extra params.
+     */
+    @State('queriesPreview', 'params')
+    public params!: Dictionary<unknown>;
+
+    /**
+     * The provided query preview with the base extra params from the module merged in.
+     *
+     * @returns The query preview info with the base extra params merged in.
+     * @public
+     */
+    protected get fullQueryPreviewInfo(): QueryPreviewInfo {
+      return {
+        ...this.queryPreviewInfo,
+        extraParams: {
+          ...this.params,
+          ...this.queryPreviewInfo.extraParams
+        }
+      };
+    }
+
+    /**
+     * List of events to emit by the BaseEventButton.
+     *
+     * @returns An object with the event and payload.
+     *
+     * @internal
+     */
+    protected get events(): Partial<XEventsTypes> {
+      return { UserAcceptedAQueryPreview: this.fullQueryPreviewInfo };
+    }
+  }
+</script>
+
+<docs lang="mdx">
+## Examples
+
+### Basic example
+
+The component content has the query preview query as default
+
+```vue
+<template>
+  <div>
+    <QueryPreviewButton queryPreviewInfo="queryPreviewInfo" />
+  </div>
+</template>
+
+<script>
+  import { QueryPreviewButton } from '@empathyco/x-components/queries-preview';
+
+  export default {
+    components: {
+      QueryPreviewButton
+    },
+    data: function () {
+      return {
+        queryPreviewInfo: {
+          query: 'shoes'
+        }
+      };
+    }
+  };
+</script>
+```
+
+### Customizing slots
+
+The content of the button is customizable via its default slot
+
+```vue
+<template>
+  <div>
+    <QueryPreviewButton queryPreviewInfo="queryPreviewInfo">
+      {{ `Search for: ${queryPreviewInfo.query}` }}
+    </QueryPreviewButton>
+  </div>
+</template>
+
+<script>
+  import { QueryPreviewButton } from '@empathyco/x-components/queries-preview';
+
+  export default {
+    components: {
+      QueryPreviewButton
+    },
+    data: function () {
+      return {
+        queryPreviewInfo: {
+          query: 'shoes'
+        }
+      };
+    }
+  };
+</script>
+```
+
+## Events
+
+A list of events that the component will emit:
+
+- `UserAcceptedAQueryPreview`: the event is emitted after the user clicks the button. The event
+  payload is the `QueryPreviewInfo` of the query.
+</docs>
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
index 47c5f72413..b97c4aa522 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
@@ -1,7 +1,16 @@
 <template>
   <component :is="animation" class="x-query-preview-list" tag="ul">
-    <li v-for="query in renderedQueries" :key="query" data-test="query-preview-item">
-      <QueryPreview @load="flagAsLoaded" @error="flagAsFailed" v-bind="$attrs" :query="query">
+    <li
+      v-for="(queryPreview, index) in renderedQueryPreviews"
+      :key="index"
+      data-test="query-preview-item"
+    >
+      <QueryPreview
+        @load="flagAsLoaded"
+        @error="flagAsFailed"
+        v-bind="$attrs"
+        :queryPreviewInfo="queryPreview"
+      >
         <template v-for="(_, slotName) in $scopedSlots" v-slot:[slotName]="scope">
           <slot :name="slotName" v-bind="scope" />
         </template>
@@ -17,6 +26,7 @@
   import { xComponentMixin } from '../../../components/x-component.mixin';
   import { RequestStatus } from '../../../store';
   import { queriesPreviewXModule } from '../x-module';
+  import { QueryPreviewInfo } from '../store/types';
   import QueryPreview from './query-preview.vue';
 
   interface QueryPreviewStatusRecord {
@@ -24,8 +34,8 @@
   }
 
   /**
-   * Renders the results previews of a list of queries, and exposes the {@link QueryPreview} slots
-   * to modify the content.
+   * Renders the results previews of a list of objects with the information about the query preview,
+   * and exposes the {@link QueryPreview} slots to modify the content.
    * The requests are made in sequential order.
    *
    * @public
@@ -48,37 +58,54 @@
     public animation!: Vue | string;
 
     /**
-     * List of queries to preview.
+     * The list of queries preview to render.
+     *
+     * @public
      */
     @Prop({ required: true })
-    public queries!: string[];
+    public queriesPreviewInfo!: QueryPreviewInfo[];
 
     /**
      * Contains the status of the preview requests, indexed by query.
      */
     public queriesStatus: QueryPreviewStatusRecord = {};
 
+    /**
+     * The list of queries to preview.
+     *
+     * @returns The list of queries in the queriesPreviewInfo list.
+     * @internal
+     */
+    protected get queries(): string[] {
+      return this.queriesPreviewInfo.map(item => item.query);
+    }
+
     /**
      * Gets all the queries to render, that are those that don't have an `error` status.
      *
      * @returns A list of queries.
      * @internal
      */
-    protected get renderedQueries(): string[] {
-      return this.queries.filter(
-        query => this.queriesStatus[query] === 'success' || this.queriesStatus[query] === 'loading'
+    protected get renderedQueryPreviews(): QueryPreviewInfo[] {
+      return this.queriesPreviewInfo.filter(
+        ({ query }) =>
+          this.queriesStatus[query] === 'success' || this.queriesStatus[query] === 'loading'
       );
     }
 
     /**
      * Resets the status of all queries if they change.
      *
+     * @param newQueries - The new queries.
+     * @param oldQueries - The old queries.
      * @internal
      */
     @Watch('queries', { immediate: true })
-    protected resetStatusRecord(): void {
-      this.queriesStatus = {};
-      this.loadNext();
+    protected resetStatusRecord(newQueries: string[], oldQueries: string[]): void {
+      if (newQueries?.toString() !== oldQueries?.toString()) {
+        this.queriesStatus = {};
+        this.loadNext();
+      }
     }
 
     /**
@@ -126,7 +153,7 @@ names of the results.
 
 ```vue live
 <template>
-  <QueryPreviewList :queries="queries" />
+  <QueryPreviewList :queriesPreviewInfo="queriesPreviewInfo" />
 </template>
 
 <script>
@@ -139,7 +166,7 @@ names of the results.
     },
     data() {
       return {
-        queries: ['sandals', 'tshirt', 'jacket']
+        queriesPreviewInfo: [{ query: 'sandals' }, { query: 'tshirt' }, { query: 'jacket' }]
       };
     }
   };
@@ -152,9 +179,12 @@ In this example, the results will be rendered inside a sliding panel.
 
 ```vue live
 <template>
-  <QueryPreviewList :queries="queries" #default="{ query, totalResults, results }">
+  <QueryPreviewList
+    :queriesPreviewInfo="queriesPreviewInfo"
+    #default="{ queryPreviewInfo, totalResults, results }"
+  >
     <div class="x-flex x-flex-col x-gap-8 x-mb-16">
-      <h1 class="x-title2">{{ query }} ({{ totalResults }})</h1>
+      <h1 class="x-title2">{{ queryPreviewInfo.query }} ({{ totalResults }})</h1>
       <SlidingPanel :resetOnContentChange="false">
         <div class="x-flex x-gap-8">
           <Result
@@ -183,7 +213,7 @@ In this example, the results will be rendered inside a sliding panel.
     },
     data() {
       return {
-        queries: ['sandals', 'tshirt', 'jacket']
+        queriesPreviewInfo: [{ query: 'sandals' }, { query: 'tshirt' }, { query: 'jacket' }]
       };
     }
   };
@@ -198,7 +228,11 @@ In this example, the ID of the results will be rendered along with the name.
 
 ```vue
 <template>
-  <QueryPreviewList class="x-flex x-gap-8" :queries="queries" #result="{ result }">
+  <QueryPreviewList
+    class="x-flex x-gap-8"
+    :queriesPreviewInfo="queriesPreviewInfo"
+    #result="{ result }"
+  >
     <span class="x-font-bold">{{ result.id }}:</span>
     <span>{{ result.name }}</span>
   </QueryPreviewList>
@@ -214,7 +248,7 @@ In this example, the ID of the results will be rendered along with the name.
     },
     data() {
       return {
-        queries: ['sandals', 'tshirt', 'jacket']
+        queriesPreviewInfo: [{ query: 'sandals' }, { query: 'tshirt' }, { query: 'jacket' }]
       };
     }
   };
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index 77db867bf4..c73dae0988 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -2,12 +2,13 @@
   <NoElement v-if="queryPreviewResults && queryPreviewResults.totalResults">
     <!--
       @slot Query Preview default slot.
-          @binding {string} query - query
+          @binding {QueryPreviewInfo} queryPreviewInfo - The information about the request of the
+          query preview
           @binding {Result[]} results - The results preview of the query preview
           @binding {number} totalResults - The total results of the search request
     -->
     <slot
-      :query="query"
+      :queryPreviewInfo="queryPreviewInfo"
       :results="queryPreviewResults.results"
       :totalResults="queryPreviewResults.totalResults"
     >
@@ -35,7 +36,7 @@
   import Vue from 'vue';
   import { Component, Prop, Inject, Watch } from 'vue-property-decorator';
   import { Dictionary } from '@empathyco/x-utils';
-  import { Result, SearchRequest } from '@empathyco/x-types';
+  import { SearchRequest, Result } from '@empathyco/x-types';
   import { State } from '../../../components/decorators/store.decorators';
   import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';
   import { XProvide } from '../../../components/decorators/injection.decorators';
@@ -43,12 +44,13 @@
   import { NoElement } from '../../../components/no-element';
   import { RequestStatus } from '../../../store';
   import { QueryFeature, FeatureLocation } from '../../../types/origin';
-  import { QueryPreviewItem } from '../store/types';
+  import { QueryPreviewInfo, QueryPreviewItem } from '../store/types';
   import { QueriesPreviewConfig } from '../config.types';
   import { queriesPreviewXModule } from '../x-module';
   import { createOrigin } from '../../../utils/origin';
   import { debounce } from '../../../utils/debounce';
   import { DebouncedFunction } from '../../../utils';
+
   /**
    * Retrieves a preview of the results of a query and exposes them in the default slot,
    * along with the query preview and the totalResults of the search request.
@@ -64,14 +66,12 @@
   })
   export default class QueryPreview extends Vue {
     /**
-     * The query to retrieve the results preview.
+     * The information about the request of the query preview.
      *
      * @public
      */
-    @Prop({
-      required: true
-    })
-    protected query!: string;
+    @Prop({ required: true })
+    protected queryPreviewInfo!: QueryPreviewInfo;
 
     /**
      * The origin property for the request.
@@ -163,9 +163,9 @@
       });
 
       return {
-        query: this.query,
+        query: this.queryPreviewInfo.query,
         rows: this.config.maxItemsToRequest,
-        extraParams: this.params,
+        extraParams: { ...this.params, ...this.queryPreviewInfo.extraParams },
         ...(origin && { origin })
       };
     }
@@ -176,7 +176,7 @@
      * @returns The results preview of the actual query preview.
      */
     public get queryPreviewResults(): Partial<QueryPreviewItem> | undefined {
-      const previewResults = this.previewResults[this.query];
+      const previewResults = this.previewResults[this.queryPreviewInfo.query];
       return previewResults?.results
         ? {
             ...previewResults,
@@ -205,7 +205,11 @@
     protected created(): void {
       this.$watch(
         () => this.queryPreviewRequest,
-        request => this.emitQueryPreviewRequestUpdated(request)
+        (newRequest, oldRequest) => {
+          if (JSON.stringify(newRequest) !== JSON.stringify(oldRequest)) {
+            this.emitQueryPreviewRequestUpdated(newRequest);
+          }
+        }
       );
       this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
     }
@@ -222,7 +226,10 @@
       this.emitQueryPreviewRequestUpdated.cancel();
 
       if (this.clearOnDestroy) {
-        this.$x.emit('QueryPreviewUnmountedHook', this.query, { priority: 0, replaceable: false });
+        this.$x.emit('QueryPreviewUnmountedHook', this.queryPreviewInfo.query, {
+          priority: 0,
+          replaceable: false
+        });
       }
     }
 
@@ -251,9 +258,9 @@
     @Watch('queryPreviewResults.status')
     emitLoad(status: RequestStatus | undefined): void {
       if (status === 'success') {
-        this.$emit(this.results?.length ? 'load' : 'error', this.query);
+        this.$emit(this.results?.length ? 'load' : 'error', this.queryPreviewInfo.query);
       } else if (status === 'error') {
-        this.$emit('error', this.query);
+        this.$emit('error', this.queryPreviewInfo.query);
       }
     }
   }
@@ -282,7 +289,7 @@ results.
 
 ```vue live
 <template>
-  <QueryPreview :query="query" />
+  <QueryPreview :queryPreviewInfo="queryPreviewInfo" />
 </template>
 
 <script>
@@ -295,7 +302,7 @@ results.
     },
     data() {
       return {
-        query: 'sandals'
+        queryPreviewInfo: { query: 'sandals' }
       };
     }
   };
@@ -308,7 +315,7 @@ In this example, the results will be rendered inside a sliding panel.
 
 ```vue live
 <template>
-  <QueryPreview :query="query" #default="{ totalResults, results }">
+  <QueryPreview :queryPreviewInfo="queryPreviewInfo" #default="{ totalResults, results }">
     <section>
       <p>Total results: {{ totalResults }}</p>
       <SlidingPanel :resetOnContentChange="false">
@@ -346,7 +353,7 @@ In this example, the results will be rendered inside a sliding panel.
     },
     data() {
       return {
-        query: 'flip-flops'
+        queryPreviewInfo: { query: 'flip-flops' }
       };
     }
   };
@@ -361,7 +368,7 @@ In this example, the ID of the results will be rendered along with the name.
 
 ```vue
 <template>
-  <QueryPreview :query="query" #result="{ result }">
+  <QueryPreview :queryPreviewInfo="queryPreviewInfo" #result="{ result }">
     <span>{{ result.id }}</span>
     <span>{{ result.name }}</span>
   </QueryPreview>
@@ -377,7 +384,7 @@ In this example, the ID of the results will be rendered along with the name.
     },
     data() {
       return {
-        query: 'flips-flops'
+        queryPreviewInfo: { query: 'flip-flops' }
       };
     }
   };
@@ -390,7 +397,11 @@ In this example, the query preview has been limited to render a maximum of 4 res
 
 ```vue
 <template>
-  <QueryPreview :maxItemsToRender="maxItemsToRender" :query="query" #default="{ results }">
+  <QueryPreview
+    :maxItemsToRender="maxItemsToRender"
+    :queryPreviewInfo="queryPreviewInfo"
+    #default="{ results }"
+  >
     <BaseGrid #default="{ item }" :items="results">
       <BaseResultLink :result="item">
         <BaseResultImage :result="item" />
@@ -414,7 +425,7 @@ In this example, the query preview has been limited to render a maximum of 4 res
     data() {
       return {
         maxItemsToRender: 4,
-        query: 'flips-flops'
+        queryPreviewInfo: { query: 'flip-flops' }
       };
     }
   };
diff --git a/packages/x-components/src/x-modules/queries-preview/events.types.ts b/packages/x-components/src/x-modules/queries-preview/events.types.ts
index 42bad856ea..eab70ddeb8 100644
--- a/packages/x-components/src/x-modules/queries-preview/events.types.ts
+++ b/packages/x-components/src/x-modules/queries-preview/events.types.ts
@@ -1,4 +1,6 @@
 import { SearchRequest } from '@empathyco/x-types';
+import { Dictionary } from '@empathyco/x-utils';
+import { QueryPreviewInfo } from './store/index';
 
 /**
  * Dictionary of the events of QueriesPreview XModule, where each key is the event name, and the
@@ -17,4 +19,16 @@ export interface QueriesPreviewXEvents {
    * Payload: The query whose preview has been removed.
    */
   QueryPreviewUnmountedHook: string;
+  /**
+   * User has clicked on a query preview.
+   * Payload: The {@link QueryPreviewInfo | query preview info}
+   * of the selected {@link QueryPreviewItem | item}.
+   */
+  UserAcceptedAQueryPreview: QueryPreviewInfo;
+  /**
+   * The query preview has been unselected.
+   * Payload: The extra params to be restored in the modules affected by the
+   * query preview selection.
+   */
+  QueryPreviewUnselected: Dictionary<unknown>;
 }
diff --git a/packages/x-components/src/x-modules/queries-preview/store/emitters.ts b/packages/x-components/src/x-modules/queries-preview/store/emitters.ts
index 7e2464970f..1772e166a6 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/emitters.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/emitters.ts
@@ -6,4 +6,10 @@ import { queriesPreviewXStoreModule } from './module';
  *
  * @internal
  */
-export const queriesPreviewEmitters = createStoreEmitters(queriesPreviewXStoreModule, {});
+export const queriesPreviewEmitters = createStoreEmitters(queriesPreviewXStoreModule, {
+  QueryPreviewUnselected: {
+    selector: state =>
+      !state.selectedQueryPreview ? state.params : state.selectedQueryPreview.extraParams!,
+    filter: (newValue, oldValue, state) => !state.selectedQueryPreview
+  }
+});
diff --git a/packages/x-components/src/x-modules/queries-preview/store/module.ts b/packages/x-components/src/x-modules/queries-preview/store/module.ts
index 423f76cdc1..5a5836ed80 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/module.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/module.ts
@@ -15,6 +15,10 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
       maxItemsToRequest: 24
     },
     queriesPreview: {},
+    selectedQueryPreview: {
+      query: '',
+      extraParams: undefined
+    },
     params: {}
   }),
   getters: { loadedQueriesPreview },
@@ -30,6 +34,9 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
     },
     setStatus(state, { query, status }) {
       state.queriesPreview[query].status = status;
+    },
+    setSelectedQueryPreview(state, selectedQueryPreview) {
+      state.selectedQueryPreview = selectedQueryPreview;
     }
   },
   actions: {
diff --git a/packages/x-components/src/x-modules/queries-preview/store/types.ts b/packages/x-components/src/x-modules/queries-preview/store/types.ts
index 009ef16ded..a6fafad0d6 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/types.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/types.ts
@@ -14,6 +14,8 @@ export interface QueryPreviewItem extends StatusState {
   /**
    * Request object to retrieve the query preview using the search adapter, or null if there is
    * no valid data to conform a valid request.
+   *
+   * @public
    */
   request: SearchRequest;
   /** Results of the query preview request. */
@@ -22,6 +24,22 @@ export interface QueryPreviewItem extends StatusState {
   totalResults: number;
 }
 
+/**
+ * Information to render or request a query preview with.
+ *
+ * @public
+ */
+export interface QueryPreviewInfo {
+  /** The query to search for. */
+  query: string;
+  /** The extra params to perform the search. */
+  extraParams?: Dictionary<unknown>;
+  /** An optional title for the container. */
+  title?: string;
+  /** Any other additional information to render the preview with. */
+  [extra: string]: unknown;
+}
+
 /**
  * QueriesPreview store state.
  *
@@ -34,6 +52,8 @@ export interface QueriesPreviewState {
   config: QueriesPreviewConfig;
   /** The extra params property of the state. */
   params: Dictionary<unknown>;
+  /** The selected query preview of the state. */
+  selectedQueryPreview: QueryPreviewInfo | null;
 }
 
 /**
@@ -78,6 +98,12 @@ export interface QueriesPreviewMutations {
    * @param payload - Object containing the query and the status of a query preview item.
    */
   setStatus(payload: QueryPreviewStatusPayload): void;
+  /**
+   * Sets the selected query preview of the module.
+   *
+   * @param selectedQueryPreview - The selected query preview to save to the state.
+   */
+  setSelectedQueryPreview(selectedQueryPreview: QueryPreviewInfo | null): void;
 }
 
 /**
@@ -94,6 +120,7 @@ export interface QueriesPreviewActions {
    * @returns A search response based on the query.
    */
   fetchQueryPreview(request: SearchRequest): SearchResponse | null;
+
   /**
    * Requests the results for a query preview and saves them in the state.
    *
diff --git a/packages/x-components/src/x-modules/queries-preview/wiring.ts b/packages/x-components/src/x-modules/queries-preview/wiring.ts
index 26e15f62df..7850495252 100644
--- a/packages/x-components/src/x-modules/queries-preview/wiring.ts
+++ b/packages/x-components/src/x-modules/queries-preview/wiring.ts
@@ -46,6 +46,20 @@ export const clearQueryPreviewWire = wireCommit('clearQueryPreview');
  */
 export const setQueriesPreviewExtraParamsWire = wireCommit('setParams');
 
+/**
+ * Updates the state with the selected query preview object.
+ *
+ * @public
+ */
+export const setSelectedQueryPreviewWire = wireCommit('setSelectedQueryPreview');
+
+/**
+ * Clears the selected query preview object from queries preview module.
+ *
+ * @public
+ */
+export const clearSelectedQueryPreviewWire = wireCommit('setSelectedQueryPreview', null);
+
 /**
  * Wiring configuration for the {@link QueriesPreviewXModule | queriesPreview module}.
  *
@@ -58,7 +72,22 @@ export const queriesPreviewWiring = createWiring({
   QueryPreviewUnmountedHook: {
     clearQueryPreviewWire
   },
+  UserAcceptedAQueryPreview: {
+    setSelectedQueryPreviewWire
+  },
   ExtraParamsChanged: {
     setQueriesPreviewExtraParamsWire
+  },
+  UserClearedQuery: {
+    clearSelectedQueryPreviewWire
+  },
+  UserClickedCloseX: {
+    clearSelectedQueryPreviewWire
+  },
+  UserClickedOutOfMainModal: {
+    clearSelectedQueryPreviewWire
+  },
+  UserSelectedAHistoryQuery: {
+    clearSelectedQueryPreviewWire
   }
 });
diff --git a/packages/x-components/src/x-modules/query-suggestions/wiring.ts b/packages/x-components/src/x-modules/query-suggestions/wiring.ts
index 77ed324a0c..cd399e100d 100644
--- a/packages/x-components/src/x-modules/query-suggestions/wiring.ts
+++ b/packages/x-components/src/x-modules/query-suggestions/wiring.ts
@@ -42,6 +42,26 @@ const wireDispatch = namespacedWireDispatch(moduleName);
  */
 export const setQuerySuggestionsQuery = wireCommit('setQuery');
 
+/**
+ * Sets the query-suggestions module query from a selectedQueryPreview's query.
+ *
+ * @public
+ */
+export const setQuerySuggestionsQueryFromPreview = wireCommit(
+  'setQuery',
+  ({ eventPayload: { query } }) => query
+);
+
+/**
+ * Sets the query-suggestions module params from a selectedQueryPreview's extraParams.
+ *
+ * @public
+ */
+export const setQuerySuggestionsExtraParamsFromPreview = wireCommit(
+  'setParams',
+  ({ eventPayload: { extraParams } }) => extraParams
+);
+
 /**
  * Sets the query suggestions state `params`.
  *
@@ -118,5 +138,12 @@ export const querySuggestionsWiring = createWiring({
   },
   UserClickedOutOfMainModal: {
     clearQuerySuggestionsQuery
+  },
+  UserAcceptedAQueryPreview: {
+    setQuerySuggestionsQueryFromPreview,
+    setQuerySuggestionsExtraParamsFromPreview
+  },
+  QueryPreviewUnselected: {
+    setQuerySuggestionsExtraParams
   }
 });
diff --git a/packages/x-components/src/x-modules/related-tags/wiring.ts b/packages/x-components/src/x-modules/related-tags/wiring.ts
index 8373265a61..1fd07d941c 100644
--- a/packages/x-components/src/x-modules/related-tags/wiring.ts
+++ b/packages/x-components/src/x-modules/related-tags/wiring.ts
@@ -38,6 +38,26 @@ const wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleNa
  */
 export const setRelatedTagsQuery = wireCommit('setQuery');
 
+/**
+ * Sets the related tags state `query` from a selectedQueryPreview's query.
+ *
+ * @public
+ */
+export const setRelatedTagsQueryFromPreview = wireCommit(
+  'setQuery',
+  ({ eventPayload: { query } }) => query
+);
+
+/**
+ * Sets the related tags state `params` from a selectedQueryPreview's extraParams.
+ *
+ * @public
+ */
+export const setRelatedTagsExtraParamsFromPreview = wireCommit(
+  'setParams',
+  ({ eventPayload: { extraParams } }) => extraParams
+);
+
 /**
  * Sets the related tags state `params`.
  *
@@ -124,5 +144,13 @@ export const relatedTagsWiring = createWiring({
   },
   UserClickedOutOfMainModal: {
     clearRelatedTagsQuery
+  },
+  UserAcceptedAQueryPreview: {
+    setRelatedTagsQueryFromPreview,
+    clearSelectedRelatedTags,
+    setRelatedTagsExtraParamsFromPreview
+  },
+  QueryPreviewUnselected: {
+    setRelatedTagsExtraParams
   }
 });
diff --git a/packages/x-components/src/x-modules/search-box/wiring.ts b/packages/x-components/src/x-modules/search-box/wiring.ts
index 3f7b77dc1a..fd8a3194f5 100644
--- a/packages/x-components/src/x-modules/search-box/wiring.ts
+++ b/packages/x-components/src/x-modules/search-box/wiring.ts
@@ -36,6 +36,13 @@ const wireDispatch = namespacedWireDispatch(moduleName);
  */
 const setSearchBoxQuery = wireCommit('setQuery');
 
+/**
+ * Sets the search state `query` with the selectedQueryPreview's query.
+ *
+ * @public
+ */
+const setSearchBoxQueryFromPreview = wireCommit('setQuery', ({ eventPayload: { query } }) => query);
+
 /**
  * Clears the query of the search-box module.
  *
@@ -81,6 +88,10 @@ export const searchBoxWiring = createWiring({
     setSearchBoxQuery,
     transitionState: setInputStatus('UserAcceptedAQuery')
   },
+  UserAcceptedAQueryPreview: {
+    setSearchBoxQueryFromPreview,
+    transitionState: setInputStatus('UserAcceptedAQuery')
+  },
   UserPressedClearSearchBoxButton: {
     clearSearchBoxQuery
   },
diff --git a/packages/x-components/src/x-modules/search/store/types.ts b/packages/x-components/src/x-modules/search/store/types.ts
index 7d06536da0..f651ce4820 100644
--- a/packages/x-components/src/x-modules/search/store/types.ts
+++ b/packages/x-components/src/x-modules/search/store/types.ts
@@ -35,9 +35,9 @@ export interface SearchState extends StatusState, QueryState {
   facets: Facet[];
   /** A flag to indicate if new results are append to the current instead of replacing them. */
   isAppendResults: boolean;
-  /** Flag indicating if there is a no results situation */
+  /** Flag indicating if there is a no results situation. */
   isNoResults: boolean;
-  /** Flag indicating if there is a no results situation with filters selected */
+  /** Flag indicating if there is a no results situation with filters selected. */
   fromNoResultsWithFilters: boolean;
   /** The origin property of the request. */
   origin: QueryOrigin | null;
diff --git a/packages/x-components/src/x-modules/search/wiring.ts b/packages/x-components/src/x-modules/search/wiring.ts
index df4dc43f24..15e6473f31 100644
--- a/packages/x-components/src/x-modules/search/wiring.ts
+++ b/packages/x-components/src/x-modules/search/wiring.ts
@@ -182,6 +182,26 @@ export const resetStateIfNoRequestWire = filterTruthyPayload<InternalSearchReque
   wireCommitWithoutPayload('resetState')
 );
 
+/**
+ * Sets the search state `query` with the selectedQueryPreview's query.
+ *
+ * @public
+ */
+export const setSearchQueryFromPreview = wireCommit(
+  'setQuery',
+  ({ eventPayload: { query } }) => query
+);
+
+/**
+ * Sets the search state `params` with the selectedQueryPreview's extraParams.
+ *
+ * @public
+ */
+export const setSearchExtraParamsFromPreview = wireCommit(
+  'setParams',
+  ({ eventPayload: { extraParams } }) => extraParams
+);
+
 /**
  * Search wiring.
  *
@@ -241,5 +261,13 @@ export const searchWiring = createWiring({
   },
   UserClickedOutOfMainModal: {
     clearSearchQuery
+  },
+  UserAcceptedAQueryPreview: {
+    setSearchQueryFromPreview,
+    setSearchExtraParamsFromPreview,
+    saveOriginWire
+  },
+  QueryPreviewUnselected: {
+    setSearchExtraParams
   }
 });
diff --git a/packages/x-components/src/x-modules/semantic-queries/wiring.ts b/packages/x-components/src/x-modules/semantic-queries/wiring.ts
index 541e5080c7..53f1432105 100644
--- a/packages/x-components/src/x-modules/semantic-queries/wiring.ts
+++ b/packages/x-components/src/x-modules/semantic-queries/wiring.ts
@@ -8,7 +8,7 @@ import { SearchXEvents } from '../search/events.types';
 import { ExtractMutationPayload } from '../../store/store.types';
 
 /**
- * `semanticQueries` {@link XModuleName name}.
+ * `semanticQueries` {@link XModuleName | name}.
  *
  * @internal
  */
diff --git a/packages/x-components/src/x-modules/url/wiring.ts b/packages/x-components/src/x-modules/url/wiring.ts
index cc47531ef6..681478f0a0 100644
--- a/packages/x-components/src/x-modules/url/wiring.ts
+++ b/packages/x-components/src/x-modules/url/wiring.ts
@@ -22,6 +22,16 @@ export const setUrlRelatedTags = wireCommit('setRelatedTags');
  */
 export const setUrlQuery = wireCommit('setQuery');
 
+/**
+ * Sets the url state `query` with a selectedQueryPreview's query.
+ *
+ * @public
+ */
+export const setUrlQueryFromPreview = wireCommit(
+  'setQuery',
+  ({ eventPayload: { query } }) => query
+);
+
 /**
  * Sets the page of the url module.
  *
@@ -43,6 +53,16 @@ export const setUrlSort = wireCommit('setSort');
  */
 export const setParams = wireCommit('setParams');
 
+/**
+ * Sets the extra params of the url module from a selectedQueryPreview's extraParams.
+ *
+ * @public
+ */
+export const setUrlParamsFromPreview = wireCommit(
+  'setParams',
+  ({ eventPayload: { extraParams } }) => extraParams
+);
+
 /**
  * Sets the scroll of the url module.
  *
@@ -76,6 +96,10 @@ export const urlWiring = createWiring({
   UserAcceptedAQuery: {
     setUrlQuery
   },
+  UserAcceptedAQueryPreview: {
+    setUrlQueryFromPreview,
+    setUrlParamsFromPreview
+  },
   UserClearedQuery: {
     setUrlQuery
   },
diff --git a/packages/x-components/static-docs/experience-search-and-discovery/recommendations.md b/packages/x-components/static-docs/experience-search-and-discovery/recommendations.md
index bcdb56825d..da5e91c660 100644
--- a/packages/x-components/static-docs/experience-search-and-discovery/recommendations.md
+++ b/packages/x-components/static-docs/experience-search-and-discovery/recommendations.md
@@ -11,22 +11,24 @@ tags:
 redirect_from:
   - /explore-empathy-platform/experience-search-and-discovery/recommendations.html
   - /explore-empathy-platform/experience-search-and-discovery/recommendations
-
 ---
 
-Product recommendations, such as Top Products, Brand Recommendations, Next Products, and Vectorized Recommendations, help your shoppers explore your product catalogue, guiding them to specific products without the need to launch any queries.
+Product recommendations, such as Top Products, Brand Recommendations, Next Products, and Vectorized
+Recommendations, help your shoppers explore your product catalogue, guiding them to specific
+products without the need to launch any queries.
 
 <!-- ![Recommendations](~@assets/x/interface/x-recommendations.gif) -->
+
 ![Recommendations](~@assets/x/interface/x-recommendations.svg)
 
 ::: interact  
 Can't quite capture the concept? Learn more about
-[Recommendations](/explore-empathy-platform/features/recommendations-overview.md).
-:::
+[Recommendations](/explore-empathy-platform/features/recommendations-overview.md). :::
 
-## Product recommendation modules and components  
+## Product recommendation modules and components
 
-The Interface X Components library includes the following modules and components to layout multiple experiences to show product recommendations in your search UI:
+The Interface X Components library includes the following modules and components to layout multiple
+experiences to show product recommendations in your search UI:
 
 <CardCarousel :cards="[
     'ui_ref/recommendations',
@@ -38,17 +40,21 @@ The Interface X Components library includes the following modules and components
 
 ::: warning
 
-For correct performance, make sure that your current search service supports
-this type of features.
+For correct performance, make sure that your current search service supports this type of features.
 
 :::
 
 ## Tailor the web experience
-Based on your business strategy and your shoppers’ needs, the Interface X Components library offers the following configuration options and properties:
 
-::: details Top Products UI experience
-Use the Recommendations module to configure the layout of Top Products in your commerce search UI. You can:
-- Configure the position and place it wherever you prefer, although it commonly appears in the results grid when low results are retrieved or in the no results layout after no matches are found.
+Based on your business strategy and your shoppers’ needs, the Interface X Components library offers
+the following configuration options and properties:
+
+::: details Top Products UI experience Use the Recommendations module to configure the layout of Top
+Products in your commerce search UI. You can:
+
+- Configure the position and place it wherever you prefer, although it commonly appears in the
+  results grid when low results are retrieved or in the no results layout after no matches are
+  found.
 - Show as many product recommendations as you want.
 - Animate the display of the component at your ease.
 - Customize content. Show whatever you need: text, images, icons.
@@ -56,56 +62,73 @@ Use the Recommendations module to configure the layout of Top Products in your c
 
 :::
 
+::: details Vectorized Recommendations UI experience
 
-::: details Vectorized Recommendations UI experience    
+Use the Semantics Queries module to configure the layout of Vectorized Recommendations in your
+commerce search UI. You can:
 
-Use the Semantics Queries module to configure the layout of Vectorized Recommendations in your commerce search UI. You can:
-- Configure the position and place it wherever you prefer, although it usually appears on the SERP, among the product results.
-- Show as many product recommendations as you want. Display the total number of recommendations shown.
-- Use different layouts: carousel, list, grid. Although, a carousel or horizontal slider panel is the preferred layout.
+- Configure the position and place it wherever you prefer, although it usually appears on the SERP,
+  among the product results.
+- Show as many product recommendations as you want. Display the total number of recommendations
+  shown.
+- Use different layouts: carousel, list, grid. Although, a carousel or horizontal slider panel is
+  the preferred layout.
 - Animate the display of the component at your ease.
 - Customize content. Although, the name of product recommendations is shown by default.
-- Extend the performance with query preview-related components to display related content, such as the suggested query, product result images, and links.
+- Extend the performance with query preview-related components to display related content, such as
+  the suggested query, product result images, and links.
 
-::: 
+:::
 
+::: details Brand Recommendations UI experience
 
-::: details Brand Recommendations UI experience  
+Use the Queries Preview module to configure the layout of Brand Recommendations in your commerce
+search UI. You can:
 
-Use the Queries Preview module to configure the layout of Brand Recommendations in your commerce search UI. You can:
-- Configure the position and place it wherever you prefer, although it usually appears at the pre-search stage.
+- Configure the position and place it wherever you prefer, although it usually appears at the
+  pre-search stage.
 - Display the suggested queries and the total number of recommendations shown.
-- Use different layouts: carousel, list, grid. Although, a carousel or horizontal slider panel is the preferred layout.
+- Use different layouts: carousel, list, grid. Although, a carousel or horizontal slider panel is
+  the preferred layout.
 - Animate the display of the component at your ease.
 - Customize content. Although, the name of product recommendations is shown by default.
-- Customize the Result Cards by combining result data and result components as images or links to match the SERP or create a different component for this use case.
+- Customize the Result Cards by combining result data and result components as images or links to
+  match the SERP or create a different component for this use case.
 
 :::
 
+::: details Next Products UI experience
 
-::: details Next Products UI experience  
+Use the Next Query Preview component to configure the layout of Next Products in your commerce
+search UI. You can:
 
-Use the Next Query Preview component to configure the layout of Next Products in your commerce search UI. You can:
-- Configure the position and place it wherever you prefer, although it usually appears on the SERP, among the product results.
-- Show as many product recommendations as you want. Display the total number of recommendations shown.
-- Use different layouts: carousel, list, grid. Although, a carousel or horizontal slider panel is the preferred layout.
-- Customize content. Although, the suggested query and the name of product recommendations are shown by default.
-- Extend the performance with result-related components to display related content, such as product result images and links.
+- Configure the position and place it wherever you prefer, although it usually appears on the SERP,
+  among the product results.
+- Show as many product recommendations as you want. Display the total number of recommendations
+  shown.
+- Use different layouts: carousel, list, grid. Although, a carousel or horizontal slider panel is
+  the preferred layout.
+- Customize content. Although, the suggested query and the name of product recommendations are shown
+  by default.
+- Extend the performance with result-related components to display related content, such as product
+  result images and links.
 
 :::
 
-Note that the Interface X modules and components help you build a configurable UI experience. Even though the UI layout for product recommendations may be similar, sharing multiple configuration options, the source of data differs from one to another:
+Note that the Interface X modules and components help you build a configurable UI experience. Even
+though the UI layout for product recommendations may be similar, sharing multiple configuration
+options, the source of data differs from one to another:
 
-| Type of product recommendation | X Components | Source of data 
-| ---------------- | ---------------- | ---------------- | ---------------- 
-| **Top Products** | [Recommendations](/develop-empathy-platform/ui-reference/components/recommendations/x-components.recommendations.md) component | [Search API](/develop-empathy-platform/api-reference/search-api.md) - Top Clicked endpoint 
-| **Vectorized Recommendations** | [Semantic Queries](/develop-empathy-platform/ui-reference/components/semantic-queries/) module | Semantics API 
-| **Brand Recommendations** | [Queries Preview](/develop-empathy-platform/ui-reference/components/queries-preview/) module | [Snippet configuration](/develop-empathy-platform/build-search-ui/web-archetype-integration-guide.md#snippet-configuration) - Initialization options (*Manually configured by merchants and brand managers)
-| **Next Products** | [Next Query Preview](/develop-empathy-platform/ui-reference/components/next-queries/x-components.next-query-preview.md) component| Next Queries endpoint from the [Beacon API](/develop-empathy-platform/api-reference/beacon-api.md) 
+| Type of product recommendation | X Components                                                                                                                      | Source of data                                                                                                                                                                                               |
+| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Top Products**               | [Recommendations](/develop-empathy-platform/ui-reference/components/recommendations/x-components.recommendations.md) component    | [Search API](/develop-empathy-platform/api-reference/search-api.md) - Top Clicked endpoint                                                                                                                   |
+| **Vectorized Recommendations** | [Semantic Queries](/develop-empathy-platform/ui-reference/components/semantic-queries/) module                                    | Semantics API                                                                                                                                                                                                |
+| **Brand Recommendations**      | [Queries Preview](/develop-empathy-platform/ui-reference/components/queries-preview/) module                                      | [Snippet configuration](/develop-empathy-platform/build-search-ui/web-archetype-integration-guide.md#snippet-configuration) - Initialization options (\*Manually configured by merchants and brand managers) |
+| **Next Products**              | [Next Query Preview](/develop-empathy-platform/ui-reference/components/next-queries/x-components.next-query-preview.md) component | Next Queries endpoint from the [Beacon API](/develop-empathy-platform/api-reference/beacon-api.md)                                                                                                           |
 
 ::: interact
 
-Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
-your web experience.
+Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/) your web
+experience.
 
 :::
diff --git a/packages/x-components/tests/e2e/extra-params.feature b/packages/x-components/tests/e2e/extra-params.feature
index c8d2fa631a..f5325d786a 100644
--- a/packages/x-components/tests/e2e/extra-params.feature
+++ b/packages/x-components/tests/e2e/extra-params.feature
@@ -15,10 +15,10 @@ Feature: Extra-params component
     Then  popular searches request contains extra parameter "<ExtraParamName>" with value "<InitialExtraParamValue>"
     And   recommendations request contains extra parameter "<ExtraParamName>" with value "<InitialExtraParamValue>"
     # These are the initial query preview requests for the no-search carousels
+    And   search request contains extra parameter "<ExtraParamName>" with value "<QueryPreviewExtraParamValue>"
     And   search request contains extra parameter "<ExtraParamName>" with value "<InitialExtraParamValue>"
     And   search request contains extra parameter "<ExtraParamName>" with value "<InitialExtraParamValue>"
-    And   search request contains extra parameter "<ExtraParamName>" with value "<InitialExtraParamValue>"
-    And   search request contains extra parameter "<ExtraParamName>" with value "<InitialExtraParamValue>"
+    And   search request contains extra parameter "<ExtraParamName>" with value "<QueryPreviewExtraParamValue>"
     And   search request contains extra parameter "<ExtraParamName>" with value "<InitialExtraParamValue>"
     # End of query preview requests
 
@@ -45,5 +45,5 @@ Feature: Extra-params component
     And   related tags request contains extra parameter "<ExtraParamName>" with value "<NewExtraParamValue>"
 
     Examples:
-      | query | ExtraParamName | InitialExtraParamValue | NewExtraParamValue |
-      | lego  | store          | Portugal               | Spain              |
+      | query | ExtraParamName | InitialExtraParamValue | QueryPreviewExtraParamValue | NewExtraParamValue |
+      | lego  | store          | Portugal               | Gijón                       | Spain              |