Mini Tutorial: Magento Pages and Body Classes Part I

Have you ever been working on the frontend of a Magento site and realized you needed a specific page to look different? Have you ever thought you were finished skinning your whole site only to later discover that you missed some pages? If your answer to either of these questions is ‘yes’, and if you have been working with Magento for a while, you most likely are aware that Magento has many pages and different body classes for them. This is a very useful feature, as it helps make page customization easy with CSS.

But, remembering all of these pages and body classes isn’t easy and Magento does not provide you with a list. This is why I’ve put one together, and decided to share a list of Magento Pages and Body Classes with everyone to potentially ease some aggravation while testing your site’s frontend.

The format here will be:

  • Page Name
  • Body Class(es)
  • URL path to page
  • The bolded letters in the body class or URL path indicate text specific to the site you’re on. And anything inside parenthesis indicates a part of the URL path that can be removed in the admin panel Catalog SEO options

    So here we go:

    MAIN PAGES

    HOME PAGE
    .cms-index-index .cms-home
    /
    CATALOG / CATEGORY
    .catalog-category-view .categorypath-category-path-name .category-category-name
    /category-name(.html)
    CATALOG FILTER
    .filter-index-view
    /category-name(.html)?cat=205
    PRODUCT PAGE
    .catalog-product-view .product-product-name
    /category-name/sub-category-name/product-name(.html) or /product-name(.html) (depending on how you set it up in the admin panel)
    PRODUCT PAGE (After clicking ‘Edit’ from Cart)
    .checkout-cart-configure .catalog-product-view .product-product-name
    /checkout/cart/configure/id/91
    PRODUCT PAGE (After clicking ‘Edit’ from Wishlist)
    .wishlist-index-configure .catalog-product-view .product-product-name
    /wishlist/index/configure/id/1
    PRODUCT PAGE (After clicking on the ‘(#) review(s)’ link or on ‘Add Your Review’)
    .review-product-list
    /review/product/list/id/1105/category/204
    SHOPPING CART PAGE
    .checkout-cart-index
    /checkout/cart
    ONE PAGE CHECKOUT
    .checkout-onepage-index
    /checkout/onepage
    ONE PAGE CHECKOUT SUCCESS
    .checkout-onepage-success
    /checkout/onepage/success
    PAYPAL REVIEW PAGE
    .paypal-express-review
    /paypal/express/review

    ACCOUNT PAGES

    LOGIN
    .customer-account-login
    /customer/account/login
    CREATE AN ACCOUNT
    .customer-account-create
    /customer/account/create
    FORGOT YOUR PASSWORD
    .customer-account-forgotpassword
    /customer/account/forgotpassword
    RESET PASSWORD
    .customer-account-resetpassword
    customer/account/reset-password
    LOGOUT SUCCESS
    .customer-account-logoutsuccess
    /customer/account/logoutSuccess

    ACCOUNT SIDEBAR

    ACCOUNT DASHBOARD
    .customer-account-index
    /customer/account
    ACCOUNT DASHBOARD (After clicking ‘Edit’) or ACCOUNT INFORMATION
    .customer-account-edit
    /customer/account/edit
    ADDRESS BOOK (Adding or editing addresses)
    .customer-address-form
    /customer/address/new
    ADDRESS BOOK (After having at least one address saved)
    .customer-address-index
    /customer/address/index or /customer/address
    MY ORDERS
    .sales-order-history
    /sales/order/history
    MY ORDERS (Order Information tab)
    .sales-order-view
    /sales/order/view/order_id/2
    MY ORDERS (Invoices tab)
    .sales-order-invoice
    /sales/order/invoice/order_id/2
    MY ORDERS (Shipments tab)
    .sales-order-shipment
    sales/order/shipment/order_id/2
    MY ORDERS (Returns tab)
    .enterprise-rma-return-returns
    /rma/return/returns/order_id/2
    BILLING AGREEMENTS
    .sales-billing-agreement-index
    /sales/billing_agreement
    RECURRING PROFILES
    .sales-recurring-profile-index
    /sales/recurring_profile
    MY PRODUCT REVIEWS
    .review-customer-index
    /review/customer
    MY PRODUCT REVIEWS (After clicking on ‘View Details’)
    .review-customer-view
    review/customer/view/id/3
    MY TAGS
    .tag-customer-index
    /tag/customer
    MY WISHLIST
    .wishlist-index-index .wishlist-index-share
    /wishlist/index/index
    MY APPLICATIONS
    .oauth-customer-token-index
    /oauth/customer_token
    NEWSLETTER SUBSCRIPTIONS
    .newsletter-manage-index
    /newsletter/manage
    MY DOWNLOADABLE PRODUCTS
    .downloadable-customer-products
    /downloadable/customer/products
    MY INVITATIONS
    .enterprise-invitation-index-index
    /invitation
    MY INVITATIONS (After clicking on ‘Send Invitations’)
    .enterprise-invitation-index-send
    /invitation/index/send/
    STORE CREDIT
    .enterprise-customerbalance-info-index
    /storecredit/info
    GIFT CARD
    .enterprise-giftcardaccount-customer-index
    /giftcard/customer
    GIFT REGISTRY
    .enterprise-giftregistry-index-index
    /giftregistry
    GIFT REGISTRY (After clicking on ‘Add New’)
    .enterprise-giftregistry-index-addselect
    /giftregistry/index/addselect
    GIFT REGISTRY (After adding one)
    .enterprise-giftregistry-index-edit
    /giftregistry/index/edit
    GIFT REGISTRY (After clicking on ‘Manage Items’ on the added one)
    .enterprise-giftregistry-index-items
    /giftregistry/index/items/id/1
    GIFT REGISTRY (After clicking on ‘Share’ on the added one)
    .enterprise-giftregistry-index-share
    /giftregistry/index/share/id/1
    REWARD POINTS
    .enterprise-reward-customer-info
    /reward/customer/info
    MY RETURNS
    .enterprise-rma-return-history
    /rma/return/history
    MY RETURNS (After clicking on ‘Return’ from the Order View page)
    .enterprise-rma-return-create
    /rma/return/create/order_id/2
    MY RETURNS (After clicking on ‘View Return’)
    .enterprise-rma-return-view
    /rma/return/view/entity_id/4
    MY RETURNS – Tracking Information pop-up (After clicking ‘Track this shipment’ when return is authorized)
    .page-popup .enterprise-rma-tracking-popup
    /rma/tracking/popup/hash/cm1hX2lkOjQ6YThjYTRk

    OTHER PAGES

    CMS PAGES
    .cms-page-view .cms-page-name
    /cms-page-name
    PAGE NOT FOUND 404
    .cms-index-noroute .cms-no-route
    /non-existent-url-path
    SEARCH PAGE
    .catalogsearch-result-index
    Use search bar
    RSS PAGE
    .rss-index-index
    /rss (you need to turn this on in the admin panel)
    WORDPRESS PAGES (When you integrate it with Magento)
    .is-blog
    /blog

    That is a lot of pages, isn’t it? Magento does a fairly good job assigning all these intuitively named body classes to its pages. Although, sometimes you need some extra ones. I will show you a few different ways to add extra body classes to your pages in my next blog post. Stay tuned 🙂 and let me know in the comments if you have any questions or if you know of some pages I may have missed.