This is an internal work in progress of our Theme Design Guidelines. This will provide tips, should dos and don'ts, common pitfalls warnings, on how to customize Jumpseller Themes.

This Document aims to be used internally & updated and ultimately, published to all external designers.


  • Themes should be W3 compliant. Both markup and styles
  • Javascript Libraries, Plug-ins (slideshows, lightboxes, etc) should always be keept updated. If possible on the latest stable release version.
  • Inline CSS should be avoided and passed to one or more css assets
  • Javascript and CSS should be deferred to the footer.

Theme Blocks

Layout Block

  • If only 1 language per store, language menu should not be displayed
  • Display at least 3 category levels (Category > Sub-category > Sub-sub-category)

Home Block

  • Feature products Slideshow should be limited to 3-5products otherwise it greatly increases the loading time of all imagery

Category Block

  • Avoid printing product.description for performance and CSS problems due to the HTML support of Product's Description.

Product Block

  • Display multiple Product images
  • Allow Customer to select a purchase quantity
  • Display Product Price, Stock and SKU
  • Display Product Custom Fields if available
  • Display Product Attachments if available (and Product isn't Virtugal)
  • Display Product Options if available
  • Display Product Discounts if available
  • Control Product status logic ( p.e. display 'add to cart' button only if status is available)

Cart Page

  • Taxes should be hidden if value is zero
  • Promotion should be hidden if value is zero

Checkout Block

  • Support Custom Checkout Fields

Review Order Block

  • The Ordered Products (product name, quantity ordered) and Order Totals (Order Subtotal, Order Discount, etc) should be displayed.
  • Updating Cart properties should be avoided (no product quantity update, product delete, etc).
  • Links to the Product Page should be avoided.
  • Shipping (if available) and Billing Information should be displayed. ###Success Block
  • A success or unsuccess message (p.e. 'Thanks for you purchase') should be displayed
  • The Order Number ``should be displayed.
  • The Shipping Information and Payment Information should be displayed.
  • If Customer Login is optional, the Customer Create Password form should be displayed. ###Page Block
  • Page should handle correctly p, ul, li, div, img, other usual HTML tags and embeded videos.
  • Page should handle correctly very width images.

Search Block

  • At the Search Results page, apart from a gallery of products, display: the search query, the number of results


Theme Options

  • Prefer using complete URLs for Twitter/Facebook/etc and avoid creating a logic with usernames and account IDs.
  • If no Twitter/Facebook/Email etc URL given do not display the Theme Option.


  • All images should be resized for a proper image size & load time. Including main product image
  • "Resize" should always be favoured to "Thumb"
  • All images should have both a ALT and Text tag
  • If no image, display a placeholder with instructions to upload images


  • HTML code should be indented using our Editor shortcut keys: Select All (Ctrl + A) and Shift + Tab


  • Non ending text, like full stops (.) or colons (:) should be outside of translation strings. {% Sorty by %}:
  • Themes should be fully translated in our main languages before publish at
  • Translations should be thought to benefit the final customer. e.g. no need to translate merchant help strings: "This product has no image"


  • At Home Page, Store's Name should be H1, Store Description should be H2 and Product's Names should be H3
  • At Category Page, Category's Name should be H1, Product's Name should be H2 and Product's Description should be H3.
  • At Product Page, Product's Name should be H1, Product's Description should be H2
  • Follow general SEO Web Design Guides like: