PrestaShop — refinement of the product card + UX
HTML & CSS
Task
Improve the product card: make it clearer for the user, reduce the number of refusals, correctly add additional information without overloading the page.
What has been done
Refinement of the product.tpl template (Smarty)
Rebuilt the structure of blocks: price, availability, CTA
Separated informational blocks:
delivery
payment
guarantee
Neat tabs instead of large solid text
Light CSS tweaks without interfering with the core
Adaptation for mobile devices (mobile-first)
Technical details
Smarty / CSS
No third-party modules
No overriding of core files
Compatible with PrestaShop updates
Result
The card has become more compact and readable
The main action (buy) is always in view
Easy to scale the solution to other products
Improve the product card: make it clearer for the user, reduce the number of refusals, correctly add additional information without overloading the page.
What has been done
Refinement of the product.tpl template (Smarty)
Rebuilt the structure of blocks: price, availability, CTA
Separated informational blocks:
delivery
payment
guarantee
Neat tabs instead of large solid text
Light CSS tweaks without interfering with the core
Adaptation for mobile devices (mobile-first)
Technical details
Smarty / CSS
No third-party modules
No overriding of core files
Compatible with PrestaShop updates
Result
The card has become more compact and readable
The main action (buy) is always in view
Easy to scale the solution to other products