J2Commerce provides two sets of ready-made layouts to match the CSS framework your Joomla template already uses. Picking the right one means your product listings and detail pages inherit your template's look and feel without extra styling work.
If you are not sure which framework your template uses, check your template's documentation or inspect any page on your site. Bootstrap 5 templates use class names like container, row, and col-md-*. UIKit templates use class names that start with uk-.
Setting the layout in J2Commerce
You set your preferred layout once in J2Commerce -> Configuration -> Store tab. Look for the Layout field and select the option that matches your template. Individual menu items can override this setting if you need different layouts on different pages of your site.
Layout guides
Bootstrap 5 Layouts — For Cassiopeia, Helix Ultimate, Astroid, and most standard Joomla templates.
UIKit Layouts — For YOOtheme Pro, Warp 7, and other UIKit-based templates.
Bootstrap 5 is the default CSS framework built into Joomla 5 and Joomla 6. Most Joomla templates — including Joomla's own default template Cassiopeia — are…
UIKit 3 is a lightweight CSS and JavaScript framework developed by YOOtheme. It is the foundation of YOOtheme Pro — one of the most popular Joomla template…
