CMS is database design. In the world of databases, databases have tables, filled with records. In the world of Webflow, database is the CMS, tables are named Collections, and records are named Items.
The fundamental thing you need to understand about databases is that they’re using crossed tables, known in the Webflow world as Referenced Collections.
The principle is easy to understand: a referenced collection prevents having to enter redundant informations in a CMS item, and allows also for very efficient sorting of Collecton Items.
Example using your case: You have products and they spread into 4 categories. Well, you’re going to create a new Collection, and call it Categories. For the time being, only the Name field is required. So create the collection and fill it with your 4 collection items, each one representing 1 category. now, open your products Collection settings and add a field: Reference, pointing to the Categories collection. And for each product item, edit and set the appropriate categry.
Now you know how to make relationships in a database. Category is the obvious example, it could be a collection of authors, countries… anything that is repetitive. The immediate beneift now is you can have pages for categories and list only the products relative to it, same for collection lists.
Now to your specific question: in your product collection template page, you’ll first design all the elements that are common to all products. then create an area (div, section…) for each category specific things. Design them, they so all appear on one page for every product.
Now select those areas one by one. For example, select the area containing specific things for countertops products. Select it, then in the Settings panel, add a Conditional visibility with the rule: visible when Category is Countertops.