How to include price when showing search results based on site search?
Hi everyone,
i want to show prices of a product, when I am searching for it on my website (via site search).
However, I am not able to connect a text block to the pricing field of a collection list (I was also lacking in limiting the site search to a collection list).
Do you have an idea how to connect that?
In addition to that: How can I add a “add to cart” button within these results?
In the end, I want to show products (like in a product catalogue) with prices on my search result page, that the users can directly put into a shopping cart (example: zalando; https://www.zalando.de/katalog/?q=shoe)
Hi Jens, as Jeff advised, the only way to add this kind of functionality into Webflow’s native site search is to build it yourself in custom code.
If you’re familiar with Javascript, The way I’ve done this in the past is to replace the search results snippets with product and other type-specific cards based on the URL path. For example, if you have 20 snippets, you could identify those with a /products/* path, and then replace those with a product card that has product-specific info.
You can use the same technique for real estate property listing cards, blog articles with author and date shown, courses with level and category shown, etc.
Replacing them is best done with hidden collection lists that contain all of the possible “product cards” on the page, styled how you want. You use that for the replacement.
There’s a secondary problem here however which is that to make this look good, you probably need to consider layout. Most of the time, you want all of the product matches to group together in one area, and all of the general results to group together in another… and it all needs to be responsive. CSS grids are great for this.
Test the search functionality, product listings, and “Add to Cart” buttons to ensure they work correctly. Optimize the user experience based on feedback and analytics.
Ensure that your e-commerce platform is properly configured with payment gateways and checkout options to enable users to complete their purchases.
Nothing I can share, I custom build these solutions for clients, and each is specific t their needs.
However you can see a simple example here that shows a card-style results page with type-groupings.
DM me if you need professional help building this out.
