.svg)
Customizing the septic tank catalog in CS-Cart for Bioseptikon.ru
An online store for septic tanks and engineering equipment.
Bioseptikon.ru sells septic tanks, cesspits, cellar tanks, and related products. The catalog includes many similar models, where the choice depends on variations, drainage type, installation, and technical specifications. The goal was to make product cards more informative without forcing users to open the product page.
Thanks to Anton for the work! All items in the brief were completed precisely: variation buttons and feature displays with icons were added to the desktop and mobile catalog grid. A “Show options” button was added on the mobile product page. The captcha was hidden, the old robots.txt was removed. Thanks as well for the options logic for “with installation” variations. Happy with the work!
Client goal
Make the catalog useful for choosing a complex product before opening the product card
In the default UniTheme2 grid, the buyer saw a photo, name, price, and add-to-cart button. For septic tanks, that is not enough: one model can have different drainage types, modifications, installation options, pipe depth, and other characteristics. The task was to display this data in the listing and keep a convenient buying flow on desktop and mobile devices.
Tasks
- customize the catalog grid in the desktop version
- add variation switch buttons directly inside the product card
- show features with values and icon support
- add a “Choose options” button at the bottom of the product card
- adapt the same flow for the mobile product list
- show features in the option-selection popup and expand options on the mobile product page
What I did
Expanded the product card in the catalog and connected it to CS-Cart variations
Desktop grid
For desktop, I kept the “Grid” view in UniTheme2 and added variation switches, technical features, and a bottom option-selection button to the card.
Mobile catalog
For mobile, I used the “List without options” view: an “Options” button appeared next to the cart, while features and variations remained available without overloading the card.
Features with icons
I displayed user count, pipe depth, surge capacity, performance, and other parameters, with the ability to attach icons to features.
Variation linkage
When a variation is switched, the feature values change too. For septic tanks, this is especially important for pipe depth.
Unified options popup
The “Add to cart,” “Choose options,” and “Options” buttons all open the same selection flow. The popup also shows product features.
Mobile product page
On the product page, I added a “Show options” button so the buyer can manage variations without a long block taking over the screen immediately.
UI-UX
The product card became a decision-making tool, not just a price display
Before the customization, the user saw a standard compact grid. After the changes, the card shows variations, key parameters, and a dedicated action for selecting options. This reduces unnecessary navigation and helps compare similar models directly in the category.
What the client got
The main result is that buyers can understand the differences between models faster and choose the right configuration without extra clicks. For a technical product catalog, that directly improves comparison and lead quality.
Who this work is for
If your catalog contains many similar products with variations, options, and technical parameters, the default CS-Cart card often hides important information. It can be customized surgically while keeping UniTheme2 and the existing store structure.
Complex technical products
The buyer needs to compare not only price, but also performance, dimensions, connection methods, compatibility, and other parameters.
Many variations in one model
If modifications differ by features, the catalog card should update the data when the variation is switched.
Options affect the purchase
When a product cannot simply be added to the cart, the user should be clearly guided to the option-selection window instead of hiding that flow.
Mobile catalog performance drops
On mobile, it is important to separate quick actions from detailed information: options, description, and features should be available, but without breaking the compact list layout.
UniTheme2 needs adaptation
The ready-made template covers the basic flow, but a complex catalog often requires careful TPL, JS, and data-output customization.
Managers get too many questions
If features are not visible in the listing, customers ask more basic questions. Some of those questions can be answered directly in the product card.
How to prepare a UniTheme2 customization without unnecessary rework
If you want to understand it yourself first: what should be shown in the catalog card, which CS-Cart and UniTheme2 capabilities to check before development, and what must be tested on mobile.
Frequently asked questions
Can the UniTheme2 catalog card be customized without replacing the whole template?
Yes. If the task is about showing variations, features, buttons, and popups, targeted changes to templates, JS, and CS-Cart PHP logic are usually enough.
How can you show features with icons in the catalog card?
You need to define the set of features for the listing, prepare the value output, and add the icon binding. The important part is not to bring every product property into the card, but only the parameters that help choose the model.
What is important when switching variations in the product list?
The card should update not only the price and the buy button, but also the characteristics of the selected variation. Otherwise, the user sees one product variant while the parameters remain from another.
Can the same option-selection window be opened from different buttons?
Yes. In this case, the “Add to cart,” “Choose options,” and “Options” buttons all lead to the same flow so the user does not end up in different configuration interfaces.
Why should the mobile catalog version be customized separately?
A mobile screen has less space. What works well in a desktop grid can overwhelm a product list. That is why the mobile version needs separate buttons, compact feature output, and expandable blocks.