> For the complete documentation index, see [llms.txt](https://docs.crobox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.crobox.com/how-to-guides/product-finders/finder-editor/page-settings.md). # Page Settings This guide provides detailed instructions on general page settings, plus settings for Landing, Loading, Question, Results, and Category Results pages. ## General Page Settings These settings are applicable to every page in your product finder flow, and can be accessed by selecting the Page Settings button at the bottom left of a specific page/question within your flow. Here, you can select what the page will operate as from several predefined page types. This will then define which types of settings you can further apply within the question editor. Additionally, you will define the Page Key, which acts as a unique identifier for each page. ### Page Types [**Landing Page:**](#landing-page) This page serves as the entry point for users, featuring an introductory message or educational content on what the user should expect. [**Question Page:**](#question-page) This page type allows to ask relevant questions and gather data for personalized product recommendations. Within the question editor, select different question types to enhance question visualization and content (such as single select, multi-select, slider or checkbox). [**Loading Page:**](#loading-page) A transitional page that appears while data is being processed or recommendations on the results page is loading. [**Results Page:**](#results-page) The final page where product recommendations are displayed to users based on their answers, including optional complementary product information to help a users understanding of why this product is right for their needs/preferences. [**Category Results Page:**](#category-results-page) A results format that groups recommendations into category slots to help you recommend a set of products from multiple categories, like a routine based finder or a set of products that work together. **Custom Page Type:** If you have access to custom page types based on your plan, you can select one of your personalized page layouts to fit specific needs. {% hint style="info" %} If included in your plan, you can select one of your [custom page types](/technical-documentation/custom-themes-and-css.md). Contact your Customer Success Manager for details. {% endhint %} ### Page Key The Page Key is a unique identifier for each page within your flow. It is crucial that these keys are short, simple, and consistent across your Finder flow. Changing a page key after the Finder is live could disrupt tracking and analytics, so it’s important to consider consistency once the Finder is published. {% embed url="" %} Watch how to select and interact with your page types. {% endembed %} ## Landing Page The Landing Page serves as the starting point for the user journey. It usually includes introductory content and branding elements to orient the user. Follow the available options below to configure your Landing Page settings effectively. * **Content Fields** – Add text, images, or HTML content to welcome users to the Finder or introduce your products/services. * **Background Color/Image** – Choose a solid background color or upload an image for visual appeal. * **Different for mobile res** – Enable this toggle to set a separate background image for mobile devices. This allows you to use a smaller file size or differently cropped image that displays better on narrower screens. * **Different for Wide Screen Mode** – Enable this toggle to set a separate background image optimized for wide screen displays. This is useful when your Finder is displayed on a landing page or inline activation where the wider viewport benefits from a higher-resolution or differently cropped image. * **CSS Input Fields** – Customize the page’s appearance further with CSS for advanced styling options (e.g., adjust fonts, layout, spacing). ## Loading Page The Loading Page appears while the Finder is processing data or transitioning between pages. You can create a seamless experience for the user by providing visual cues or interactive elements. Follow the available options below to configure your Loading Page settings effectively. * **Content Fields** – Add messages to inform the user that the Finder is loading or processing their request. * **Typing Effect** – Enable a typing effect to simulate a dynamic, real-time loading process. * **Background Color/Image** – Similar to the Landing Page, you can choose a background color or image. * **CSS Input Fields** – Additional styling for the Loading Page can be customized with CSS. ## Question Page The Question Page collects user input and plays a pivotal role in the product recommendation flow. This page features various settings to control the logic behind how questions and answers are presented to users. Follow the steps below to configure your Question Page settings effectively. {% stepper %} {% step %} #### Dynamic Answers The Dynamic Answers setting enables real-time filtering of the available answers based on the product inventory. This feature ensures that only relevant answers are shown, based on the user’s journey and the available products. If no relevant products exist for a particular answer path, that answer or question will be skipped, preventing the user from continuing down an irrelevant path. * Select the Dynamic Answer field and select from the options for this question's dynamic answer function to activate real-time filtering. * **Use General Setting** – Select to use your [pre-defined overall dynamic answer logic](/how-to-guides/product-finders/setup-your-advisor.md#finder-settings), set up in the general Finder settings. * **Enabled** – Select to activate dynamic answers and real-time filtering. * **Disabled** – Select to deactivate dynamic answers and real-time filtering. {% endstep %} {% step %} #### Auto-Submit With the Auto-Submit functionality, a user’s selection can instantly trigger the next page. This is especially useful when your questions are straightforward or when you want a faster flow experience. Note that this is not available for all question types, such as Multi-Choice questions. {% endstep %} {% step %} #### Customize Question Pages * **Show Skip Button Toggle** – Activate the visibility of the Skip button by selecting the toggle, which allows users to bypass a question if desired. If not activated, this will not show as an option for the user. * **Continue Button Text** – Customize the text that appears on the Continue button, which leads users to the next step after answering a question (e.g., “Next” or “Submit”). * **Skip Button Text** – Customize the text that appears on the Skip button, which leads users to the next question and does not require them to select an answer. * **CSS Input Fields** – Add custom CSS to style the Question Page to match your brand’s design guidelines. This includes fonts, colors, button styles, and more. {% endstep %} {% endstepper %} ## Results Page The Results Page is the final step in your product finder journey, displaying tailored product recommendations based on the user's responses. This page plays a key role in guiding users toward purchase decisions. Follow the steps below to configure your Results Page settings effectively. {% stepper %} {% step %} #### Set the Number of Product Recommendations Define the maximum number of products to display on the Results Page. While you can specify a set number (e.g., 5), the actual number shown will depend on product availability—if only 3 relevant products match the user’s selections, only those 3 will be displayed. Products are presented in a vertical scroll format. {% endstep %} {% step %} #### Customize Results Page Content Tailor the content on the Results Page to align with your brand's messaging. You can adjust the following fields: * **Title** – Edit the main heading displayed on the results page to best describe the results or offer users a clear context, ***"Recommended for you"***. * **Alternatives Title** – Customize the title of the section where alternative recommendations are shown to users. * **Show Answer Summary** – Toggle this option to allow users to view the answers selected during the question flow. When enabled, a collapsible component at the top of the page provides a quick overview of key information for easy access. * **Answer Summary Title** – Set a custom title for the answer summary section, ensuring clarity and relevance, ***"Your Selection"***. * **Benefits Section Title** – Personalize the title of the Benefits section to highlight key advantages (or disadvantages) of the products and guide users toward informed decisions. * **Best Match Badge Text** – Modify the text used for the "Best Match" badge that highlights the most relevant result for the user. The badge is located at the top left of the product image. * **Alternative Match Badge Text** – Customize the text for the "Good Match" badge to give users clearer context about the products displayed as alternatives. * **Show More Button** – Enable this toggle to display a "Show More" button at the bottom of the Results Page when the number of matching products exceeds your maximum product display setting. This allows users to load additional recommendations on demand, preventing information overload while ensuring all relevant products remain accessible. Customize the button text to match your brand voice (e.g., "View All Results," "See More Options," or "Load More Products"). * **Reopen on Back** – Enable this toggle to reopen the Results Page when a user clicks through to a product detail page (PDP) and then navigates back. Rather than returning to a closed or reset state, the Finder reopens with their results still visible — letting users continue browsing recommendations without losing their place. {% endstep %} {% step %} #### Customize Product Information Display Enhance the user experience by enabling key product details: * **Show Price** – Display the product price alongside each recommendation. * **Show Product Variants Selector** – If the product has multiple variants (e.g., sizes, colors), allow users to select their preferred variant from the results page. For example, if you have products that come in multiple colors. The visitor can select their preferred color via small thumbnail images. Make sure you have, in this example, the color property targeted to Variant level, and set up as "Defines a variant". * **Show Alternative Images** – Enable this setting to allow users to browse multiple product images directly on the Results Page. Ensure your product feed receives alternative images. * **Show Review Stars** – Display customer ratings pulled from your product data to help users make informed decisions. Ensure your product feed receives review information in numerical format. * **Show Product Description** – Activate the product description setting to include a brief description of each recommended product to provide more context, pulling directly from your product data. * **Benefits Default Open** – Enable this setting to display the product benefits section in an expanded state by default. This ensures that key selling points and unique product advantages are immediately visible to users without requiring additional clicks. {% embed url="" %} Product Variants in action, see how your users can best interact with your Product offering on the results page. {% endembed %} {% endstep %} {% step %} #### Set Up Call-to-Actions Guide users toward the next step by customizing the primary and secondary CTA buttons. Some CTA fields support accessibility and localization: * Accessibility - Use Aria labels and announcement text to improve screen reader support. * Localization - Use the Translations tab to localize CTA text and announcement text for different regions, alongside your other finder content. Configurable fields: * **Show Secondary CTA Button -** Toggle this on to display a secondary CTA button alongside the primary CTA. * **Show Secondary CTA Button for Alternatives -** Toggle this on to show the secondary CTA on alternative product recommendations as well. * **Secondary CTA Text Type -** Choose how the secondary CTA label is defined. For example, you can source it from a component value. * **Secondary CTA Component -** Select the component value used for the secondary CTA when the chosen text type requires it. * **Enable Action for Image & Title -** Toggle this on to apply the primary CTA action to clicks on the product image and product title, making navigation behaviour consistent across all clickable elements on the results card. When secondary CTA is enabled, an additional Image & Title Action dropdown appears, letting you assign either the primary or secondary action to image and title clicks. * **Primary CTA Button Text -** Define the label displayed on the primary action button (e.g., "Shop Now", "View Product"). This text can also be localized for different regions. * **Primary CTA Aria Label -** Set a descriptive label for the primary button used by assistive technologies. If left empty, the button text is used. * **Primary CTA Action -** Select the action the primary button will perform (e.g., Go to PDP via URL property). Use standard CTAs from the dropdown menu. * **Primary CTA Announcement Text -** Enter the text that will be announced by screen readers immediately before the user is navigated away. For example: "Taking you to the product page." Leave empty to disable the announcement for this button. This text can also be localized. * **Primary CTA Announcement Timeout (ms) -** Set the time in milliseconds the finder waits after triggering the announcement before navigating. This should be long enough for the screen reader to finish reading the announcement text. A default of 2000ms is pre-filled; adjust based on announcement length (roughly 100ms per character plus \~500ms buffer). During this period, the button displays a loading indicator. Use the equivalent Secondary CTA fields to configure the same label, accessibility, action, and announcement behaviour for the secondary button. {% hint style="info" %} The announcement timeout applies to all users on finders where this is configured, not only screen reader users. Since there is no browser API to detect screen reader activity, all users will experience a brief loading delay before navigation. Keep announcement text concise to minimize the delay. {% endhint %} {% hint style="warning" %} Within your finder you can choose from standard CTAs within the dropdown list. For additional customized CTA options, contact your Customer Success Manager. {% endhint %} {% endstep %} {% step %} #### Enable Product Comparison Let visitors compare their results side by side without leaving the Finder. When enabled, a compare checkbox appears on every product card, and selected products collect in a tray at the bottom of the Results Page. Visitors open the comparison from the tray to view the products in a side-by-side table. {% hint style="info" %} Product comparison uses a comparison you've already created. Before enabling it here, go to **Experiences → Product Comparisons** and set up the comparison and the properties visitors can compare. See Product Comparisons for setup steps. {% endhint %} Open the **Comparison** section in your Results Page settings and toggle on **Enable Comparison**. Then configure the following fields: * **Comparison** - Select the product comparison to use. It defines which properties appear in the comparison table and how they're grouped and labeled. * **Checkbox Label** - Sets the label next to the checkbox on each product card. For example, "Compare." * **Compare Button Text** - Sets the label on the tray button that opens the comparison view. * **Product Button Text** - Sets the button label on each product inside the comparison view. For example, "Shop now." * **Maximum Products** - Sets the maximum number of products a visitor can add to the comparison tray. The default is 4. * **Minimum Products** - Sets the number of products a visitor must select before they can compare. The default is 2. * **Show "Compare All" Button** - Adds a second button that compares the top results directly, without the visitor selecting any checkboxes. * **Compare Button Style** - Sets the style of the Compare button. For example, Primary. * **Show Compare Icon** - Shows a compare icon next to the Compare button text. * **Clear Selection Aria Label** - Sets the screen reader label for the button that clears the tray. For example, "Clear comparison." * **Remove Product Aria Label** - Sets the screen reader label for removing a single product from the tray. Supports `{{title}}`. For example, `Remove {{title}} from comparison`. **What visitors see** In the comparison view, each selected product shows its image, title, price, and product button. Properties from your comparison appear row by row, grouped into the property sections you defined. Visitors can turn on **Only show differences** to hide rows where every product has the same value, and remove products from the view or the tray at any time. {% hint style="warning" %} Products with no value for a compared property display a dash (-) in that row. Check that your compared properties are populated across the products your Finder recommends before publishing. {% endhint %} {% endstep %} {% step %} #### Add a Recommender Component Incorporate additional product suggestions alongside the main recommendation, such as relevant accessories that complement the primary item. This feature enhances the user experience by helping customers discover more relevant products and ultimately boosts the average order value (AOV). * Select your pre-defined Recommender from the dropdown menu to integrate it into your page.

Recommenders within Product Finders, optimize your results page by blending Crobox Experiences into a seamless user journey.

{% hint style="warning" %} If you would like Recommender options to be activated within your Finder, contact your Customer Success Manager. {% endhint %} {% endstep %} {% step %} #### Customize Page Appearance Ensure the Results Page aligns with your brand or create signature styling by adjusting: * **Background Color/Image** – Select a solid background color or upload a custom image. * **Different for mobile res** – Enable this toggle to set a separate background image for mobile devices. This allows you to use a smaller file size or differently cropped image that displays better on narrower screens. * **Different for Wide Screen Mode** – Enable this toggle to set a separate background image optimized for wide screen displays. This is useful when your Finder is displayed on a landing page or inline activation where the wider viewport benefits from a higher-resolution or differently cropped image. * **CSS Input Fields** – Apply custom CSS styles to match your branding and enhance page layout/styles. {% endstep %} {% endstepper %} ### Best Practices for Results Page

Reassure Users with Product Benefits

Include clear messaging within benefits to explain why the product was recommended, based on their selections. For example, “High protein content to support muscle growth.”

Accurate Recommendations

Test your Finder’s logic to ensure users receive the most relevant results. Use Ranking and Sorting Rules to automate and refine product selection based on each user’s journey.

Product Information

Provide enough product information to help users make decisions. This includes pricing, reviews, and key product highlights.

Clear CTAs

Ensure that the CTA buttons are visible and easy to understand. Users should know exactly what action they should take next.

Compare What Matters

Choose comparison properties that help visitors decide between similar products, like size, capacity, or key features. Fewer, well-populated properties make differences easier to spot than a long list of empty rows.

## Category Results Page Category Results is available from the **Page Type** dropdown in **Page Settings**. It groups recommendations into category slots, rather than a single ranked list. For example, a hair-care Finder can show shampoo, conditioner, and styling slots. An apparel Finder can show jacket, top, and shorts slots. Each category uses products that remain after your question-level filters. Each slot follows your existing Finder ranking rules. Set **Page Type** to **Category Results** to use this format. The dropdown also includes Carousel Results, Landing, Loading, Question, and the standard [Results Page](#results-page). {% hint style="warning" %} Changing an existing results page to Category Results changes the available settings. Review every section after switching. Category-specific fields do not transfer automatically. {% endhint %} {% hint style="info" %} Category slots are defined at the Finder level, not on this page. Before configuring the fields below, go to **Setup** → **Data** → **Product Grouping**. Set **Group By (First level)** to the product property that splits results into slots. For example, use Product Type or Category. Each distinct property value becomes one category slot. Select the same property for **Category Heading Property** on this page. This keeps slot headings aligned with the result grouping. Use **Product Ranking** in the same **Data** tab to control the first category slot. Add a ranking rule for each category value. Give higher points to categories that should appear first. For example, give “Product Type is equal to Shampoo” 100 points and “Product Type is equal to Conditioner” 80 points. {% endhint %} {% stepper %} {% step %} #### Set the Number of Products Shown Use **Nr. of Products Shown** to set the maximum across all category slots. Fewer products display when fewer eligible products exist. {% endstep %} {% step %} #### Customize Category Results Content * **Page Title (H3)** – The main heading on the results page. * **Show Answers Summary** – Shows a collapsible summary of selected answers. * **Answers Summary Title** – Sets the summary heading. * **Benefits Section Title (H4)** – Sets the heading above each product's benefits. * **Best Match Badge Text** / **Alternative Match Badge Text** – Labels a slot's top-ranked product and alternatives. For example, “Best Match” and “Good Match.” * **Reopen on Back** – Keeps results visible when visitors return from a product page. * **Show Category Headings** – Shows a heading above each category slot. * **Category Heading Property** – Selects the product property for each slot heading. For example, use a category or product-line property from your feed. * **Alternative Button Text** – Labels the button that reveals a slot's alternatives. * **Previous Alternative Aria Label** / **Next Alternative Aria Label** – Sets accessible labels for alternative navigation. * **Product Position Announcement** – Announces an alternative's position to screen readers. Supports `{{current}}`, `{{total}}`, and `{{title}}`. For example, `Product {{current}} of {{total}}: {{title}}`. {% endstep %} {% step %} #### Customize Product Information Display These options work like the standard [Results Page](#results-page): * **Show Price** – Includes Price, Sale Price, and Original Price Aria Labels. * **Show Product Variants Selector** – Includes Pick Variants By and Variants Title. * **Show Alternative Images** * **Show Review Stars** * **Show Product Description** – Includes Description Section Title and Description Product Property. * **Benefits Default Open** {% endstep %} {% step %} #### Set Up Call-to-Actions Primary and secondary CTA fields work like the standard [Results Page](#results-page). These include button text, Aria Label, Action, Announcement Text, and Announcement Timeout. Category Results also supports: * **Show "Add All" Button** – Shows one button for all visible products. This includes any alternatives visitors select. It excludes alternatives they do not open. * **Add All Button Text** – Sets the button label. For example, “Add All Products to Cart.” * **Add All Action** – Selects the action. For example, Add-to-cart. {% endstep %} {% step %} #### Configure Layout * **Layout** – Choose **Vertical** for stacked slots. Choose **Grid / PLP** for a responsive grid. * **Columns (Desktop / Tablet)** – Sets grid columns for desktop and tablet. Mobile always uses one column. {% endstep %} {% step %} #### Customize Page Appearance **Background Color/Image** and **CSS Input Fields** work like the standard [Results Page](#results-page). {% endstep %} {% endstepper %} ### Best Practices for Category Results Page

Keep slot count intentional

More category slots need more scrolling or a wider grid. Use only categories that help visitors choose.

Confirm your Category Heading Property early

This property groups and labels slots. Check it against your product feed before you build the page.

Test alternatives coverage

Slots with one eligible product do not show an alternatives control. Ensure your targeting rules leave choice where it matters.

Match layout to catalog size

Use Vertical for smaller slot counts or routines. Use Grid / PLP when visitors benefit from viewing many categories together.

--- # 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.crobox.com/how-to-guides/product-finders/finder-editor/page-settings.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.