Relevant blocks: Product Finder Listing Block, Product Finder Block
This solution was created to cover the need for creating a structured listing/overview of several products, with a filter set to be able to narrow down the displayed products, and additionally a view to easily compare products that the user select.
That said, this solution can easily be used for other contexts as well, anything from showing an overview of offers in a discount program to showing a structured library of articles and guides, or even testimonials sorted by business area etc.
On a long page, start by creating a new “Product Finder Listing Block”.
(There are a number of settings on this block to configure it for usage, see more details about this in the detailed usage description)
Define tags for the filter dropdowns in the “tags” tab on the listing block (up to 3 dropdowns)
Create any number of “Product Finder Blocks”, either “for this block only” or as a part of the block hierarchy in Episerver, and drag those to the “products” area on the “products” tab of the “Product Finder Listing Block”. When creating a “Product Finder Block”, add relevant tags to the block that match the tags listed on the listing block
The listing block will now display the products in question, and the user can filter the products by choosing tags from the dropdowns.
First, create a “Product Finder Listing Block” anywhere on a long page.
The “Product Finder Listing Block” has the following settings that need to be set (or left intentionally blank to leave out that specific field / feature):
Add Product Finder Blocks here
Mobile menu Toggle text – the text that will display beside the mobile menu toggle
Dropdown 1/2/3 heading – The default text for dropdown 1/2/3
Checkbox: Show tags on products – This will enable/disable showing the user the tags that have been added to a product on the frontend. While enabled, these tags can be clicked to display other products with the same tags.
Checkbox: Disable compare feature – This hides the “compare” buttons at the bottom of the Product Finder Blocks
Checkbox: Enable Alphabetical Filter – This displays a menu below the filter dropdowns with the starting letters of all products, so the user can easily scroll down to products starting with the required letter. Most useful when there are many products, we recommend leaving this unchecked when there are few products, to save screen real estate.
Alphabetical filter description – the explanatory text shown accompanying the alphabetical filter navigation
Read more link text – The text for the link that allows the user to expand more text about the product
Read less link text – The text for the link that allows the user to collapse more text about the product
Compare radio button text – The text beside the “compare” buttons at the bottom of the product finder blocks.
Compare selected products button text – the text for the CTA button that appears at the top of the page when selecting 2 or more products – this CTA opens the side by side comparison view. By adding the variable “##NumberOfProducts##” to the text, you can achieve texts like “Compare your 3 selected products” instead of just “Compare your selected products”, if you prefer.
Swipe instructions for compare on mobile – a text displayed at the top of the page on the compare page on mobile, prompting the user to swipe sideways to compare the products
Close Compare button text – The text displayed in a button at the top of the page, prompting the user to close the side by side comparison
Press the “+” button to add a tag to one or more of the 3 available dropdowns. Type the tag label (for example “Startups”) and check the dropdown(s) you would like the tag to appear on.
When adding these tags to a product finder block later, remember to use the exact same wording.
Settings tab (only the product finder listing block specific features are described here)
Number of products per row – choose from 1 to 5. This controls the number of columns on the product listing. For example, if you have 8 products, it makes sense to choose a 4 products per column layout.
Custom class(es) for block – for frontend coders, adds the opportunity to address the product chooser listing block with custom styles and functionality
Inside the “products” tab, add all products that you want to have listed. These are normal blocks, so they can be added in a central place in the block hierarchy and reused in several product listing blocks, for example.
The Product Finder Blocks have the following settings:
Product name – the display name of the product.
Product price – the price of the product - strictly numeric, for reference (if applicable)
Product price text – a text area that is used to describe the product price. This supports HTML coding, inline styles etc, so all possibilities of price descriptions are supported. Use the variable ##ProductPrice## anywhere to reference the “product price” field above in the product price text
Product image – add an image here to represent the product. The recommended pixel size will vary depending on the product, but try to stay inside the 4:3 format and deliver at least 500px width (but don’t exaggerate, 1000px+ is not needed).
Product image alt text – alternative text for the image, for screen readers, SEO etc.
Introduction text – an HTML field for the short text “before read more”. Note that the layout will limit the text displayed to 3 lines - make sure you check your product “live” and shorten the text if necessary
Product features – a structured list to add product features for the side by side comparison. Remember to add any product features in the same order for comparable products, so they appear beside each other in the compare view
Product detail text – the “read more” text for the product, shown directly on the page with an expanding area. This area is not limited by number of lines, but please show moderation. Supports HTML, so for example you could add a video here, add bullets or even other things
CTA Text – the text shown on the CTA button (for example “free trial”, “buy now” or “request quote”)
CTA Title – the HTML title tag for the CTA link - normally used for accessibility
CTA Link – the link that the user navigates to when clicking on the CTA
Press the “+” button to add a tag to the product. The tags will automatically be picked up by the product finder listing block, provided that they are already defined in the dropdowns. Any unlisted tags will simply be ignored.
Custom class – for frontend coders, adds the opportunity to address the product chooser block with custom styles and functionality. For example, add the class “comingsoon” to a product, and then custom CSS style to differentiate the product as coming soon (for example, greyed out and unclickable buy button etc).
Wireframe of a normal product finder view
Wireframe of the product compare view on desktop
A user enters a page that displays a large number of different Visma products that they can choose from. At the top of the page, there are dropdowns that show possible filter settings for the page, like “business area”, “company size” etc.
The user picks “public sector” from the “business area” dropdown, and the large list of products shrinks to a few relevant products. The user can easily read more about the products directly on the page without navigating away. Still a bit unsure about the differences between two of the products, the user clicks the “compare” button on these two, and a “compare products” button appears at the top of the page.
On the compare page, the user can see even more details about the products, along with a list of directly comparable features, and there, the user notices that one of the two products is recommended for a business type that isn’t relevant for the user’s company. The user clicks the CTA button on the most relevant product and is sent to a landing page to read more about the chosen product. The user could even have been linked directly to a signup form for a free trial at this point, or any other relevant outcomes.
A user enters an overview page that has a banner with the call to action “Are you a startup? Click here to see the most relevant products for you”. The user clicks the banner and is immediately presented with a list of products relevant for startups. In effect, the filter for the dropdown “company size” is already selected for the “startup” tag.
After a bit of thinking, the user decides based on the products listed that their company is not a typical startup, and clicks the “x” to remove the already selected “startup” tag. Instead, the user finds the tag “engineering” that matches better, clicks that, and is yet again presented with a small selection of relevant products. They then click through to read more about the product that seems most relevant for them.