A reference guide to the CSS classes used on Shopp pages, products and categories with a how-to on adding your own CSS classes.

Storefront CSS Classes in Shopp

Storefront CSS Classes in Shopp

Since Shopp 1.2 CSS classes have been added to the storefront content areas automatically, but in 1.3 the CSS became a bit more consolidated. Knowing what classes are available are immensely helpful when designing custom layouts for Shopp pages. This guide offers a handy reference to the CSS classes that are used on each of the virtual Shopp pages and the object pages generated by the plugin.

Shopp Pages CSS Reference

The virtual pages are the primary “pages” that show the e-commerce storefront content generated by Shopp. These include the main catalog landing page (the “Shop” page) along with the Account, Cart, Checkout and Thanks pages. They are virtual in the sense that they don’t exist as real WordPress “page” custom post type entries. Shopp builds virtual pages so they can’t be deleted or renamed in a way that breaks the storefront. It also means less setup for merchants because they don’t have to go through the pain of generating placeholder pages.

The object pages are the page views generated by the entries in the database, primarily categories (or other taxonomy terms) and products. We also include the virtual objects of smart collections that don’t actually exist in the database either. They are preprogrammed and get their own page views generated by Shopp.

As a heads-up for awareness, note that the .shopp_page class is being replaced by the .shoppage class eventually. Both classes will be available in future releases for awhile, but it helps to know what the insiders are settling on for future best practices.

Add Your Own CSS Classes

Of course, Shopp wouldn’t be Shopp if it didn’t offer developers a way to add their own CSS classes. You may want to ditch the built-in classes for classes you can rely on for your own uses. The example code below shows had to add CSS classes for the virtual pages and object pages using a custom function for the body_class filter hook.

All of the is_shopp_… calls are part of the Shopp Developer API. Here’s are links to each of the reference guides for the calls used above:

You must be logged in to post a comment.

© Ingenesis Limited. Shopp™ is a registered trademark of Ingenesis Limited.